From 3ab3a9d09955772ec56ddadbba49954b4edd6a3e Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Tue, 6 Nov 2018 18:52:37 +0800 Subject: Update the Docs completely --- docs/utilities.html | 490 ++++++++++++---------------------------------------- 1 file changed, 108 insertions(+), 382 deletions(-) (limited to 'docs/utilities.html') diff --git a/docs/utilities.html b/docs/utilities.html index 7fad7e0..69139c1 100644 --- a/docs/utilities.html +++ b/docs/utilities.html @@ -23,7 +23,8 @@
@@ -31,11 +32,14 @@
@@ -44,14 +48,22 @@
@@ -60,9 +72,12 @@
@@ -71,25 +86,44 @@
@@ -98,14 +132,22 @@
@@ -114,17 +156,28 @@
@@ -133,333 +186,6 @@
-
-

Color utilities

-
-
- - - -
-
- - -
-
-

Color utilities are used for changing colors for text, link and background.

-

Text colors

-
-
-

primary color

-

secondary color

-

dark color

-

gray color

-

light color

-

success color

-

warning color

-

error color

-
-
- 
<span class="text-primary">primary color</span>
-<span class="text-secondary">secondary color</span>
-<span class="text-dark">dark color</span>
-<span class="text-gray">gray color</span>
-<span class="text-light">light color</span>
-<span class="text-success">success color</span>
-<span class="text-warning">warning color</span>
-<span class="text-error">error color</span>
-
-
-
-

primary link

-

secondary link

-

dark link

-

gray link

-

light link

-

success link

-

warning link

-

error link

-
-
- 
<a class="text-primary" href="#">primary color</a>
-<a class="text-secondary" href="#">secondary color</a>
-<a class="text-dark" href="#">dark color</a>
-<a class="text-gray" href="#">gray color</a>
-<a class="text-light" href="#">light color</a>
-<a class="text-success" href="#">success color</a>
-<a class="text-warning" href="#">warning color</a>
-<a class="text-error" href="#">error color</a>
-
-

Background colors

-
-
-

primary bg

-

secondary bg

-

dark bg

-

gray bg

-

success bg

-

warning bg

-

error bg

-
-
- 
<div class="bg-primary">primary bg</div>
-<div class="bg-secondary">secondary bg</div>
-<div class="bg-dark">dark bg</div>
-<div class="bg-gray">gray bg</div>
-<div class="bg-success">success bg</div>
-<div class="bg-warning">warning bg</div>
-<div class="bg-error">error bg</div>
-
-
-

Cursor utilities

-

Cursor utilities specify which mouse cursor to display when mouseover.

-
-
-
c-hand
-
-
-
c-move
-
-
-
c-zoom-in
-
-
-
c-zoom-out
-
-
-
c-not-allowed
-
-
-
c-auto
-
-
- 
<!-- cursor: hand; -->
-<div class="c-hand"></div>
-<!-- cursor: move; -->
-<div class="c-move"></div>
-<!-- cursor: zoom-in; -->
-<div class="c-zoom-in"></div>
-<!-- cursor: zoom-out; -->
-<div class="c-zoom-out"></div>
-<!-- cursor: not-allowed; -->
-<div class="c-not-allowed"></div>
-<!-- cursor: auto; -->
-<div class="c-auto"></div>
-
-
-

Display utilities

-
- -
-

Display utilities are used for display and hidden things.

- 
<!-- display: block; -->
-<div class="d-block"></div>
-<!-- display: inline; -->
-<div class="d-inline"></div>
-<!-- display: inline-block; -->
-<div class="d-inline-block"></div>
-<!-- display: flex; -->
-<div class="d-flex"></div>
-<!-- display: inline-flex; -->
-<div class="d-inline-flex"></div>
-<!-- display: none; -->
-<div class="d-none"></div>
-<div class="d-hide"></div>
-<!-- visibility: visible; -->
-<div class="d-visible"></div>
-<!-- visibility: hidden; -->
-<div class="d-invisible"></div>
-<!-- hide text contents -->
-<div class="text-hide"></div>
-<!-- assistive text for screen reader -->
-<div class="text-assistive"></div>
-
-
-

Divider

