From ca643624dec1d53460967106dd5edaf4e5e08781 Mon Sep 17 00:00:00 2001 From: Fred Gomez Date: Fri, 10 Apr 2020 16:28:34 +0200 Subject: [PATCH 001/164] WIP --- README.md | 8 +-- public/index.html | 2 +- src/App.vue | 10 ++- src/components/Cards.vue | 2 +- src/components/Example.vue | 41 +++++++----- src/components/Header.vue | 67 ++++++++++++++++++++ src/scss/_badges.scss | 23 +++---- src/scss/_bullets.scss | 18 +++--- src/scss/_buttons.scss | 18 +++--- src/scss/_buttons_variants.scss | 20 +++--- src/scss/_cards.scss | 17 ++++- src/scss/_dark.scss | 34 ++++++++++ src/scss/_forms.scss | 43 +++++++------ src/scss/_labels.scss | 28 ++++----- src/scss/_list_group.scss | 28 ++++++--- src/scss/_pagination.scss | 4 +- src/scss/_scaffoldings.scss | 47 +++++++++++++- src/scss/_slider.scss | 8 +-- src/scss/_tables.scss | 10 +-- src/scss/_types.scss | 57 +++++++++++------ src/scss/_variables.scss | 108 ++++++++++++++++++++------------ src/scss/index.scss | 1 + 22 files changed, 418 insertions(+), 176 deletions(-) create mode 100644 src/components/Header.vue create mode 100644 src/scss/_dark.scss diff --git a/README.md b/README.md index 84f6f97..692d788 100644 --- a/README.md +++ b/README.md @@ -49,13 +49,13 @@ Your `_variables.scss` file may looks like: ```scss // Colors $gray-700: hsl(210, 10%, 30%); -$brand-primary: #8d1760; -$brand-secondary: #ffa7e7; +$primary: #8d1760; +$secondary: #ffa7e7; // Text $text-color: #54424a; $link-color: #00c9b1; -$text-muted: lighten($text-color, 30%); +$muted: lighten($text-color, 30%); // Fonts $font-weight-base: 400; @@ -64,7 +64,7 @@ $font-size-small: 85%; $line-height-base: 1.5; // Buttons -$button-primary-color: $brand-primary; +$button-primary-color: $primary; // Component commons $component-border-radius: 4px; diff --git a/public/index.html b/public/index.html index 47bbe51..52ada57 100644 --- a/public/index.html +++ b/public/index.html @@ -3,7 +3,7 @@ - + cube-scss-components diff --git a/src/App.vue b/src/App.vue index ea3a6e5..dd7297a 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,6 +1,7 @@ @@ -66,7 +79,7 @@ $example-padding: 16px !default; $example-border-color: $component-border-color !default; $example-border-radius: $component-border-radius !default; $example-preview-bg-color: rgba($gray-300, 0.1) !default; -$example-preview-dark-bg-color: $gray-700 !default; +$example-preview-dark-bg-color: $dark-body-bg-color !default; $example-preview-bg-square-size: 10px !default; $example-code-bg-color: $gray-070 !default; @@ -80,6 +93,7 @@ $code-attr-val-color: $red; border-radius: $example-border-radius; overflow: hidden; position: relative; + color: var(--text-color, #{$text-color}); &-preview-scroll { .example-preview { overflow: scroll; @@ -131,10 +145,9 @@ $code-attr-val-color: $red; &-code { padding: $example-padding; background-color: $example-code-bg-color; - /deep/ - .code { + /deep/ .code { &-tag { - color: $code-tag-color; + color: $code-tag-color; } &-attr { color: $code-attr-color; @@ -144,11 +157,11 @@ $code-attr-val-color: $red; } } } - &-dark { - .example-preview { - color: white; - background-color: $example-preview-dark-bg-color; - } +} +.dark-color-scheme { + .example-preview { + // color: white; + background-color: $example-preview-dark-bg-color; } } diff --git a/src/components/Header.vue b/src/components/Header.vue new file mode 100644 index 0000000..943da37 --- /dev/null +++ b/src/components/Header.vue @@ -0,0 +1,67 @@ + + + + + diff --git a/src/scss/_badges.scss b/src/scss/_badges.scss index 702eb89..9d4cbd3 100644 --- a/src/scss/_badges.scss +++ b/src/scss/_badges.scss @@ -1,17 +1,17 @@ $badge-size: 24px !default; -$badge-font-size: $font-size-sm !default; +$badge-font-size: $font-size-xs !default; $badge-font-weight: $font-weight-base !default; $badge-border-radius: 50% !default; -$badge-color: $text-color !default; -$badge-bg-color: mix(rgba($text-color,.35), white) !default; -$badge-success-bg-color: $brand-success !default; -$badge-success-color: white !default; -$badge-info-bg-color: $brand-info !default; -$badge-info-color: white !default; -$badge-warning-bg-color: $brand-warning !default; -$badge-warning-color: white !default; -$badge-danger-bg-color: $brand-danger !default; -$badge-danger-color: white !default; +$badge-color: $white !default; +$badge-bg-color: $gray-300 !default; +$badge-success-bg-color: $success !default; +$badge-success-color: $white !default; +$badge-info-bg-color: $info !default; +$badge-info-color: $white !default; +$badge-warning-bg-color: $warning !default; +$badge-warning-color: $white !default; +$badge-danger-bg-color: $danger !default; +$badge-danger-color: $white !default; .badge { display: inline-block; @@ -19,6 +19,7 @@ $badge-danger-color: white !default; height: $badge-size; line-height: $badge-size; text-align: center; + vertical-align: bottom; border-radius: $badge-border-radius; background-color: $badge-bg-color; color: $badge-color; diff --git a/src/scss/_bullets.scss b/src/scss/_bullets.scss index 270a8b1..e1142ee 100644 --- a/src/scss/_bullets.scss +++ b/src/scss/_bullets.scss @@ -1,9 +1,9 @@ $bullet-size: 10px !default; -$bullet-color: mix(rgba($text-color,.6), white) !default; -$bullet-success-color: $brand-success !default; -$bullet-info-color: $brand-info !default; -$bullet-warning-color: $brand-warning !default; -$bullet-danger-color: $brand-danger !default; +$bullet-color: var(--bullet-color, $gray-300) !default; +$bullet-success-color: $success !default; +$bullet-info-color: $info !default; +$bullet-warning-color: $warning !default; +$bullet-danger-color: $danger !default; .bullet { display: inline-block; @@ -12,15 +12,15 @@ $bullet-danger-color: $brand-danger !default; background-color: $bullet-color; border-radius: 50%; &-success { - background-color: $brand-success; + background-color: $success; } &-info { - background-color: $brand-info; + background-color: $info; } &-warning { - background-color: $brand-warning; + background-color: $warning; } &-danger { - background-color: $brand-danger; + background-color: $danger; } } diff --git a/src/scss/_buttons.scss b/src/scss/_buttons.scss index 0cef0ff..175e3aa 100644 --- a/src/scss/_buttons.scss +++ b/src/scss/_buttons.scss @@ -10,14 +10,14 @@ $button-min-width: 160px !default; $button-transition: all 100ms ease !default; // button colors -$button-primary-color: $brand-primary !default; -$button-primary-color-default: rgba($brand-primary, .05) !default; -$button-primary-color-hover: rgba($brand-primary, .15) !default; -$button-primary-color-active: rgba($brand-primary, .2) !default; -$button-success-color: $brand-success !default; -$button-info-color: $brand-info !default; -$button-warning-color: $brand-warning !default; -$button-danger-color: $brand-danger !default; +$button-primary-color: $primary !default; +$button-primary-color-default: rgba($primary, .05) !default; +$button-primary-color-hover: rgba($primary, .15) !default; +$button-primary-color-active: rgba($primary, .2) !default; +$button-success-color: $success !default; +$button-info-color: $info !default; +$button-warning-color: $warning !default; +$button-danger-color: $danger !default; // button-list $button-list-gap: 4px !default; @@ -28,7 +28,7 @@ $button-outline-bg-color: transparent !default; $button-outline-padding: $button-padding !default; // button-filled -$button-filled-color: white !default; +$button-filled-color: $white !default; $button-filled-bg-color: $button-primary-color !default; $button-filled-disabled-color: lighten(grayscale($button-filled-color), 25%) !default; $button-filled-disabled-bg-color: lighten(grayscale($button-filled-bg-color), 25%) !default; diff --git a/src/scss/_buttons_variants.scss b/src/scss/_buttons_variants.scss index c8b4a4f..b307081 100644 --- a/src/scss/_buttons_variants.scss +++ b/src/scss/_buttons_variants.scss @@ -1,32 +1,32 @@ .button { &-white { - color: white; - background-color: rgba(white,.05); + color: $white; + background-color: rgba($white,.05); &:hover:not(:disabled), &:focus:not(:disabled) { - background-color: rgba(white,.1); + background-color: rgba($white,.1); } &.active:not(:disabled), &:active:not(:disabled) { - background-color: rgba(white,.2); + background-color: rgba($white,.2); } &:disabled { - color: white; + color: $white; } &.button-outline { - color: white; - border-color: white; + color: $white; + border-color: $white; } &.button-filled { color: $button-primary-color; - background-color: white; + background-color: $white; &:hover:not(:disabled), &:focus:not(:disabled) { - background-color: rgba(white, .8); + background-color: rgba($white, .8); } &.active:not(:disabled), &:active:not(:disabled) { - background-color: rgba(white, .7); + background-color: rgba($white, .7); } &:disabled { color: grayscale($button-primary-color); diff --git a/src/scss/_cards.scss b/src/scss/_cards.scss index 5830757..b1f53ff 100644 --- a/src/scss/_cards.scss +++ b/src/scss/_cards.scss @@ -1,6 +1,7 @@ $card-border-radius: $component-border-radius !default; $card-border-size: $component-border-size !default; $card-border-color: $component-border-color !default; +$card-text-color: var(--card-text-color, #{$text-color}) !default; $card-bg-color: $component-bg-color !default; $card-padding: $component-padding !default; $card-list-gap: 10px !default; @@ -10,7 +11,7 @@ $card-list-gap: 10px !default; flex-direction: column; border-radius: $card-border-radius; border: $card-border-size solid $card-border-color; - color: $text-color; + color: $card-text-color; list-style: none; padding: 0; margin: 0; @@ -37,7 +38,12 @@ $card-list-gap: 10px !default; right: 0; bottom: 0; left: 0; - h1, h2, h3, h4, h5, h6 { + h1, + h2, + h3, + h4, + h5, + h6 { margin: 0; } } @@ -46,7 +52,12 @@ $card-list-gap: 10px !default; background-color: $card-bg-color; padding: $card-padding; flex-grow: 1; - h1, h2, h3, h4, h5, h6 { + h1, + h2, + h3, + h4, + h5, + h6 { margin: 0; } } diff --git a/src/scss/_dark.scss b/src/scss/_dark.scss new file mode 100644 index 0000000..68af92d --- /dev/null +++ b/src/scss/_dark.scss @@ -0,0 +1,34 @@ +$dark-body-color: $white !default; +$dark-body-bg-color: #373838 !default; +$dark-text-color: $white !default; +$dark-text-muted: rgba($dark-text-color, 0.4) !default; + +@mixin light-color-scheme { + --body-color: initial; + --body-background-color: initial; + --text-color: initial; + --text-muted: initial; + --code-block-color: initial; +} + +@mixin dark-color-scheme { + --body-color: #{$dark-body-color}; + --body-background-color: #{$dark-body-bg-color}; + --text-color: #{$dark-text-color}; + --text-muted: #{$dark-text-muted}; + --code-block-color: #{$gray-200}; +} + +.dark-color-scheme { + @include dark-color-scheme; +} + +.light-color-scheme { + @include light-color-scheme; +} + +@media (prefers-color-scheme: dark) { + :root { + @include dark-color-scheme; + } +} diff --git a/src/scss/_forms.scss b/src/scss/_forms.scss index 1974295..85d7aea 100644 --- a/src/scss/_forms.scss +++ b/src/scss/_forms.scss @@ -1,9 +1,9 @@ -$form-control-color: $text-color !default; +$form-control-color: var(--form-control-color, #{$text-color}) !default; $form-control-border-color: $component-border-color !default; $form-control-border-radius: $component-border-radius-sm !default; $form-control-bg-color: $component-bg-color !default; $form-control-muted-color: $text-muted !default; -$form-control-danger-color: $text-danger !default; +$form-control-danger-color: $danger !default; $form-control-padding: $component-padding !default; $form-control-font-size: $font-size-base !default; $form-control-font-family: $font-family-base !default; @@ -11,10 +11,12 @@ $form-control-font-weight: $font-weight-base !default; $form-control-ouline: $component-outline !default; $form-label-font-weight: $font-weight-bold !default; $form-label-line-height: 2.25em !default; -$form-switch-active-color: $form-control-color !default; +$form-switch-active-color: $primary !default; $form-switch-size: $font-size-base * 1.125 !default; $form-switch-inner-padding: 2px !default; +$form-control-focus-border-color: $primary !default; + .form { &-group { min-width: 0; // override user-agent stylesheet in webkit for fieldset @@ -35,7 +37,7 @@ $form-switch-inner-padding: 2px !default; line-height: $form-label-line-height; } &-control { - transition: all .2s; + transition: all 0.2s; outline: none; appearance: none; box-shadow: none; @@ -52,7 +54,8 @@ $form-switch-inner-padding: 2px !default; font-weight: $form-control-font-weight; color: $form-control-color; &:focus:not(:disabled):not(:not(select):read-only) { - box-shadow: $form-control-ouline; + border-color: $form-control-focus-border-color; + // box-shadow: $form-control-ouline; } &:read-only:not(select):not(div):not([type="checkbox"]):not([type="radio"]) { cursor: default; @@ -62,16 +65,19 @@ $form-switch-inner-padding: 2px !default; &:disabled { cursor: not-allowed; color: $form-control-muted-color; - opacity: .6; /* Safari already does this */ + opacity: 0.6; /* Safari already does this */ } - &::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ + &::placeholder { + /* Chrome, Firefox, Opera, Safari 10.1+ */ color: $form-control-muted-color; opacity: 1; /* Firefox */ } - &:-ms-input-placeholder { /* Internet Explorer 10-11 */ + &:-ms-input-placeholder { + /* Internet Explorer 10-11 */ color: $form-control-muted-color; } - &::-ms-input-placeholder { /* Microsoft Edge */ + &::-ms-input-placeholder { + /* Microsoft Edge */ color: $form-control-muted-color; } &.has-error, @@ -100,16 +106,16 @@ input::-webkit-credit-card-auto-fill-button { background-color: $form-control-color; } &:active { - background-color: rgba($form-control-color, .75); + background-color: rgba($form-control-color, 0.75); } } // Input number -input[type=number].form-control { +input[type="number"].form-control { -moz-appearance: textfield; } -input[type=number].form-control::-webkit-inner-spin-button, -input[type=number].form-control::-webkit-outer-spin-button { +input[type="number"].form-control::-webkit-inner-spin-button, +input[type="number"].form-control::-webkit-outer-spin-button { appearance: none; margin: 0; } @@ -129,12 +135,13 @@ select.form-control { background-color: $form-control-bg-color; background-size: 1.3em; background-image: url('data:image/svg+xml;utf8,'); - &:invalid { // Simulate placeholder + &:invalid { + // Simulate placeholder color: $form-control-muted-color; } &:-moz-focusring { color: transparent !important; - text-shadow: 0 0 0 $text-color !important; + text-shadow: 0 0 0 $form-control-color !important; } } @@ -163,7 +170,7 @@ input[type="radio"].form-control { } &:hover { &::before { - background-color: rgba($form-switch-active-color, .125); + background-color: rgba($form-switch-active-color, 0.125); } } &:checked { @@ -183,7 +190,7 @@ input[type="radio"].form-control { & + .form-text { display: inline-block; font-weight: $form-control-font-weight; - padding-left: .5rem; + padding-left: 0.5rem; vertical-align: middle; line-height: $line-height-base; max-width: calc(100% - #{$form-switch-size}); @@ -210,7 +217,7 @@ input[type="radio"].form-control { input[type="checkbox"].form-control:not(:disabled):not(:read-only):not(:checked), input[type="radio"].form-control:not(:disabled):not(:read-only):not(:checked) { &::before { - background-color: rgba($form-switch-active-color, .125); + background-color: rgba($form-switch-active-color, 0.125); } } } diff --git a/src/scss/_labels.scss b/src/scss/_labels.scss index 1725c3e..7627939 100644 --- a/src/scss/_labels.scss +++ b/src/scss/_labels.scss @@ -1,20 +1,20 @@ $label-padding: 3px 6px !default; $label-border-radius: $component-border-radius-sm !default; -$label-font-size: $font-size-base * .75 !default; -$label-font-size-sm: $font-size-base * .625 !default; -$label-font-size-xs: $font-size-base * .5 !default; -$label-font-weight: 500 !default; +$label-font-size: $font-size-base * 0.75 !default; +$label-font-size-sm: $font-size-base * 0.625 !default; +$label-font-size-xs: $font-size-base * 0.5 !default; +$label-font-weight: $font-weight-medium !default; $label-text-transform: uppercase !default; $label-color: $text-color !default; -$label-bg-color: mix(rgba($label-color,.35), white) !default; -$label-success-color: $brand-success !default; -$label-success-bg-color: rgba($label-success-color, .15) !default; -$label-info-color: $brand-info !default; -$label-info-bg-color: rgba($label-info-color, .15) !default; -$label-warning-color: $brand-warning !default; -$label-warning-bg-color: rgba($label-warning-color, .15) !default; -$label-danger-color: $brand-danger !default; -$label-danger-bg-color: rgba($label-danger-color, .15) !default; +$label-bg-color: rgba($text-color, 0.15) !default; +$label-success-color: $success !default; +$label-success-bg-color: rgba($label-success-color, 0.15) !default; +$label-info-color: $info !default; +$label-info-bg-color: rgba($label-info-color, 0.15) !default; +$label-warning-color: $warning !default; +$label-warning-bg-color: rgba($label-warning-color, 0.15) !default; +$label-danger-color: $danger !default; +$label-danger-bg-color: rgba($label-danger-color, 0.15) !default; .label { display: inline; @@ -28,7 +28,7 @@ $label-danger-bg-color: rgba($label-danger-color, .15) !default; text-transform: $label-text-transform; white-space: nowrap; & + .label { - margin-left: .4em; + margin-left: 0.4em; } &-sm { font-size: $label-font-size-sm; diff --git a/src/scss/_list_group.scss b/src/scss/_list_group.scss index d3ab94b..a547d67 100644 --- a/src/scss/_list_group.scss +++ b/src/scss/_list_group.scss @@ -1,5 +1,7 @@ $list-group-padding: $component-padding !default; $list-group-margin: 0 !default; + +$list-group-color: var(--list-group-color, #{$text-color}) !default; $list-group-border-color: $component-border-color !default; $list-group-border-size: $component-border-size !default; $list-group-border-radius: $component-border-radius !default; @@ -7,7 +9,7 @@ $list-group-bg-color: $component-bg-color !default; $list-group-subheader-color: $text-muted !default; $list-group-subheader-padding: ($component-padding-y * 2) $component-padding-x $component-padding-y $component-padding-x !default; -$list-group-subheader-font-size: .75em !default; +$list-group-subheader-font-size: 0.75em !default; $list-group-accessory-color: $text-muted !default; $list-group-action-font-size: 11px !default; @@ -20,12 +22,12 @@ $list-group-footer-font-size: $font-size-sm; margin: $list-group-margin; padding: 0; position: relative; + color: $list-group-color; &-item { list-style: none; margin: 0; padding: 0; display: block; - color: $text-color; border: $list-group-border-size solid $list-group-border-color; background-color: $list-group-bg-color; overflow: hidden; @@ -72,7 +74,12 @@ $list-group-footer-font-size: $font-size-sm; display: flex; align-items: center; margin: $list-group-padding; - h1, h2, h3, h4, h5, h6 { + h1, + h2, + h3, + h4, + h5, + h6 { margin-top: 0; margin-bottom: 0; } @@ -83,7 +90,12 @@ $list-group-footer-font-size: $font-size-sm; margin: $list-group-subheader-padding; color: $list-group-subheader-color; font-size: $list-group-subheader-font-size; - h1, h2, h3, h4, h5, h6 { + h1, + h2, + h3, + h4, + h5, + h6 { font-size: inherit; margin-top: 0; margin-bottom: 0; @@ -120,7 +132,7 @@ $list-group-footer-font-size: $font-size-sm; transition: all 250ms ease; } &:first-child { - margin-right: .75em; + margin-right: 0.75em; } &:last-child { margin-left: auto; @@ -129,14 +141,14 @@ $list-group-footer-font-size: $font-size-sm; button.action { cursor: pointer; &:hover:not(:disabled) { - color: $text-color; + color: inherit; text-decoration: none; } &:active:not(:disabled) { - color: lighten($text-color, 50%); + opacity: 0.8; } &:disabled { - opacity: .5; + opacity: 0.5; cursor: not-allowed; } } diff --git a/src/scss/_pagination.scss b/src/scss/_pagination.scss index 4d52343..1821e5b 100644 --- a/src/scss/_pagination.scss +++ b/src/scss/_pagination.scss @@ -2,11 +2,11 @@ $pagination-bg: $component-bg-color !default; $pagination-border-color: $component-border-color !default; $pagination-border-width: 1px !default; $pagination-border-radius: $component-border-radius !default; -$pagination-color: $text-color !default; +$pagination-color: var(--pagination-color, #{$text-color}) !default; $pagination-color-disabled: $text-muted !default; $pagination-hover-bg: darken($component-bg-color,5%) !default; $pagination-hover-border-color: darken($component-border-color,5%) !default; -$pagination-hover-color: $text-color !default; +$pagination-hover-color: var(--pagination-hover-color, #{$text-color}) !default; $pagination-focus-bg: $pagination-hover-bg !default; $pagination-focus-border-color: $pagination-hover-border-color !default; $pagination-focus-color: $pagination-hover-color !default; diff --git a/src/scss/_scaffoldings.scss b/src/scss/_scaffoldings.scss index c2bc0f5..f7cefb4 100644 --- a/src/scss/_scaffoldings.scss +++ b/src/scss/_scaffoldings.scss @@ -1,4 +1,10 @@ -html, body { +$body-color: var(--body-color, #{$black}) !default; +$body-background-color: var(--body-background-color, #{$white}) !default; +$tap-highlight-color: var(--tap-highlight-color, #{rgba($primary, 0.05)}) !default; +$container-breakpoint: $breakpoint-lg !default; +$z-index-fixed: 1000 !default; + +body { margin: 0; padding: 0; height: 100%; @@ -6,14 +12,18 @@ html, body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -ms-overflow-style: -ms-autohiding-scrollbar; - -webkit-tap-highlight-color: rgba($brand-primary, .05); + -webkit-tap-highlight-color: $tap-highlight-color; -ms-overflow-style: -ms-autohiding-scrollbar; + color: var(--body-color, #{$body-color}); + background-color: var(--body-background-color, #{$body-background-color}); } *, *::before, *::after { + color: var(--text-color, #{$text-color}); box-sizing: border-box; + transition: all 100ms ease; } hr { @@ -24,3 +34,36 @@ hr { border: 0 none; margin: 0 auto; } + +.section { + width: 100%; +} + +.container { + width: 100%; + max-width: $container-breakpoint; +} + +.content { + +} +.fixed-top { + position: fixed; + z-index: $z-index-fixed; + top: 0; + left: 0; + right: 0; + padding-top: env(safe-area-inset-top); + padding-right: env(safe-area-inset-right); + padding-left: env(safe-area-inset-left); +} +.fixed-bottom { + position: fixed; + z-index: $z-index-fixed; + bottom: 0; + left: 0; + right: 0; + padding-right: env(safe-area-inset-right); + padding-bottom: env(safe-area-inset-bottom); + padding-left: env(safe-area-inset-left); +} diff --git a/src/scss/_slider.scss b/src/scss/_slider.scss index 1950bf1..cff1a25 100644 --- a/src/scss/_slider.scss +++ b/src/scss/_slider.scss @@ -4,7 +4,7 @@ $slider-track-border: 0 none !default; $slider-track-border-radius: $slider-track-height/2 !default; $slider-thumb-width: 35px !default; $slider-thumb-height: 35px !default; -$slider-thumb-background-color: $text-color !default; +$slider-thumb-background-color: $primary !default; $slider-thumb-border: 0 none !default; $slider-thumb-border-radius: 50% !default; $slider-thumb-outline: $component-outline !default; @@ -21,7 +21,7 @@ $slider-thumb-outline: $component-outline !default; /** * Track */ - &::-webkit-slider-runnable-track { + &::-webkit-slider-runnable-track { width: 100%; height: $slider-track-height; cursor: pointer; @@ -95,10 +95,10 @@ $slider-thumb-outline: $component-outline !default; &:active { outline: inherit; &::-webkit-slider-thumb { - transform: scale(.95); + transform: scale(0.95); } &::-moz-range-thumb { - transform: scale(.95); + transform: scale(0.95); } } } diff --git a/src/scss/_tables.scss b/src/scss/_tables.scss index 509e1bc..7bf0409 100644 --- a/src/scss/_tables.scss +++ b/src/scss/_tables.scss @@ -1,8 +1,9 @@ -$table-cell-padding-vertical: .3rem !default; -$table-cell-padding-horizontal: .6rem !default; +$table-color: var(--text-color, #{$text-color}) !default; +$table-cell-padding-vertical: 0.3rem !default; +$table-cell-padding-horizontal: 0.6rem !default; $table-cell-padding: $table-cell-padding-vertical $table-cell-padding-horizontal !default; -$table-cell-hover-bg-color: rgba($gray-100, .5) !default; -$table-cell-striped-bg-color: rgba($gray-070, .5) !default; +$table-cell-hover-bg-color: rgba($gray-100, 0.5) !default; +$table-cell-striped-bg-color: rgba($gray-070, 0.5) !default; $table-border-size: $component-border-size !default; $table-border-color: $component-border-color !default; $table-border-radius: $component-border-radius !default; @@ -10,6 +11,7 @@ $table-border-radius: $component-border-radius !default; .table { border-collapse: collapse; width: 100%; + color: $table-color; > thead { > tr { > th { diff --git a/src/scss/_types.scss b/src/scss/_types.scss index cb9efb8..bd775bb 100644 --- a/src/scss/_types.scss +++ b/src/scss/_types.scss @@ -1,8 +1,17 @@ // Colors -$text-color: rgba(black, .9) !default; +$text-color: $gray-900 !default; +$text-muted: rgba($text-color, 0.4) !default; +$text-success: $success !default; +$text-info: $info !default; +$text-warning: $warning !default; +$text-danger: $danger !default; +$link-color: $blue !default; +$code-color: $red !default; +$code-block-color: $gray-800 !default; // Font families -$font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default; +$font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, + "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default; $font-family-code: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; $font-family-headings: $font-family-base !default; $font-family-h1: $font-family-headings !default; @@ -15,11 +24,11 @@ $font-variant-numeric: normal !default; // Font sizes $font-size-base: 1em !default; -$font-size-sm: $font-size-base * .875 !default; -$font-size-xs: $font-size-base * .625 !default; +$font-size-sm: $font-size-base * 0.875 !default; +$font-size-xs: $font-size-base * 0.625 !default; $font-size-lead: 120% !default; -$font-size-code: $font-size-base * .875 !default; -$font-size-code-block: $font-size-base * .75 !default; +$font-size-code: $font-size-base * 0.875 !default; +$font-size-code-block: $font-size-base * 0.75 !default; $font-size-h1: $font-size-base * 3 !default; $font-size-h2: $font-size-base * 2 !default; $font-size-h3: $font-size-base * 1.5 !default; @@ -50,21 +59,27 @@ $paragraph-margin-bottom: 1em !default; $headings-margin-top: 1em !default; $headings-margin-bottom: 1em !default; -html, body { +body { + color: var(--text-color, #{$text-color}); font-family: $font-family-base; - color: $text-color; - line-height: $line-height-base; font-size: $font-size-base; font-weight: $font-weight-base; font-variant-numeric: $font-variant-numeric; + line-height: $line-height-base; } -h1, h2, h3, h4, h5, h6 { +h1, +h2, +h3, +h4, +h5, +h6 { font-family: $font-family-headings; line-height: $line-height-headings; font-weight: $font-weight-headings; margin: $headings-margin-top 0 $headings-margin-bottom 0; padding: 0; - small, .small { + small, + .small { font-size: 75%; font-weight: $font-weight-base; } @@ -123,19 +138,19 @@ blockquote { appearance: none; display: block; white-space: pre-line; - margin: .2em 0; - padding: .2em .6em; + margin: 0.2em 0; + padding: 0.2em 0.6em; border-left: 3px solid $text-muted; } code { font-size: $font-size-code; word-break: break-word; font-family: $font-family-code; - color: $red; + color: $code-color; &.code-block { display: block; font-size: $font-size-code-block; - color: $gray-800; + color: $code-block-color; white-space: pre-wrap; } } @@ -146,15 +161,17 @@ pre { padding: 0; white-space: pre-line; } -small, .small { +small, +.small { font-size: $font-size-sm; } -strong, b { +strong, +b { font-weight: $font-weight-bold; } mark { - padding: .2em .6em; - background-color: $brand-warning; + padding: 0.2em 0.6em; + background-color: $warning; } abbr { text-decoration: underline dotted; @@ -162,7 +179,7 @@ abbr { cursor: help; } .text-muted { - color: $text-muted; + color: var(--text-muted, #{$text-muted}); } .text-success { color: $text-success; diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index c06c99b..22e1ea9 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -1,49 +1,65 @@ // Colors -$navy: #1a004f !default; -$blue: #2c00ca !default; +$navy: #1a004f !default; +$blue: #157efb !default; $indigo: #738cff !default; $purple: #6f42c1 !default; -$pink: #e83e8c !default; -$red: #ff405e !default; +$pink: #e83e8c !default; +$red: #ff405e !default; $orange: #fd7e14 !default; $yellow: #f2d30c !default; -$green: #28a745 !default; -$teal: #20c997 !default; -$cyan: #17a2b8 !default; +$green: #28a745 !default; +$teal: #20c997 !default; +$cyan: #17a2b8 !default; // Grays -$gray-020: hsl(210, 10%, 98%) !default; -$gray-050: hsl(210, 10%, 95%) !default; -$gray-070: hsl(210, 10%, 93%) !default; -$gray-100: hsl(210, 10%, 90%) !default; -$gray-200: hsl(210, 10%, 80%) !default; -$gray-300: hsl(210, 10%, 70%) !default; -$gray-400: hsl(210, 10%, 60%) !default; -$gray-500: hsl(210, 10%, 50%) !default; -$gray-600: hsl(210, 10%, 40%) !default; -$gray-700: hsl(210, 10%, 30%) !default; -$gray-800: hsl(210, 10%, 20%) !default; -$gray-900: hsl(210, 10%, 10%) !default; +$white: hsl(210, 10%, 100%) !default; +$gray-020: hsl(210, 10%, 98%) !default; +$gray-050: hsl(210, 10%, 95%) !default; +$gray-070: hsl(210, 10%, 93%) !default; +$gray-100: hsl(210, 10%, 90%) !default; +$gray-200: hsl(210, 10%, 80%) !default; +$gray-300: hsl(210, 10%, 70%) !default; +$gray-400: hsl(210, 10%, 60%) !default; +$gray-500: hsl(210, 10%, 50%) !default; +$gray-600: hsl(210, 10%, 40%) !default; +$gray-700: hsl(210, 10%, 30%) !default; +$gray-800: hsl(210, 10%, 20%) !default; +$gray-900: hsl(210, 10%, 10%) !default; +$black: hsl(210, 10%, 0%) !default; // Brand colors -$brand-primary: $blue !default; -$brand-secondary: $yellow !default; -$brand-success: $teal !default; -$brand-info: $indigo !default; -$brand-warning: $yellow !default; -$brand-danger: $red !default; +$primary: $blue !default; +$secondary: $yellow !default; +$success: $teal !default; +$info: $indigo !default; +$warning: $yellow !default; +$danger: $red !default; -// Text -$text-color: rgba(black, .9) !default; -$text-muted: mix(rgba($text-color, .8), white) !default; -$text-success: $brand-success !default; -$text-info: $brand-info !default; -$text-warning: $brand-warning !default; -$text-danger: $brand-danger !default; -$link-color: $red !default; +// Text colors +$text-color: $gray-900 !default; +$text-muted: rgba($text-color, 0.4) !default; +$text-success: $success !default; +$text-info: $info !default; +$text-warning: $warning !default; +$text-danger: $danger !default; +$link-color: $blue !default; +$code-color: $red !default; +$code-block-color: $gray-800 !default; + +// Dark colors +$dark-body-color: $white !default; +$dark-body-bg-color: #373838 !default; +$dark-text-color: $white !default; +$dark-text-muted: rgba($dark-text-color, 0.4) !default; + +// Body colors +$body-color: $text-color !default; +$body-background-color: $white !default; +$tap-highlight-color: rgba($primary, 0.05) !default; // Font families -$font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default; +$font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, + "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default; $font-family-code: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; $font-family-headings: $font-family-base !default; $font-family-h1: $font-family-headings !default; @@ -56,11 +72,11 @@ $font-variant-numeric: normal !default; // Font sizes $font-size-base: 1em !default; -$font-size-sm: $font-size-base * .875 !default; -$font-size-xs: $font-size-base * .625 !default; +$font-size-sm: $font-size-base * 0.875 !default; +$font-size-xs: $font-size-base * 0.625 !default; $font-size-lead: 120% !default; -$font-size-code: $font-size-base * .875 !default; -$font-size-code-block: $font-size-base * .75 !default; +$font-size-code: $font-size-base * 0.875 !default; +$font-size-code-block: $font-size-base * 0.75 !default; $font-size-h1: $font-size-base * 3 !default; $font-size-h2: $font-size-base * 2 !default; $font-size-h3: $font-size-base * 1.5 !default; @@ -94,7 +110,8 @@ $headings-margin-bottom: 1em !default; // Components $component-border-size: 1px !default; $component-border-color: $gray-100 !default; -$component-bg-color: white !default; +$component-color: $white !default; +$component-bg-color: $white !default; $component-filter-saturate: 300% !default; $component-filter-blur: 20px !default; $component-backdrop-filter: saturate($component-filter-saturate) blur($component-filter-blur) !default; @@ -104,5 +121,16 @@ $component-padding-y: 12px !default; $component-padding-x: 16px !default; $component-padding: $component-padding-y $component-padding-x !default; $component-box-shadow: 0px 3px 6px -2px $gray-700 !default; -$component-outline-color: rgba(black, .2) !default; +$component-outline-color: rgba($black, 0.2) !default; $component-outline: 0 0 1rem $component-outline-color !default; + +// Z-Indexes +$z-index-fixed: 1000 !default; + +// Breakpoints +$breakpoint-xs: 576px !default; +$breakpoint-sm: 768px !default; +$breakpoint-md: 992px !default; +$breakpoint-lg: 1200px !default; +$breakpoint-xl: 1900px !default; +$container-breakpoint: $breakpoint-lg !default; diff --git a/src/scss/index.scss b/src/scss/index.scss index fb119dd..97ab95d 100644 --- a/src/scss/index.scss +++ b/src/scss/index.scss @@ -5,6 +5,7 @@ @import "buttons"; @import "buttons_variants"; @import "cards"; +@import "dark"; @import "forms"; @import "labels"; @import "list_group"; From 3179a601f63c57639e733a3571c905509f3a2ac2 Mon Sep 17 00:00:00 2001 From: Fred Gomez Date: Sun, 12 Apr 2020 15:32:04 +0200 Subject: [PATCH 002/164] WIP --- public/images/arrow-up-to-line.svg | 1 + src/App.vue | 8 +-- src/components/{Header.vue => AppMenu.vue} | 22 ++++++-- src/components/AppNav.vue | 33 +++++++++++ src/components/Badges.vue | 1 - src/components/Bullets.vue | 1 - src/components/Buttons.vue | 1 - src/components/Cards.vue | 1 - src/components/Documentation.vue | 43 +------------- src/components/Example.vue | 45 ++++++++------- src/components/Forms.vue | 4 -- src/components/Labels.vue | 1 - src/components/ListGroup.vue | 2 - src/components/Pagination.vue | 1 - src/components/Sliders.vue | 1 - src/components/Tables.vue | 1 - src/components/Types.vue | 1 - src/scss/_buttons.scss | 2 +- src/scss/_colors.scss | 36 ++++++++++++ src/scss/_dark.scss | 34 ----------- src/scss/_forms.scss | 2 +- src/scss/_list_group.scss | 18 +++--- src/scss/_scaffoldings.scss | 2 - src/scss/_tables.scss | 3 +- src/scss/_types.scss | 16 +++--- src/scss/_variables.scss | 65 +--------------------- src/scss/color-scheme/_dark.scss | 51 +++++++++++++++++ src/scss/color-scheme/_light.scss | 59 ++++++++++++++++++++ src/scss/index.scss | 1 - 29 files changed, 251 insertions(+), 205 deletions(-) create mode 100644 public/images/arrow-up-to-line.svg rename src/components/{Header.vue => AppMenu.vue} (51%) create mode 100644 src/components/AppNav.vue create mode 100644 src/scss/_colors.scss delete mode 100644 src/scss/_dark.scss create mode 100644 src/scss/color-scheme/_dark.scss create mode 100644 src/scss/color-scheme/_light.scss diff --git a/public/images/arrow-up-to-line.svg b/public/images/arrow-up-to-line.svg new file mode 100644 index 0000000..6e91f6d --- /dev/null +++ b/public/images/arrow-up-to-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/App.vue b/src/App.vue index dd7297a..bddd1d4 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,6 +1,6 @@ + + diff --git a/src/components/AppMenu.vue b/src/components/AppMenu.vue index d58b4d7..0234230 100644 --- a/src/components/AppMenu.vue +++ b/src/components/AppMenu.vue @@ -1,27 +1,61 @@ @@ -109,7 +95,7 @@ $example-border-color: var(--component-border-color, #{$component-border-color}) $example-border-radius: $component-border-radius !default; $example-preview-color: var(--component-color, #{$component-color}) !default; $example-preview-background-color: var(--component-background-color, #{$component-background-color}) !default; -$example-preview-dark-background-color: #373838 !default; +$example-preview-background-color-dark: $component-background-color-dark !default; $example-preview-background-square-size: 10px !default; $example-code-background-color: var(--component-background-color-alt, #{$component-background-color-alt}) !default; @@ -147,6 +133,9 @@ $code-attr-val-color: $red; background-size: $example-preview-background-square-size $example-preview-background-square-size; background-position: 0 0, ($example-preview-background-square-size / 2) ($example-preview-background-square-size / 2); transition: all 250ms ease; + &-background-dark { + background-color: $example-preview-background-color-dark; + } } &-toolbar { border-top: 1px solid $example-border-color; @@ -173,16 +162,4 @@ $code-attr-val-color: $red; } } } -.fade { - &-enter-active { - transition: all 250ms ease; - } - &-leave-active { - transition: all 100ms ease; - } - &-enter, - &-leave-to { - opacity: 0; - } -} diff --git a/src/components/icons/ArrowUpToLine.vue b/src/components/icons/ArrowUpToLine.vue new file mode 100644 index 0000000..c9c6705 --- /dev/null +++ b/src/components/icons/ArrowUpToLine.vue @@ -0,0 +1,5 @@ + diff --git a/src/components/icons/CircleRighthalfFill.vue b/src/components/icons/CircleRighthalfFill.vue new file mode 100644 index 0000000..f654602 --- /dev/null +++ b/src/components/icons/CircleRighthalfFill.vue @@ -0,0 +1,5 @@ + diff --git a/src/services/uiState.js b/src/services/uiState.js new file mode 100644 index 0000000..f2832db --- /dev/null +++ b/src/services/uiState.js @@ -0,0 +1,51 @@ +import Vue from 'vue' + +export const LIGHT = 'light' +export const DARK = 'dark' + +export default new Vue({ + data() { + return { + systemColorScheme: null, + userColorScheme: null + } + }, + computed: { + colorScheme() { + return this.userColorScheme === null ? this.systemColorScheme : this.userColorScheme + } + }, + methods: { + /** + * Update state.systemColorScheme on matchMedia matches + * @param {MediaQueryListEvent} event + */ + onMatchMedia(event) { + this.systemColorScheme = this.convertMatchMediaMatches(event.matches) + }, + /** + * Converts the matchMedia matches value + * @param {boolean} matches + */ + convertMatchMediaMatches(matches) { + return matches ? DARK : LIGHT + }, + cycleUserColorScheme() { + if (this.userColorScheme === null) { + this.userColorScheme = DARK + } else if (this.userColorScheme === DARK) { + this.userColorScheme = LIGHT + } else if (this.userColorScheme === LIGHT) { + this.userColorScheme = null + } + } + }, + created() { + this.matchMedia = window.matchMedia(`(prefers-color-scheme: ${DARK})`) + this.matchMedia.addEventListener ? this.matchMedia.addEventListener('change', this.onMatchMedia) : this.matchMedia.addListener(this.onMatchMedia) + this.systemColorScheme = this.convertMatchMediaMatches(this.matchMedia.matches) + }, + beforeDestroy() { + this.matchMedia.addEventListener ? this.matchMedia.removeEventListener('change', this.onMatchMedia) : this.matchMedia.removeListener(this.onMatchMedia) + } +}) From 63e40e4a5ce0a951c923dc8f4bb6c7aef1881e7e Mon Sep 17 00:00:00 2001 From: Fred Gomez Date: Wed, 20 May 2020 16:22:36 +0200 Subject: [PATCH 076/164] Removes Example previewScroll prop (always scroll) --- src/components/Buttons.vue | 2 +- src/components/Example.vue | 8 ++------ src/components/Pagination.vue | 2 +- 3 files changed, 4 insertions(+), 8 deletions(-) diff --git a/src/components/Buttons.vue b/src/components/Buttons.vue index 1ee2a60..7525ac9 100644 --- a/src/components/Buttons.vue +++ b/src/components/Buttons.vue @@ -63,7 +63,7 @@

Button group

- +
diff --git a/src/components/Example.vue b/src/components/Example.vue index b76f2d4..c9fbf57 100644 --- a/src/components/Example.vue +++ b/src/components/Example.vue @@ -110,12 +110,6 @@ $code-attr-val-color: $red; overflow: hidden; position: relative; color: $example-color; - &-preview-scroll { - .example-preview { - overflow: scroll; - -webkit-overflow-scrolling: touch; - } - } &-dark-toggle { position: absolute; top: 0; @@ -126,6 +120,8 @@ $code-attr-val-color: $red; transition: all 250ms ease; } &-preview { + overflow: scroll; + -webkit-overflow-scrolling: touch; padding: $example-padding; color: $example-preview-color; background-color: $example-preview-background-color; diff --git a/src/components/Pagination.vue b/src/components/Pagination.vue index 034bb8d..a2b34ec 100644 --- a/src/components/Pagination.vue +++ b/src/components/Pagination.vue @@ -1,7 +1,7 @@