From e78b3c34348f26d40a813612c5a3786f1c56607a Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Tue, 29 Aug 2017 18:07:53 +0800 Subject: Initial SASS build --- src/utilities/_colors.scss | 29 ++++++++++++++++++++++++ src/utilities/_display.scss | 47 +++++++++++++++++++++++++++++++++++++++ src/utilities/_divider.scss | 50 ++++++++++++++++++++++++++++++++++++++++++ src/utilities/_loading.scss | 34 +++++++++++++++++++++++++++++ src/utilities/_position.scss | 35 +++++++++++++++++++++++++++++ src/utilities/_shapes.scss | 7 ++++++ src/utilities/_text.scss | 50 ++++++++++++++++++++++++++++++++++++++++++ src/utilities/colors.less | 45 -------------------------------------- src/utilities/display.less | 47 --------------------------------------- src/utilities/divider.less | 50 ------------------------------------------ src/utilities/loading.less | 34 ----------------------------- src/utilities/position.less | 35 ----------------------------- src/utilities/shapes.less | 7 ------ src/utilities/text.less | 52 -------------------------------------------- 14 files changed, 252 insertions(+), 270 deletions(-) create mode 100644 src/utilities/_colors.scss create mode 100644 src/utilities/_display.scss create mode 100644 src/utilities/_divider.scss create mode 100644 src/utilities/_loading.scss create mode 100644 src/utilities/_position.scss create mode 100644 src/utilities/_shapes.scss create mode 100644 src/utilities/_text.scss delete mode 100644 src/utilities/colors.less delete mode 100644 src/utilities/display.less delete mode 100644 src/utilities/divider.less delete mode 100644 src/utilities/loading.less delete mode 100644 src/utilities/position.less delete mode 100644 src/utilities/shapes.less delete mode 100644 src/utilities/text.less (limited to 'src/utilities') diff --git a/src/utilities/_colors.scss b/src/utilities/_colors.scss new file mode 100644 index 0000000..767c353 --- /dev/null +++ b/src/utilities/_colors.scss @@ -0,0 +1,29 @@ +// Text colors +@include text-color-variant(".text-primary", $primary-color); + +@include text-color-variant(".text-secondary", $secondary-color-dark); + +@include text-color-variant(".text-gray", $gray-color); + +@include text-color-variant(".text-light", $light-color); + +@include text-color-variant(".text-success", $success-color); + +@include text-color-variant(".text-warning", $warning-color); + +@include text-color-variant(".text-error", $error-color); + +// Background colors +@include bg-color-variant(".bg-primary", $primary-color); + +@include bg-color-variant(".bg-secondary", $secondary-color); + +@include bg-color-variant(".bg-dark", $dark-color); + +@include bg-color-variant(".bg-gray", $bg-color); + +@include bg-color-variant(".bg-success", $success-color); + +@include bg-color-variant(".bg-warning", $warning-color); + +@include bg-color-variant(".bg-error", $error-color); \ No newline at end of file diff --git a/src/utilities/_display.scss b/src/utilities/_display.scss new file mode 100644 index 0000000..550124d --- /dev/null +++ b/src/utilities/_display.scss @@ -0,0 +1,47 @@ +// Display +.d-block { + display: block; +} +.d-inline { + display: inline; +} +.d-inline-block { + display: inline-block; +} +.d-flex { + display: flex; +} +.d-inline-flex { + display: inline-flex; +} +.d-none, +.d-hide { + display: none !important; +} +.d-visible { + visibility: visible; +} +.d-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; +} +.c-hand { + cursor: pointer; +} diff --git a/src/utilities/_divider.scss b/src/utilities/_divider.scss new file mode 100644 index 0000000..5d0feb2 --- /dev/null +++ b/src/utilities/_divider.scss @@ -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.scss b/src/utilities/_loading.scss new file mode 100644 index 0000000..c0cdb1e --- /dev/null +++ b/src/utilities/_loading.scss @@ -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.scss b/src/utilities/_position.scss new file mode 100644 index 0000000..548368f --- /dev/null +++ b/src/utilities/_position.scss @@ -0,0 +1,35 @@ +// Position +.clearfix { + @include 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 +@include margin-variant(0, 0); +@include margin-variant(1, $unit-1); +@include margin-variant(2, $unit-2); + +@include padding-variant(0, 0); +@include padding-variant(1, $unit-1); +@include padding-variant(2, $unit-2); \ No newline at end of file diff --git a/src/utilities/_shapes.scss b/src/utilities/_shapes.scss new file mode 100644 index 0000000..ab6585b --- /dev/null +++ b/src/utilities/_shapes.scss @@ -0,0 +1,7 @@ +// Shapes +.rounded { + border-radius: $border-radius; +} +.circle { + border-radius: 50%; +} diff --git a/src/utilities/_text.scss b/src/utilities/_text.scss new file mode 100644 index 0000000..a1e0980 --- /dev/null +++ b/src/utilities/_text.scss @@ -0,0 +1,50 @@ +// 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 { + @include text-ellipsis(); +} +.text-clip { + overflow: hidden; + text-overflow: clip; + white-space: nowrap; +} +.text-break { + hyphens: auto; + word-break: break-word; + word-wrap: break-word; +} diff --git a/src/utilities/colors.less b/src/utilities/colors.less deleted file mode 100644 index 9571241..0000000 --- a/src/utilities/colors.less +++ /dev/null @@ -1,45 +0,0 @@ -// 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(@success-color); -} -.text-warning { - .text-color-variant(@warning-color); -} -.text-error { - .text-color-variant(@error-color); -} - -// 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(@success-color); -} -.bg-warning { - .bg-color-variant(@warning-color); -} -.bg-error { - .bg-color-variant(@error-color); -} diff --git a/src/utilities/display.less b/src/utilities/display.less deleted file mode 100644 index 26e611e..0000000 --- a/src/utilities/display.less +++ /dev/null @@ -1,47 +0,0 @@ -// Display -.d-block { - display: block; -} -.d-inline { - display: inline; -} -.d-inline-block { - display: inline-block; -} -.d-flex { - display: flex; -} -.d-inline-flex { - display: inline-flex; -} -.d-none, -.hide { - display: none !important; -} -.d-visible { - visibility: visible; -} -.d-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 deleted file mode 100644 index a5cb45b..0000000 --- a/src/utilities/divider.less +++ /dev/null @@ -1,50 +0,0 @@ -// 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 deleted file mode 100644 index 767ec9e..0000000 --- a/src/utilities/loading.less +++ /dev/null @@ -1,34 +0,0 @@ -// 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 deleted file mode 100644 index 235d6a6..0000000 --- a/src/utilities/position.less +++ /dev/null @@ -1,35 +0,0 @@ -// 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(0, 0); -.margin-variant(1, @unit-1); -.margin-variant(2, @unit-2); - -.padding-variant(0, 0); -.padding-variant(1, @unit-1); -.padding-variant(2, @unit-2); \ No newline at end of file diff --git a/src/utilities/shapes.less b/src/utilities/shapes.less deleted file mode 100644 index e9f63bc..0000000 --- a/src/utilities/shapes.less +++ /dev/null @@ -1,7 +0,0 @@ -// Shapes -.rounded { - border-radius: @border-radius; -} -.circle { - border-radius: 50%; -} diff --git a/src/utilities/text.less b/src/utilities/text.less deleted file mode 100644 index f571613..0000000 --- a/src/utilities/text.less +++ /dev/null @@ -1,52 +0,0 @@ -// 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; -} -- cgit v1.3.1-26-gb76a From 8c0f6b2d3ae609b581af7d71610d50e00ab49990 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Tue, 29 Aug 2017 21:43:06 +0800 Subject: Improve Docs navbar --- docs/components.html | 30 ++++++++------ docs/css/docs.css | 87 ++++++++++++++++++++++++++-------------- docs/dist/spectre.css | 25 +++++++++++- docs/dist/spectre.min.css | 2 +- docs/elements.html | 29 ++++++++------ docs/experimentals.html | 29 ++++++++------ docs/getting-started.html | 34 ++++++++++------ docs/layout.html | 29 ++++++++------ docs/src/docs.scss | 98 +++++++++++++++++++++++++++++---------------- docs/utilities.html | 29 ++++++++------ gulpfile.js | 1 - src/_accordions.scss | 2 +- src/_chips.scss | 1 + src/_tooltips.scss | 2 + src/utilities/_display.scss | 17 ++++++++ 15 files changed, 275 insertions(+), 140 deletions(-) (limited to 'src/utilities') diff --git a/docs/components.html b/docs/components.html index ed34761..251401e 100644 --- a/docs/components.html +++ b/docs/components.html @@ -14,19 +14,13 @@
-
- - -
- GitHub -
-