diff options
| author | Yan Zhu <picturepan2@hotmail.com> | 2017-09-01 08:35:52 +0300 |
|---|---|---|
| committer | Yan Zhu <picturepan2@hotmail.com> | 2017-09-01 08:35:52 +0300 |
| commit | 01ab1832dac5d902ede2e7f96af2c0296737c46f (patch) | |
| tree | 99e6c1001c9776cd719be401485d335e7b6ed5f6 | |
| parent | 30cf502553355cf2a632781a4839c44e1c83a71c (diff) | |
Improve SASS coding with Hound CI results, and change Hound CI configs.
36 files changed, 96 insertions, 49 deletions
@@ -2,6 +2,7 @@ /dist/ node_modules/ .* +!.csscomb.json !.gitignore !.gitattributes -!.csscomb.json +!.hound.yml diff --git a/.hound.yml b/.hound.yml new file mode 100644 index 0000000..dc8c607 --- /dev/null +++ b/.hound.yml @@ -0,0 +1,2 @@ +scss: + config_file: .scss-lint.yml
\ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md index 7f80826..5fa1dc3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ ### [v0.4.0](https://github.com/picturepan2/spectre/releases/tag/v0.4.0) - Switch from LESS to SASS +- Add Cursor utilities ### [v0.3.2](https://github.com/picturepan2/spectre/releases/tag/v0.3.2) diff --git a/docs/components.html b/docs/components.html index b4f90ed..98ceca1 100644 --- a/docs/components.html +++ b/docs/components.html @@ -182,6 +182,9 @@ <a href="utilities.html#colors">Colors</a> </li> <li class="menu-item"> + <a href="utilities.html#cursors">Cursors</a> + </li> + <li class="menu-item"> <a href="utilities.html#display">Display</a> </li> <li class="menu-item"> diff --git a/docs/dist/spectre.css b/docs/dist/spectre.css index 826a11a..3beb070 100644 --- a/docs/dist/spectre.css +++ b/docs/dist/spectre.css @@ -379,8 +379,8 @@ abbr[title] { kbd { background: #454d5d; border-radius: .1rem; - color: #fff; - font-size: .65rem; + color: #fff; + font-size: .65rem; line-height: 1; padding: .15rem; } @@ -767,7 +767,7 @@ legend { } .form-input:focus { - border-color: #5764c6; + border-color: #5764c6; box-shadow: 0 0 0 .1rem rgba(87, 100, 198, .2); } @@ -857,7 +857,7 @@ textarea.form-input { } .form-select:focus { - border-color: #5764c6; + border-color: #5764c6; box-shadow: 0 0 0 .1rem rgba(87, 100, 198, .2); } @@ -931,7 +931,7 @@ textarea.form-input { .form-checkbox input:focus + .form-icon, .form-radio input:focus + .form-icon, .form-switch input:focus + .form-icon { - border-color: #5764c6; + border-color: #5764c6; box-shadow: 0 0 0 .1rem rgba(87, 100, 198, .2); } @@ -1182,7 +1182,7 @@ textarea.form-input { .form-radio.is-error input:focus + .form-icon, .has-error .form-switch input:focus + .form-icon, .form-switch.is-error input:focus + .form-icon { - border-color: #e85600; + border-color: #e85600; box-shadow: 0 0 0 .1rem rgba(232, 86, 0, .2); } @@ -1241,8 +1241,8 @@ input.disabled + .form-icon { .label { background: #f8f9fa; border-radius: .1rem; - color: #5b657a; - display: inline-block; + color: #5b657a; + display: inline-block; line-height: 1; padding: .15rem; } @@ -1281,8 +1281,8 @@ input.disabled + .form-icon { code { background: #fdf4f4; border-radius: .1rem; - color: #e06870; - font-size: .65rem; + color: #e06870; + font-size: .65rem; line-height: 1; padding: .15rem; } @@ -1911,7 +1911,7 @@ code { } .form-autocomplete .form-autocomplete-input.is-focused { - border-color: #5764c6; + border-color: #5764c6; box-shadow: 0 0 0 .1rem rgba(87, 100, 198, .2); } @@ -2623,7 +2623,7 @@ code { } .popover .card { - border: 0; + border: 0; box-shadow: 0 .2rem .5rem rgba(69, 77, 93, .3); } @@ -2798,7 +2798,7 @@ code { .tile.tile-centered .tile-title, .tile.tile-centered .tile-subtitle { - margin-bottom: 0; + margin-bottom: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -3195,7 +3195,7 @@ a.text-error:hover { .loading.loading-lg::after { height: 1.6rem; margin-left: -.8rem; - margin-top: -.8rem; + margin-top: -.8rem; width: 1.6rem; } diff --git a/docs/elements.html b/docs/elements.html index e2044b5..283174f 100644 --- a/docs/elements.html +++ b/docs/elements.html @@ -182,6 +182,9 @@ <a href="utilities.html#colors">Colors</a> </li> <li class="menu-item"> + <a href="utilities.html#cursors">Cursors</a> + </li> + <li class="menu-item"> <a href="utilities.html#display">Display</a> </li> <li class="menu-item"> diff --git a/docs/experimentals.html b/docs/experimentals.html index d3be726..1a34fe8 100644 --- a/docs/experimentals.html +++ b/docs/experimentals.html @@ -183,6 +183,9 @@ <a href="utilities.html#colors">Colors</a> </li> <li class="menu-item"> + <a href="utilities.html#cursors">Cursors</a> + </li> + <li class="menu-item"> <a href="utilities.html#display">Display</a> </li> <li class="menu-item"> diff --git a/docs/getting-started.html b/docs/getting-started.html index cbe0e3d..e7ae157 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -182,6 +182,9 @@ <a href="utilities.html#colors">Colors</a> </li> <li class="menu-item"> + <a href="utilities.html#cursors">Cursors</a> + </li> + <li class="menu-item"> <a href="utilities.html#display">Display</a> </li> <li class="menu-item"> diff --git a/docs/layout.html b/docs/layout.html index 2a54575..ed964ef 100644 --- a/docs/layout.html +++ b/docs/layout.html @@ -182,6 +182,9 @@ <a href="utilities.html#colors">Colors</a> </li> <li class="menu-item"> + <a href="utilities.html#cursors">Cursors</a> + </li> + <li class="menu-item"> <a href="utilities.html#display">Display</a> </li> <li class="menu-item"> diff --git a/docs/utilities.html b/docs/utilities.html index 77022bb..5c45ae6 100644 --- a/docs/utilities.html +++ b/docs/utilities.html @@ -329,9 +329,9 @@ </div> <div id="cursors" class="container"> - <h3 class="s-title"><a href="#cursors" class="anchor" aria-hidden="true">#</a>Cursors utilities</h3> + <h3 class="s-title"><a href="#cursors" class="anchor" aria-hidden="true">#</a>Cursor utilities</h3> <div class="docs-note"> - <p>Cursors utilities specify which mouse cursor to display when mouseover.</p> + <p>Cursor utilities specify which mouse cursor to display when mouseover.</p> </div> <div class="columns"> <div class="column"> diff --git a/src/_autocomplete.scss b/src/_autocomplete.scss index f3544fc..0101493 100644 --- a/src/_autocomplete.scss +++ b/src/_autocomplete.scss @@ -11,8 +11,8 @@ padding: $unit-h; &.is-focused { - border-color: $primary-color; @include control-shadow(); + border-color: $primary-color; } .form-input { diff --git a/src/_buttons.scss b/src/_buttons.scss index a8232f5..0c9540d 100644 --- a/src/_buttons.scss +++ b/src/_buttons.scss @@ -1,11 +1,11 @@ // Buttons .btn { + @include control-transition(); appearance: none; background: $bg-color-light; border: $border-width solid $primary-color; border-radius: $border-radius; color: $primary-color; - @include control-transition(); cursor: pointer; display: inline-block; font-size: $font-size; diff --git a/src/_calendars.scss b/src/_calendars.scss index bfa8739..05606dd 100644 --- a/src/_calendars.scss +++ b/src/_calendars.scss @@ -45,12 +45,12 @@ padding: $unit-1; .date-item { + @include control-transition(); appearance: none; background: transparent; border: $border-width solid transparent; border-radius: 50%; color: $gray-color-dark; - @include control-transition(); cursor: pointer; height: $unit-7; line-height: $unit-5; diff --git a/src/_cards.scss b/src/_cards.scss index bb82579..3ecdc0a 100644 --- a/src/_cards.scss +++ b/src/_cards.scss @@ -36,4 +36,4 @@ } } } -}
\ No newline at end of file +} diff --git a/src/_codes.scss b/src/_codes.scss index 753fdad..3d2cc10 100644 --- a/src/_codes.scss +++ b/src/_codes.scss @@ -1,8 +1,8 @@ // Codes code { - font-size: .65rem; @include label-base(); @include label-variant($code-color, lighten($code-color, 33%)); + font-size: .65rem; } .code { diff --git a/src/_forms.scss b/src/_forms.scss index b407d3c..58e958b 100644 --- a/src/_forms.scss +++ b/src/_forms.scss @@ -31,13 +31,13 @@ legend { // Form element: Input .form-input { + @include control-transition(); appearance: none; background: $bg-color-light; background-image: none; border: $border-width solid $border-color-dark; border-radius: $border-radius; color: $body-font-color; - @include control-transition(); display: block; font-size: $font-size; height: $control-size; @@ -48,8 +48,8 @@ legend { position: relative; width: 100%; &:focus { - border-color: $primary-color; @include control-shadow(); + border-color: $primary-color; } &::placeholder { color: $gray-color; @@ -129,8 +129,8 @@ textarea.form-input { padding-right: $control-icon-size + $control-padding-h; } &:focus { - border-color: $primary-color; @include control-shadow(); + border-color: $primary-color; } &::-ms-expand { display: none; @@ -202,8 +202,8 @@ textarea.form-input { position: absolute; width: 1px; &:focus + .form-icon { - border-color: $primary-color; @include control-shadow(); + border-color: $primary-color; } &:checked + .form-icon { background: $primary-color; @@ -212,8 +212,8 @@ textarea.form-input { } .form-icon { - border: $border-width solid $border-color-dark; @include control-transition(); + border: $border-width solid $border-color-dark; cursor: pointer; display: inline-block; position: absolute; @@ -312,6 +312,7 @@ textarea.form-input { top: ($control-size-sm - $unit-4) / 2 - $border-width; width: $unit-8; &::before { + @include control-transition(); background: $bg-color-light; border-radius: $unit-2; content: ""; @@ -320,7 +321,6 @@ textarea.form-input { left: 0; position: absolute; top: 0; - @include control-transition(); width: $unit-4; } } @@ -436,8 +436,8 @@ textarea.form-input { } &:focus + .form-icon { - border-color: $error-color; @include control-shadow($error-color); + border-color: $error-color; } } } diff --git a/src/_labels.scss b/src/_labels.scss index 629e350..271c6f0 100644 --- a/src/_labels.scss +++ b/src/_labels.scss @@ -1,8 +1,8 @@ // Labels .label { - display: inline-block; @include label-base(); @include label-variant(lighten($body-font-color, 5%), $bg-color); + display: inline-block; &.label-rounded { border-radius: 5rem; diff --git a/src/_media.scss b/src/_media.scss index 68c5934..9b6aa1d 100644 --- a/src/_media.scss +++ b/src/_media.scss @@ -67,4 +67,4 @@ color: $gray-color-dark; margin-top: $layout-spacing; } -}
\ No newline at end of file +} diff --git a/src/_menus.scss b/src/_menus.scss index 234e4bb..bec6afc 100644 --- a/src/_menus.scss +++ b/src/_menus.scss @@ -1,12 +1,12 @@ // Menus .menu { + @include shadow-variant(.05rem); background: $bg-color-light; border-radius: $border-radius; list-style: none; margin: 0; min-width: $control-min-width; padding: $unit-2; - @include shadow-variant(.05rem); transform: translateY($layout-spacing-sm); z-index: $zindex-1; diff --git a/src/_mixins.scss b/src/_mixins.scss index d98411a..93788d2 100644 --- a/src/_mixins.scss +++ b/src/_mixins.scss @@ -183,4 +183,4 @@ @mixin toast-variant($color: $dark-color) { background: rgba($color, .9); border-color: $color; -}
\ No newline at end of file +} diff --git a/src/_modals.scss b/src/_modals.scss index daf7cab..21d6ed8 100644 --- a/src/_modals.scss +++ b/src/_modals.scss @@ -44,11 +44,11 @@ } .modal-container { + @include shadow-variant(.2rem); background: $bg-color-light; border-radius: $border-radius; display: block; padding: 0; - @include shadow-variant(.2rem); text-align: left; .modal-header { diff --git a/src/_parallax.scss b/src/_parallax.scss index 00897bf..0a737a8 100644 --- a/src/_parallax.scss +++ b/src/_parallax.scss @@ -20,8 +20,8 @@ $parallax-scale: .95; width: auto; .parallax-content { - height: auto; @include shadow-variant(1rem); + height: auto; transform: perspective($parallax-perspective); transform-style: preserve-3d; transition: all .4s ease; diff --git a/src/_popovers.scss b/src/_popovers.scss index eee2fc9..6a9a2e5 100644 --- a/src/_popovers.scss +++ b/src/_popovers.scss @@ -64,7 +64,7 @@ } .card { - border: 0; @include shadow-variant(.2rem); + border: 0; } } diff --git a/src/_tiles.scss b/src/_tiles.scss index 384d150..742bbae 100644 --- a/src/_tiles.scss +++ b/src/_tiles.scss @@ -31,8 +31,8 @@ .tile-title, .tile-subtitle { - margin-bottom: 0; @include text-ellipsis(); + margin-bottom: 0; } } } diff --git a/src/_toasts.scss b/src/_toasts.scss index f113e1d..937361c 100644 --- a/src/_toasts.scss +++ b/src/_toasts.scss @@ -1,11 +1,11 @@ // Toasts .toast { + @include toast-variant($dark-color); border: $border-width solid $dark-color; border-radius: $border-radius; color: $light-color; display: block; padding: $layout-spacing; - @include toast-variant($dark-color); width: 100%; &.toast-primary { diff --git a/src/_typography.scss b/src/_typography.scss index 76191f0..17b7f7c 100644 --- a/src/_typography.scss +++ b/src/_typography.scss @@ -65,14 +65,14 @@ abbr[title] { } kbd { - font-size: .65rem; @include label-base(); @include label-variant($light-color, $dark-color); + font-size: .65rem; } mark { - border-radius: $border-radius; @include label-variant($body-font-color, $highlight-color); + border-radius: $border-radius; padding: .05rem; } diff --git a/src/_utilities.scss b/src/_utilities.scss index 10b7b00..49846ff 100644 --- a/src/_utilities.scss +++ b/src/_utilities.scss @@ -5,4 +5,4 @@ @import 'utilities/loading'; @import 'utilities/position'; @import 'utilities/shapes'; -@import 'utilities/text';
\ No newline at end of file +@import 'utilities/text'; diff --git a/src/_variables.scss b/src/_variables.scss index b4349e4..15f2903 100644 --- a/src/_variables.scss +++ b/src/_variables.scss @@ -100,4 +100,4 @@ $zindex-0: 1; $zindex-1: 100; $zindex-2: 200; $zindex-3: 300; -$zindex-4: 400;
\ No newline at end of file +$zindex-4: 400; diff --git a/src/spectre.scss b/src/spectre.scss index 6d33550..2942147 100644 --- a/src/spectre.scss +++ b/src/spectre.scss @@ -1,5 +1,4 @@ /*! Spectre.css | MIT License | github.com/picturepan2/spectre */ - // Core variables and mixins @import "variables"; @import "mixins"; diff --git a/src/utilities/_colors.scss b/src/utilities/_colors.scss index 767c353..eced5ad 100644 --- a/src/utilities/_colors.scss +++ b/src/utilities/_colors.scss @@ -26,4 +26,4 @@ @include bg-color-variant(".bg-warning", $warning-color); -@include bg-color-variant(".bg-error", $error-color);
\ No newline at end of file +@include bg-color-variant(".bg-error", $error-color); diff --git a/src/utilities/_cursors.scss b/src/utilities/_cursors.scss index a50ae09..bfc4c6b 100644 --- a/src/utilities/_cursors.scss +++ b/src/utilities/_cursors.scss @@ -2,18 +2,23 @@ .c-hand { cursor: pointer; } + .c-move { cursor: move; } + .c-zoom-in { cursor: zoom-in; } + .c-zoom-out { cursor: zoom-out; } + .c-not-allowed { cursor: not-allowed; } + .c-auto { cursor: auto; -}
\ No newline at end of file +} diff --git a/src/utilities/_display.scss b/src/utilities/_display.scss index 8297e95..c6248e0 100644 --- a/src/utilities/_display.scss +++ b/src/utilities/_display.scss @@ -41,4 +41,4 @@ padding: 0; position: absolute; width: 1px; -}
\ No newline at end of file +} diff --git a/src/utilities/_loading.scss b/src/utilities/_loading.scss index c0cdb1e..1b4ea60 100644 --- a/src/utilities/_loading.scss +++ b/src/utilities/_loading.scss @@ -26,9 +26,9 @@ min-height: $unit-10; &::after { height: $unit-8; - width: $unit-8; margin-left: -$unit-4; margin-top: -$unit-4; + width: $unit-8; } } -}
\ No newline at end of file +} diff --git a/src/utilities/_position.scss b/src/utilities/_position.scss index 548368f..1f4c5e8 100644 --- a/src/utilities/_position.scss +++ b/src/utilities/_position.scss @@ -2,9 +2,11 @@ .clearfix { @include clearfix(); } + .float-left { float: left !important; } + .float-right { float: right !important; } @@ -12,12 +14,15 @@ .relative { position: relative; } + .absolute { position: absolute; } + .fixed { position: fixed; } + .centered { display: block; float: none; @@ -27,9 +32,13 @@ // 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 + +@include padding-variant(2, $unit-2); diff --git a/src/utilities/_shapes.scss b/src/utilities/_shapes.scss index ab6585b..c11d5df 100644 --- a/src/utilities/_shapes.scss +++ b/src/utilities/_shapes.scss @@ -2,6 +2,7 @@ .rounded { border-radius: $border-radius; } + .circle { border-radius: 50%; } diff --git a/src/utilities/_text.scss b/src/utilities/_text.scss index a1e0980..67793ac 100644 --- a/src/utilities/_text.scss +++ b/src/utilities/_text.scss @@ -1,48 +1,62 @@ // Text +// Text alignment utilities .text-left { text-align: left; } + .text-right { text-align: right; } + .text-center { text-align: center; } + .text-justify { text-align: justify; } +// Text transform utilities .text-lowercase { text-transform: lowercase; } + .text-uppercase { text-transform: uppercase; } + .text-capitalize { text-transform: capitalize; } +// Text style utilities .text-normal { font-weight: normal; } + .text-bold { font-weight: bold; } + .text-italic { font-style: italic; } + .text-large { font-size: 1.2em; } +// Text overflow utilities .text-ellipsis { @include text-ellipsis(); } + .text-clip { overflow: hidden; text-overflow: clip; white-space: nowrap; } + .text-break { hyphens: auto; word-break: break-word; |