diff options
| Commit | c9e625c9dd8f1628c58b10bb165961eae068002f (patch) | |
|---|---|---|
| Author | 2017-08-15 16:30:05 +0800 | |
| Committer | 2017-08-15 16:30:05 +0800 | |
| Files | 9031e1df36c23e49deecad79df2a272b0d076270 /src/utilities | |
| Spectre-Dark-Gruvbox-0.2.15.tar Spectre-Dark-Gruvbox-0.2.15.tar.gz Spectre-Dark-Gruvbox-0.2.15.zip | ||
| Parent | 846353cb40512404c5b8d27084a6fbe7b4a47d23 (diff) | |
| Parent | d6b5a13424cb56db116483f79d6253205e26757c (diff) | |
Merge pull request #249 from picturepan2/0.2.15 v0.2.15
0.2.15
7 files changed, 267 insertions, 0 deletions
| -rw-r--r-- | src/utilities/colors.less | 45 | ||||
| -rw-r--r-- | src/utilities/display.less | 46 | ||||
| -rw-r--r-- | src/utilities/divider.less | 50 | ||||
| -rw-r--r-- | src/utilities/loading.less | 34 | ||||
| -rw-r--r-- | src/utilities/position.less | 33 | ||||
| -rw-r--r-- | src/utilities/shapes.less | 7 | ||||
| -rw-r--r-- | src/utilities/text.less | 52 |
diff --git a/src/utilities/colors.less b/src/utilities/colors.less new file mode 100644 index 0000000..64f7689 --- /dev/null +++ b/src/utilities/colors.less @@ -0,0 +1,45 @@ +// Text colors +.text-primary { + .text-color-variant(@primary-color); +} +.text-secondary { + .text-color-variant(@secondary-color-dark); +} +.text-gray { + .text-color-variant(@gray-color); +} +.text-light { + .text-color-variant(@light-color); +} +.text-success { + .text-color-variant(@control-color-success); +} +.text-warning { + .text-color-variant(@control-color-warning); +} +.text-error { + .text-color-variant(@control-color-error); +} + +// Background colors +.bg-primary { + .bg-color-variant(@primary-color); +} +.bg-secondary { + .bg-color-variant(@secondary-color); +} +.bg-dark { + .bg-color-variant(@dark-color); +} +.bg-gray { + .bg-color-variant(@bg-color); +} +.bg-success { + .bg-color-variant(@control-color-success); +} +.bg-warning { + .bg-color-variant(@control-color-warning); +} +.bg-error { + .bg-color-variant(@control-color-error); +} diff --git a/src/utilities/display.less b/src/utilities/display.less new file mode 100644 index 0000000..a00aa4a --- /dev/null +++ b/src/utilities/display.less @@ -0,0 +1,46 @@ +// Display +.block { + display: block; +} +.inline { + display: inline; +} +.inline-block { + display: inline-block; +} +.flex { + display: flex; +} +.inline-flex { + display: inline-flex; +} +.hide { + display: none !important; +} +.visible { + visibility: visible; +} +.invisible { + visibility: hidden; +} +.text-hide { + background: transparent; + border: 0; + color: transparent; + font-size: 0; + line-height: 0; + text-shadow: none; +} +.text-assistive { + border: 0; + clip: rect(0,0,0,0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} +.hand { + cursor: pointer; +} diff --git a/src/utilities/divider.less b/src/utilities/divider.less new file mode 100644 index 0000000..a5cb45b --- /dev/null +++ b/src/utilities/divider.less @@ -0,0 +1,50 @@ +// Divider +.divider, +.divider-vert { + display: block; + position: relative; + + &[data-content]::after { + background: @bg-color-light; + color: @gray-color; + content: attr(data-content); + display: inline-block; + font-size: @font-size-sm; + padding: 0 @unit-2; + transform: translateY(-@font-size-sm + @border-width); + } +} + +.divider { + border-top: @border-width solid @border-color; + height: @border-width; + margin: @unit-2 0; + + &[data-content] { + margin: @unit-4 0; + } +} + +.divider-vert { + display: block; + padding: @unit-4; + + &::before { + border-left: @border-width solid @border-color; + bottom: @unit-2; + content: ""; + display: block; + left: 50%; + position: absolute; + top: @unit-2; + transform: translateX(-50%); + } + + &[data-content]::after { + left: 50%; + padding: @unit-1 0; + position: absolute; + top: 50%; + transform: translate(-50%, -50%); + } +} diff --git a/src/utilities/loading.less b/src/utilities/loading.less new file mode 100644 index 0000000..767ec9e --- /dev/null +++ b/src/utilities/loading.less @@ -0,0 +1,34 @@ +// Loading +.loading { + color: transparent !important; + min-height: @unit-4; + pointer-events: none; + position: relative; + &::after { + animation: loading 500ms infinite linear; + border: @border-width-lg solid @primary-color; + border-radius: 50%; + border-right-color: transparent; + border-top-color: transparent; + content: ""; + display: block; + height: @unit-4; + left: 50%; + margin-left: -@unit-2; + margin-top: -@unit-2; + position: absolute; + top: 50%; + width: @unit-4; + z-index: @zindex-0; + } + + &.loading-lg { + min-height: @unit-10; + &::after { + height: @unit-8; + width: @unit-8; + margin-left: -@unit-4; + margin-top: -@unit-4; + } + } +}
\ No newline at end of file diff --git a/src/utilities/position.less b/src/utilities/position.less new file mode 100644 index 0000000..1bf33b5 --- /dev/null +++ b/src/utilities/position.less @@ -0,0 +1,33 @@ +// Position +.clearfix { + .clearfix(); +} +.float-left { + float: left !important; +} +.float-right { + float: right !important; +} + +.relative { + position: relative; +} +.absolute { + position: absolute; +} +.fixed { + position: fixed; +} +.centered { + display: block; + float: none; + margin-left: auto; + margin-right: auto; +} + +// Spacing +.margin-variant(1); +.margin-variant(2); + +.padding-variant(1); +.padding-variant(2);
\ No newline at end of file diff --git a/src/utilities/shapes.less b/src/utilities/shapes.less new file mode 100644 index 0000000..e9f63bc --- /dev/null +++ b/src/utilities/shapes.less @@ -0,0 +1,7 @@ +// Shapes +.rounded { + border-radius: @border-radius; +} +.circle { + border-radius: 50%; +} diff --git a/src/utilities/text.less b/src/utilities/text.less new file mode 100644 index 0000000..f571613 --- /dev/null +++ b/src/utilities/text.less @@ -0,0 +1,52 @@ +// Text +.text-left { + text-align: left; +} +.text-right { + text-align: right; +} +.text-center { + text-align: center; +} +.text-justify { + text-align: justify; +} + +.text-lowercase { + text-transform: lowercase; +} +.text-uppercase { + text-transform: uppercase; +} +.text-capitalize { + text-transform: capitalize; +} + +.text-normal { + font-weight: normal; +} +.text-bold { + font-weight: bold; +} +.text-italic { + font-style: italic; +} +.text-large { + font-size: 1.2em; +} + +.text-ellipsis { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.text-clip { + overflow: hidden; + text-overflow: clip; + white-space: nowrap; +} +.text-break { + hyphens: auto; + word-break: break-word; + word-wrap: break-word; +} |