-

A Divider is used for separating elements.

-
-
-
-
-
-
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. -
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. -
-
-
-
-
-
- - -
-
- - -
-
- -
-
- -
-
-
-
-
-
-
- - -
-
- - -
-
-
-
- 
<!-- divider element -->
-<div class="divider"></div>
-<!-- divider element with text -->
-<div class="divider text-center" data-content="OR"></div>
-
-<!-- vertical divider element with text -->
-<div class="columns">
-  <div class="column">
-    <!-- column content -->
-  </div>
-  <div class="divider-vert" data-content="OR"></div>
-  <div class="column">
-    <!-- column content -->
-  </div>
-</div>
-
-
-

Loading

-
-
- - - -
-
- - -
-
-

- Loading indicator is used for loading or updating. - You can add the loading class to a container for loading status. -

-
-
-
-
-
-

Add the loading-lg class for large size.

-
-
-
-
-
- 
<!-- loading element -->
-<div class="loading"></div>
-<div class="loading loading-lg"></div>
-
-
-

Position utilities

-

Position utilities are used for useful layout and position things, including clearfix, float, position and margin/padding utilities.

- 
<!-- clear float -->
-<div class="clearfix"></div>
-<!-- float: left and right -->
-<div class="float-left"></div>
-<div class="float-right"></div>
-<!-- position: relative, absolute, fixed and sticky -->
-<div class="p-relative"></div>
-<div class="p-absolute"></div>
-<div class="p-fixed"></div>
-<div class="p-sticky"></div>
-<!-- centered block -->
-<div class="p-centered"></div>
-
-<!-- m-1 {margin: 4px;} m-2 {margin: 8px;} -->
-<div class="m-1"></div>
-<div class="m-2"></div>
-<!-- margin in 4 directions. mt-1 {margin-top: 4px;} mt-2 {margin-top: 8px;} -->
-<div class="mt-1"></div>
-<div class="mt-2"></div>
-<!-- mx-1 {margin-left: 4px; margin-right: 4px;} -->
-<div class="mx-1"></div>
-<div class="mx-2"></div>
-<div class="my-1"></div>
-<div class="my-2"></div>
-<!-- p-1 {padding: 4px;} p-2 {padding: 8px;} -->
-<div class="p-1"></div>
-<div class="p-2"></div>
-<!-- padding in 4 directions. pt-1 {padding-top: 4px;} pt-2 {padding-top: 8px;} -->
-<div class="pt-1"></div>
-<div class="pt-2"></div>
-<!-- px-1 {padding-left: 4px; padding-right: 4px;} -->
-<div class="px-1"></div>
-<div class="px-2"></div>
-<div class="py-1"></div>
-<div class="py-2"></div>
-
-
-

Shape utilities

-

Shape utilities are used for change element shapes.

-
-
-
s-rounded
-
-
-
s-circle
-
-
- 
<!-- rounded element -->
-<div class="s-rounded"></div>
-<!-- circle element -->
-<div class="s-circle"></div>
-
-
-

Text utilities

-

Text utilities are used for text alignment, styles and overflow things.

- 
<!-- left-aligned text -->
-<div class="text-left"></div>
-<!-- center-aligned text -->
-<div class="text-center"></div>
-<!-- right-aligned text -->
-<div class="text-right"></div>
-<!-- justified text -->
-<div class="text-justify"></div>
-
-<!-- Lowercased text -->
-<div class="text-lowercase"></div>
-<!-- Uppercased text -->
-<div class="text-uppercase"></div>
-<!-- Capitalized text -->
-<div class="text-capitalize"></div>
-
-<!-- Normal weight text -->
-<div class="text-normal"></div>
-<!-- Bold text -->
-<div class="text-bold"></div>
-<!-- Italicized text -->
-<div class="text-italic"></div>
-<!-- Larger text (120%) -->
-<div class="text-large"></div>
-
-<!-- Overflow behavior: display an ellipsis to represent clipped text -->
-<div class="text-ellipsis"></div>
-<!-- Overflow behavior: truncate the text -->
-<div class="text-clip"></div>
-<!-- Text may be broken at arbitrary points -->
-<div class="text-break"></div>
-