From c9ea3a86c2105fe620308b68afca1726731c1050 Mon Sep 17 00:00:00 2001 From: Phreshhh Date: Tue, 29 Jan 2019 14:58:36 +0100 Subject: [PATCH 01/52] Navbar fix for FireFox --- docs/content/docs/components/navbar.md | 58 +++++++++++--------------- package.json | 2 +- src/components/_navbar.scss | 11 ++++- 3 files changed, 34 insertions(+), 37 deletions(-) diff --git a/docs/content/docs/components/navbar.md b/docs/content/docs/components/navbar.md index af015d5..9064667 100644 --- a/docs/content/docs/components/navbar.md +++ b/docs/content/docs/components/navbar.md @@ -9,13 +9,11 @@ description: PaperCSS Navbar
- +
- +
  • Documentation
    • @@ -60,13 +56,11 @@ Add ```.fixed``` to ```
- +
+
+
+
  • Documentation
    • @@ -86,13 +80,11 @@ Add ```.fixed``` to ```
- +
  • Documentation
    • @@ -112,13 +104,11 @@ Add ```.fixed``` to ```
- +
  • Documentation
    • diff --git a/package.json b/package.json index 04d7aa2..33a0ba3 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "build": "node node_modules/gulp/bin/gulp.js build", "test": "echo \"Error: no test specified\" && exit 1", "postinstall": "gulp postinstall", - "stylelint": "node_modules/stylelint/bin/stylelint.js 'src/**/*.scss'" + "stylelint": "node node_modules/stylelint/bin/stylelint.js 'src/**/*.scss'" }, "repository": { "type": "git", diff --git a/src/components/_navbar.scss b/src/components/_navbar.scss index 8af7535..5d7f7b4 100644 --- a/src/components/_navbar.scss +++ b/src/components/_navbar.scss @@ -23,7 +23,7 @@ nav { width: 2rem; } - .collapsible input[id^=collapsible]:checked + button { + .collapsible input[id^=collapsible]:checked + label { .bar1 { transform: rotate(-45deg) translate(-9px, 7px); } @@ -107,6 +107,13 @@ nav { } } + .collapsible { + @include resp(small) { + width: 100%; + margin-top: 50px; + } + } + .collapsible input[id^=collapsible]:checked ~ div.collapsible-body { margin: 0; max-height: 960px; @@ -132,7 +139,7 @@ nav { padding: 0; } - .collapsible > button { + .collapsible > label { background-color: $main-background; display: none; font-size: 0.5rem; From 6bc209efd83d5158f951cdac4cf25fd90d16b67c Mon Sep 17 00:00:00 2001 From: Phreshhh Date: Tue, 29 Jan 2019 15:10:44 +0100 Subject: [PATCH 02/52] margin-top stylelint fix --- src/components/_navbar.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/_navbar.scss b/src/components/_navbar.scss index 5d7f7b4..76b1f60 100644 --- a/src/components/_navbar.scss +++ b/src/components/_navbar.scss @@ -109,8 +109,8 @@ nav { .collapsible { @include resp(small) { - width: 100%; margin-top: 50px; + width: 100%; } } From 72ac948f704465eab23e2690f0d9c20d29b4fd84 Mon Sep 17 00:00:00 2001 From: Phreshhh Date: Tue, 29 Jan 2019 15:39:08 +0100 Subject: [PATCH 03/52] margin-top removed --- src/components/_navbar.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/_navbar.scss b/src/components/_navbar.scss index 76b1f60..fc8746a 100644 --- a/src/components/_navbar.scss +++ b/src/components/_navbar.scss @@ -109,7 +109,6 @@ nav { .collapsible { @include resp(small) { - margin-top: 50px; width: 100%; } } From fad66597ceef693114ec96d98452eab0b28d2e3c Mon Sep 17 00:00:00 2001 From: Phreshhh Date: Tue, 29 Jan 2019 16:21:23 +0100 Subject: [PATCH 04/52] burger borderfix --- src/components/_navbar.scss | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/_navbar.scss b/src/components/_navbar.scss index fc8746a..f015594 100644 --- a/src/components/_navbar.scss +++ b/src/components/_navbar.scss @@ -134,8 +134,11 @@ nav { } .collapsible label { - border-bottom: 0; - padding: 0; + border: 2px solid #41403e; + border-bottom-left-radius: 15px 255px; + border-bottom-right-radius: 225px 15px; + border-top-left-radius: 255px 15px; + border-top-right-radius: 15px 225px; } .collapsible > label { From 70b2a1422f4a854fa5bc69fa2a6487f1e1bab4d5 Mon Sep 17 00:00:00 2001 From: Phreshhh Date: Wed, 30 Jan 2019 12:36:11 +0100 Subject: [PATCH 05/52] Outline buttons --- docs/content/docs/components/buttons.md | 18 ++++++++++++++++++ package.json | 2 +- src/components/_buttons.scss | 22 +++++++++++++++++++++- src/core/_config.scss | 7 +++++++ 4 files changed, 47 insertions(+), 2 deletions(-) diff --git a/docs/content/docs/components/buttons.md b/docs/content/docs/components/buttons.md index 3a1efe5..8728105 100644 --- a/docs/content/docs/components/buttons.md +++ b/docs/content/docs/components/buttons.md @@ -53,3 +53,21 @@ Inspired by [Imperfect Buttons](https://codepen.io/tmrDevelops/pen/VeRvKX) ``` + +### Outline colors + + + + + +Danger + +#### Code: + +```html + + + + +Danger +``` \ No newline at end of file diff --git a/package.json b/package.json index 04d7aa2..33a0ba3 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "build": "node node_modules/gulp/bin/gulp.js build", "test": "echo \"Error: no test specified\" && exit 1", "postinstall": "gulp postinstall", - "stylelint": "node_modules/stylelint/bin/stylelint.js 'src/**/*.scss'" + "stylelint": "node node_modules/stylelint/bin/stylelint.js 'src/**/*.scss'" }, "repository": { "type": "git", diff --git a/src/components/_buttons.scss b/src/components/_buttons.scss index ca793f2..d68ace0 100644 --- a/src/components/_buttons.scss +++ b/src/components/_buttons.scss @@ -72,7 +72,6 @@ a { } } - @each $colorName, $color, $color-light, $color-text in $colors { .alert-#{$colorName} { background-color: $color-light; @@ -94,3 +93,24 @@ a { } } } + +@each $colorName, $color, $color-light, $color-text in $colors-outline { + button.btn-#{$colorName}, + .paper-btn.btn-#{$colorName}, + [type='button'].btn-#{$colorName} { + background-color: $white; + border-color: darken($color-light, 10%); + color: $color-text; + + &:hover { + border-color: $color; + background-color: $color-light; + } + + &:hover { + &:active { + background-color: darken($color-light, 10%); + } + } + } +} diff --git a/src/core/_config.scss b/src/core/_config.scss index d0d8ebd..a9fc21c 100644 --- a/src/core/_config.scss +++ b/src/core/_config.scss @@ -45,6 +45,13 @@ $colors: (primary, $primary, $primary-light, $primary-text), (warning, $warning, $warning-light, $warning-text), (danger, $danger, $danger-light, $danger-text), (muted, $muted, $muted-light, $muted-text); + +$colors-outline: (primary-outline, $primary, $primary-light, $primary), + (secondary-outline, $secondary, $secondary-light, $secondary-text), + (success-outline, $success, $success-light, $success-text), + (warning-outline, $warning, $warning-light, $warning-text), + (danger-outline, $danger, $danger-light, $danger-text), + (muted-outline, $muted, $muted-light, $muted-text); /* stylelint-enable */ /** From 01f267fb8cb51028ac60794116da6298725ccd20 Mon Sep 17 00:00:00 2001 From: Phreshhh Date: Wed, 30 Jan 2019 12:49:36 +0100 Subject: [PATCH 06/52] Outline buttons - stylelint fix --- src/components/_buttons.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/_buttons.scss b/src/components/_buttons.scss index d68ace0..814ebfd 100644 --- a/src/components/_buttons.scss +++ b/src/components/_buttons.scss @@ -103,8 +103,8 @@ a { color: $color-text; &:hover { - border-color: $color; background-color: $color-light; + border-color: $color; } &:hover { From a03b8dbc6d5abd745699982715c2799617e856c3 Mon Sep 17 00:00:00 2001 From: Phreshhh Date: Wed, 30 Jan 2019 15:49:57 +0100 Subject: [PATCH 07/52] 'paper-btn' class added to linkbutton example. Sorry I left it 1st time. --- docs/content/docs/components/buttons.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/content/docs/components/buttons.md b/docs/content/docs/components/buttons.md index 8728105..e64c0d9 100644 --- a/docs/content/docs/components/buttons.md +++ b/docs/content/docs/components/buttons.md @@ -60,7 +60,7 @@ Inspired by [Imperfect Buttons](https://codepen.io/tmrDevelops/pen/VeRvKX) -Danger +Danger #### Code: @@ -69,5 +69,5 @@ Inspired by [Imperfect Buttons](https://codepen.io/tmrDevelops/pen/VeRvKX) -Danger +Danger ``` \ No newline at end of file From 44f413b696ccc67fcdc5aa24f67d24cfe47d0621 Mon Sep 17 00:00:00 2001 From: Phreshhh Date: Thu, 31 Jan 2019 19:07:06 +0100 Subject: [PATCH 08/52] Switch components --- docs/content/docs/components/forms.md | 198 +++++++++++++++++++++++ package.json | 2 +- src/components/_forms.scss | 218 ++++++++++++++++++++++++++ 3 files changed, 417 insertions(+), 1 deletion(-) diff --git a/docs/content/docs/components/forms.md b/docs/content/docs/components/forms.md index faa56f1..214fb79 100644 --- a/docs/content/docs/components/forms.md +++ b/docs/content/docs/components/forms.md @@ -64,6 +64,105 @@ description: PaperCSS Forms This is the second check +
    + Some Switch +

    Default - standard outline style (square & circle)

    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    +

    Type2 - inline style (square & circle)

    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    +

    Type3 - tile style (square & circle)

    + + + +
    #### Code: @@ -124,4 +223,103 @@ description: PaperCSS Forms This is the second check +
    + Some Switch +

    Default - standard outline style (square & circle)

    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    +

    Type2 - inline style (square & circle)

    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    +

    Type3 - tile style (square & circle)

    + + + +
    ``` diff --git a/package.json b/package.json index 04d7aa2..33a0ba3 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "build": "node node_modules/gulp/bin/gulp.js build", "test": "echo \"Error: no test specified\" && exit 1", "postinstall": "gulp postinstall", - "stylelint": "node_modules/stylelint/bin/stylelint.js 'src/**/*.scss'" + "stylelint": "node node_modules/stylelint/bin/stylelint.js 'src/**/*.scss'" }, "repository": { "type": "git", diff --git a/src/components/_forms.scss b/src/components/_forms.scss index 0e5887e..902146a 100644 --- a/src/components/_forms.scss +++ b/src/components/_forms.scss @@ -119,6 +119,224 @@ select { } } } + + .paper-switch-label, + .paper-switch-2-label { + float:left; + cursor: pointer; + } + + .paper-switch-label { + margin: -6px 10px 0 0; + } + + .paper-switch-2-label { + margin: 0 10px 0 0; + } + + .paper-switch, + .paper-switch-2 { + float: left; + position: relative; + display: block; + margin: 0 10px 0 0; + + input { + opacity: 0; + width: 0; + height: 0; + + &:checked + .paper-switch-slider { + background-color: #d0dbc2; + } + + &:checked + .paper-switch-slider:before { + -webkit-transform: translateX(26px); + -ms-transform: translateX(26px); + transform: translateX(26px); + } + + &:focus + .paper-switch-slider { + box-shadow: 0 0 1px #2196f3; + } + + } + + .paper-switch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + -webkit-transition: .4s; + transition: .4s; + border: 2px solid $primary; + border-bottom-left-radius: 15px 255px; + border-bottom-right-radius: 225px 15px; + border-top-left-radius: 255px 15px; + border-top-right-radius: 15px 225px; + + &::before { + position: absolute; + content: ''; + left: 4px; + -webkit-transition: .4s; + transition: .4s; + background: $secondary; + border-bottom-left-radius: 15px 255px; + border-bottom-right-radius: 225px 15px; + border-top-left-radius: 255px 15px; + border-top-right-radius: 15px 225px; + } + + } + + .paper-switch-slider.round { + border: 2px solid $primary; + border-bottom-left-radius: .7rem 1rem; + border-bottom-right-radius: 1rem .9rem; + border-top-left-radius: 1rem 1rem; + border-top-right-radius: 1rem .6rem; + + &::before { + left: 4px; + background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20viewBox%3D'0%200%20100%20100'%3E%3Cpath%20fill%3D'%230071de'%20d%3D'M49.346,46.341c-3.79-2.005,3.698-10.294,7.984-8.89%20c8.713,2.852,4.352,20.922-4.901,20.269c-4.684-0.33-12.616-7.405-14.38-11.818c-2.375-5.938,7.208-11.688,11.624-13.837%20c9.078-4.42,18.403-3.503,22.784,6.651c4.049,9.378,6.206,28.09-1.462,36.276c-7.091,7.567-24.673,2.277-32.357-1.079%20c-11.474-5.01-24.54-19.124-21.738-32.758c3.958-19.263,28.856-28.248,46.044-23.244c20.693,6.025,22.012,36.268,16.246,52.826%20c-5.267,15.118-17.03,26.26-33.603,21.938c-11.054-2.883-20.984-10.949-28.809-18.908C9.236,66.096,2.704,57.597,6.01,46.371%20c3.059-10.385,12.719-20.155,20.892-26.604C40.809,8.788,58.615,1.851,75.058,12.031c9.289,5.749,16.787,16.361,18.284,27.262%20c0.643,4.698,0.646,10.775-3.811,13.746'%3E%3C/path%3E%3C/svg%3E") left center no-repeat; + border-bottom-left-radius: .7rem 1rem; + border-bottom-right-radius: 1rem .9rem; + border-top-left-radius: 1rem 1rem; + border-top-right-radius: 1rem .6rem; + } + + } + + } + + .paper-switch { + width: 60px; + height: 12px; + + .paper-switch-slider { + + &::before { + height: 20px; + width: 20px; + bottom: -6px; + } + + } + + .paper-switch-slider.round { + + &::before { + height: 23px; + width: 23px; + bottom: -7px; + } + + } + + } + + .paper-switch-2 { + width: 50px; + height: 22px; + + .paper-switch-slider { + + &::before { + height: 14px; + width: 14px; + bottom: 2px; + } + + } + + .paper-switch-slider.round { + + &::before { + height: 14px; + width: 14px; + bottom: 2px; + } + + } + + } + + .paper-switch-tile { + float: left; + -webkit-perspective: 1000px; + perspective: 1000px; + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; + display: block; + width: 80px; + height: 80px; + position: relative; + margin: 40px 0 0 40px; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + cursor: pointer; + + &:hover { + + .paper-switch-tile-card { + -webkit-transform: rotateX(30deg); + transform: rotateX(30deg); + box-shadow: 2px 8px 4px -5px rgba(0,0,0,.2); + } + + & :checked + .paper-switch-tile-card { + transform: rotateX(150deg); + -webkit-transform: rotateX(150deg); + background-color:transparent; + box-shadow: 0px 10px 15px -15px rgba(0,0,0,.9); + } + + } + + input { + display: none; + + &:checked + .paper-switch-tile-card{ + transform: rotateX(180deg); + -webkit-transform: rotateX(180deg); + } + + } + + } + + .paper-switch-tile-card { + position: relative; + height: 100%; + width: 100%; + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; + -webkit-transition: all 600ms; + transition: all 600ms; + border-color: transparent; + background-color: transparent; + + div { + position: absolute; + height: 100%; + width: 100%; + text-align: center; + line-height: 70px; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + box-shadow: 2px 8px 8px -5px rgba(0,0,0,.3); + } + + .paper-switch-tile-card-back { + -webkit-transform: rotateX(180deg); + transform: rotateX(180deg); + } + + } + } fieldset.form-group { From df8e6b64d35589cf53ace9ccd31a68c41041bdbf Mon Sep 17 00:00:00 2001 From: Phreshhh Date: Thu, 31 Jan 2019 19:44:16 +0100 Subject: [PATCH 09/52] Switch components - stylelint fix 1 :) --- docs/content/docs/components/forms.md | 4 +- src/components/_forms.scss | 69 ++++++++++++--------------- 2 files changed, 32 insertions(+), 41 deletions(-) diff --git a/docs/content/docs/components/forms.md b/docs/content/docs/components/forms.md index 214fb79..dc14505 100644 --- a/docs/content/docs/components/forms.md +++ b/docs/content/docs/components/forms.md @@ -140,7 +140,7 @@ description: PaperCSS Forms
    -

    Type3 - tile style (square & circle)

    +

    Type3 - Tile style

    -

    Type3 - tile style (square & circle)

    +

    Type3 - Tile style

Border primary
@@ -59,7 +59,7 @@ description: PaperCSS Borders & Shadows
Border success
Border warning
Border danger
-
Border white
+
Border white
``` From 4a27b7c0faf8977d0289369192391d3ce5fcec4c Mon Sep 17 00:00:00 2001 From: Seifeldin Mahjoub Date: Wed, 26 Aug 2020 00:39:08 +0200 Subject: [PATCH 36/52] chore : use color mixin in popover --- src/components/_popovers.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/_popovers.scss b/src/components/_popovers.scss index e89bbd1..c37e6b6 100644 --- a/src/components/_popovers.scss +++ b/src/components/_popovers.scss @@ -18,8 +18,9 @@ &::after { @include border-style(); @include transition(opacity); - background: $light-dark; - border: 2px solid $primary; + @include color('background-color', 'light-dark'); + @include color('border-color', 'primary'); + border: 2px solid; color: $white; font-size: 0.7em; left: 50%; From 63bba4d3ffd994c3d644170e99365a0b69dc73ae Mon Sep 17 00:00:00 2001 From: Seifeldin Mahjoub Date: Wed, 26 Aug 2020 00:40:03 +0200 Subject: [PATCH 37/52] chore: use color mixin in buttons --- src/components/_buttons.scss | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/src/components/_buttons.scss b/src/components/_buttons.scss index d6fc28a..cba673f 100644 --- a/src/components/_buttons.scss +++ b/src/components/_buttons.scss @@ -1,3 +1,4 @@ +// here button, .paper-btn, [type='button'] { @@ -45,7 +46,8 @@ button, } &:focus { - border: 2px solid $secondary; + @include color('border-color', 'secondary'); + border: 2px solid; box-shadow: 2px 8px 4px -6px hsla(0, 0%, 0%, 0.3); } @@ -84,18 +86,12 @@ a { } @each $colorName, $color, $color-light, $color-text in $colors { - .alert-#{$colorName} { - background-color: $color-light; - border-color: $color; - color: $color; - } - button.btn-#{$colorName}, .paper-btn.btn-#{$colorName}, [type='button'].btn-#{$colorName} { - background-color: $color-light; - border-color: $color; - color: $color-text; + @include color('color', #{$colorName}-text); + @include color('background-color', #{$colorName}-light); + @include color('border-color', #{$colorName}); &:hover { &:active { From a2fad6ecf9b8ccc2aef5d86fca1ab2d4658d5737 Mon Sep 17 00:00:00 2001 From: Seifeldin Mahjoub Date: Wed, 26 Aug 2020 00:44:43 +0200 Subject: [PATCH 38/52] chore: use color mixin in navbar --- src/components/_navbar.scss | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/_navbar.scss b/src/components/_navbar.scss index 7caace7..d3b83c5 100644 --- a/src/components/_navbar.scss +++ b/src/components/_navbar.scss @@ -13,11 +13,11 @@ nav { .bar1, .bar2, .bar3 { - background-color: $primary; - border-bottom: 5px solid $primary; + @include color('background-color', 'primary'); + @include color('border-color', 'primary'); + @include color('color', 'primary'); border-bottom-left-radius: 15px 5px; border-bottom-right-radius: 15px 3px; - color: $primary; margin: 6px 0; transition: 0.4s; width: 2rem; @@ -81,7 +81,8 @@ nav { } a:hover { - border-bottom: 5px solid $primary-light; + @include color('border-color', 'primary-light'); + border-bottom: 5px solid; } ul.inline li a { From 71194873cc9effa2677bba3df3224de665e32ff6 Mon Sep 17 00:00:00 2001 From: Seifeldin Mahjoub Date: Wed, 26 Aug 2020 00:45:10 +0200 Subject: [PATCH 39/52] chore: use color mixin in progress --- src/components/_progress.scss | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/_progress.scss b/src/components/_progress.scss index d2e4df5..934c09a 100644 --- a/src/components/_progress.scss +++ b/src/components/_progress.scss @@ -1,6 +1,7 @@ .progress { @include border-style(5); - border: 2px solid $primary; + @include color('border-color', 'primary'); + border: 2px solid; box-shadow: $shadow-hover; height: 1.2rem; overflow: hidden; @@ -9,8 +10,9 @@ .bar { @include border-style(5); @include transition; - background-color: $primary-light; - border-right: 2px solid $primary; + @include color('background-color', 'primary-light'); + @include color('border-color', 'primary'); + border-right: 2px solid; display: flex; flex-direction: column; font-size: 0.6rem; @@ -25,7 +27,7 @@ @each $colorName, $color, $color-light in $colors { &.#{$colorName} { - background-color: $color-light; + @include color('background-color', #{$colorName}-light); &.striped { @include striped-background($color-light); From 63c7e1d7956c29ab60e2c5ac89427ab52a2987bb Mon Sep 17 00:00:00 2001 From: Seifeldin Mahjoub Date: Wed, 26 Aug 2020 00:45:40 +0200 Subject: [PATCH 40/52] chore: use color mixin in modals --- src/components/_modals.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/_modals.scss b/src/components/_modals.scss index d901da5..d5269a8 100644 --- a/src/components/_modals.scss +++ b/src/components/_modals.scss @@ -26,10 +26,11 @@ .modal-body { @include color('color', 'primary'); @include color('background', 'main-background'); + @include color('border-color', 'muted-light'); @include transition; backface-visibility: hidden; - border: 2px solid $muted-light; + border: 2px solid; left: 50%; padding: 1.25rem; position: absolute; @@ -86,7 +87,7 @@ } .paper-btn { - background: $white; + @include color('background', 'main-background'); display: inline-block; text-decoration: none; } From 24981e9553d88a5ddf61cd3ca06566be960e4719 Mon Sep 17 00:00:00 2001 From: Seifeldin Mahjoub Date: Wed, 26 Aug 2020 00:46:01 +0200 Subject: [PATCH 41/52] chore: use color mixin in forms --- src/components/_forms.scss | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/components/_forms.scss b/src/components/_forms.scss index f7661da..f1d4d5c 100644 --- a/src/components/_forms.scss +++ b/src/components/_forms.scss @@ -16,7 +16,8 @@ textarea { padding: 0.5rem; &:focus { - border: 2px solid $secondary; + @include color('border-color', 'secondary'); + border: 2px solid; } &.disabled, @@ -78,7 +79,8 @@ select { display: block; &::before { - border: 2px solid $primary; + @include color('border-color', 'primary'); + border: 2px solid; content: ''; display: inline-block; height: 1rem; @@ -149,7 +151,7 @@ select { width: 0; &:checked + .paper-switch-slider { - background-color: $success-light; + @include color('background-color', 'success-light'); } &:checked + .paper-switch-slider::before { @@ -163,7 +165,8 @@ select { } .paper-switch-slider { - border: 2px solid $primary; + @include color('border-color', 'primary'); + border: 2px solid; border-bottom-left-radius: 15px 255px; border-bottom-right-radius: 225px 15px; border-top-left-radius: 255px 15px; @@ -177,7 +180,7 @@ select { transition: 0.4s; &::before { - background: $secondary; + @include color('background', 'secondary'); border-bottom-left-radius: 15px 255px; border-bottom-right-radius: 225px 15px; border-top-left-radius: 255px 15px; @@ -191,7 +194,8 @@ select { } .paper-switch-slider.round { - border: 2px solid $primary; + @include color('border-color', 'primary'); + border: 2px solid; border-bottom-left-radius: 0.7rem 1rem; border-bottom-right-radius: 1rem 0.9rem; border-top-left-radius: 1rem 1rem; From a7c72c9992dd52efbbbdc4bf1a839dc02fd71520 Mon Sep 17 00:00:00 2001 From: Seifeldin Mahjoub Date: Wed, 26 Aug 2020 00:46:29 +0200 Subject: [PATCH 42/52] fix: linting issues --- src/components/_alerts.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/_alerts.scss b/src/components/_alerts.scss index ca6be89..2801119 100644 --- a/src/components/_alerts.scss +++ b/src/components/_alerts.scss @@ -1,9 +1,10 @@ @mixin btn-close-color($base-color-name) { @include color('color', #{$base-color-name}-light-10); + &:hover, &:active, &:focus { - @include color('color', #{$base-color-name}-dark-10) + @include color('color', #{$base-color-name}-dark-10); } } From 36afea4c08419b1b685bbb67910225be2a4bbb8f Mon Sep 17 00:00:00 2001 From: Seifeldin Mahjoub Date: Wed, 26 Aug 2020 00:46:44 +0200 Subject: [PATCH 43/52] chore: use color mixin in cards --- src/components/_cards.scss | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/_cards.scss b/src/components/_cards.scss index 9a5c424..a108b31 100644 --- a/src/components/_cards.scss +++ b/src/components/_cards.scss @@ -1,7 +1,8 @@ .card { @include shadow; + @include color('border-color', 'muted-light'); backface-visibility: hidden; - border: 2px solid $muted-light; + border: 2px solid; display: flex; flex-direction: column; position: relative; @@ -14,16 +15,18 @@ .card-header, .card-footer { - background-color: $white-dark; + @include color('background-color', 'white-dark'); padding: 0.75rem 1.25rem; } .card-header { - border-bottom: 2px solid $muted-light; + @include color('border-color', 'muted-light'); + border-bottom: 2px solid; } .card-footer { - border-top: 2px solid $muted-light; + @include color('border-color', 'muted-light'); + border-top: 2px solid; } .card-body { From 22ce468ea4491433769895c009b77f075d0898c7 Mon Sep 17 00:00:00 2001 From: Seifeldin Mahjoub Date: Wed, 26 Aug 2020 00:47:09 +0200 Subject: [PATCH 44/52] feat: add more color vars --- src/core/_config.scss | 115 ++++++++++++++++++++++++++++++++++++------ 1 file changed, 99 insertions(+), 16 deletions(-) diff --git a/src/core/_config.scss b/src/core/_config.scss index de9e264..a06a93d 100644 --- a/src/core/_config.scss +++ b/src/core/_config.scss @@ -21,7 +21,30 @@ $warning-light: lighten($warning, 30%) !default; $danger-light: lighten($danger, 45%) !default; $muted-light: lighten($muted, 35%) !default; +$primary-dark: darken($primary, 50%) !default; +$secondary-dark: darken($secondary, 50%) !default; +$success-dark: darken($success, 30%) !default; +$warning-dark: darken($warning, 30%) !default; +$danger-dark: darken($danger, 45%) !default; +$muted-dark: darken($muted, 35%) !default; + +$primary-light-10: lighten($primary, 10%) !default; +$secondary-light-10: lighten($secondary, 10%) !default; +$success-light-10: lighten($success, 10%) !default; +$warning-light-10: lighten($warning, 10%) !default; +$danger-light-10: lighten($danger, 10%) !default; +$muted-light-10: lighten($muted, 10%) !default; + +$primary-dark-10: darken($primary, 10%) !default; +$secondary-dark-10: darken($secondary, 10%) !default; +$success-dark-10: darken($success, 10%) !default; +$warning-dark-10: darken($warning, 10%) !default; +$danger-dark-10: darken($danger, 10%) !default; +$muted-dark-10: darken($muted, 10%) !default; + + $white-dark: rgba(#000, 0.03) !default; +$white-dark-light-80: lighten($white-dark, 80%) !default; $light-dark: rgba(#000, 0.7) !default; $white: rgba(#fff, 1) !default; $main-background: rgba(#fff, 1) !default; @@ -41,32 +64,54 @@ $shadow-color-hover: hsla(0, 0, 0%, 0.3) !default; // Set dark theme colors $dark-primary: #fff !default; -$dark-secondary: #339bff !default; +$dark-secondary: #0071de !default; $dark-success: #189418 !default; $dark-warning: #ddcd45 !default; $dark-danger: #ff8c86 !default; $dark-muted: #868e96 !default; -$dark-primary-light: lighten($dark-primary, 50%) !default; -$dark-secondary-light: lighten($dark-secondary, 50%) !default; -$dark-success-light: lighten($dark-success, 30%) !default; -$dark-warning-light: lighten($dark-warning, 30%) !default; -$dark-danger-light: lighten($dark-danger, 45%) !default; -$dark-muted-light: lighten($dark-muted, 35%) !default; +$dark-primary-light: lighten($dark-primary, 5%) !default; +$dark-secondary-light: lighten($dark-secondary, 5%) !default; +$dark-success-light: lighten($dark-success, 5%) !default; +$dark-warning-light: lighten($dark-warning, 5%) !default; +$dark-danger-light: lighten($dark-danger, 5%) !default; +$dark-muted-light: lighten($dark-muted, 5%) !default; -$dark-white-dark: rgba(#000, 0.03) !default; -$dark-light-dark: rgba(#000, 0.7) !default; +$dark-primary-dark: darken($dark-primary, 50%) !default; +$dark-secondary-dark: darken($dark-secondary, 50%) !default; +$dark-success-dark: darken($dark-success, 30%) !default; +$dark-warning-dark: darken($dark-warning, 30%) !default; +$dark-danger-dark: darken($dark-danger, 45%) !default; +$dark-muted-dark: darken($dark-muted, 35%) !default; + +$dark-primary-light-10: lighten($dark-primary, 10%) !default; +$dark-secondary-light-10: lighten($dark-secondary, 10%) !default; +$dark-success-light-10: lighten($dark-success, 10%) !default; +$dark-warning-light-10: lighten($dark-warning, 10%) !default; +$dark-danger-light-10: lighten($dark-danger, 10%) !default; +$dark-muted-light-10: lighten($dark-muted, 10%) !default; + +$dark-primary-dark-10: darken($dark-primary, 10%) !default; +$dark-secondary-dark-10: darken($dark-secondary, 10%) !default; +$dark-success-dark-10: darken($dark-success, 10%) !default; +$dark-warning-dark-10: darken($dark-warning, 10%) !default; +$dark-danger-dark-10: darken($dark-danger, 10%) !default; +$dark-muted-dark-10: darken($dark-muted, 10%) !default; + +$dark-white-dark: rgba(#fff, 0.03) !default; +$dark-white-dark-light-80: lighten($dark-white-dark, 80%) !default; +$dark-light-dark: rgba(#fff, 0.7) !default; $dark-white: rgba(#fff, 1) !default; $dark-main-background: rgba(#41403e, 1) !default; $dark-main-background-light: lighten($dark-main-background, 50%) !default; $dark-primary-text: #41403e !default; -$dark-secondary-text: $dark-secondary !default; -$dark-success-text: $dark-primary !default; -$dark-warning-text: $dark-primary !default; -$dark-danger-text: $dark-primary !default; -$dark-muted-text: $dark-primary !default; +$dark-secondary-text: #41403e !default; +$dark-success-text: #41403e !default; +$dark-warning-text: #41403e !default; +$dark-danger-text: #41403e !default; +$dark-muted-text: #41403e !default; $dark-shadow-color-regular: hsla(0, 0, 0%, 0.2) !default; $dark-shadow-color-hover: hsla(0, 0, 0%, 0.3) !default; @@ -81,13 +126,32 @@ $theme-map: ( warning: $warning, danger: $danger, muted: $muted, - primary-light: #{$primary-light}, + primary-light: $primary-light, secondary-light:$secondary-light, success-light:$success-light, warning-light:$warning-light, danger-light:$danger-light, muted-light:$muted-light, + primary-dark: $primary-dark, + secondary-dark:$secondary-dark, + success-dark:$success-dark, + warning-dark:$warning-dark, + danger-dark:$danger-dark, + muted-dark:$muted-dark, + primary-light-10:$primary-light-10, + secondary-light-10:$secondary-light-10, + success-light-10:$success-light-10, + warning-light-10:$warning-light-10, + danger-light-10:$danger-light-10, + muted-light-10:$muted-light-10, + primary-dark-10:$primary-dark-10, + secondary-dark-10:$secondary-dark-10, + success-dark-10:$success-dark-10, + warning-dark-10:$warning-dark-10, + danger-dark-10:$danger-dark-10, + muted-dark-10:$muted-dark-10, white-dark:$white-dark, + white-dark-light-80:$white-dark-light-80, light-dark:$light-dark, white:$white, main-background: $main-background, @@ -108,13 +172,32 @@ $theme-map: ( warning: $dark-warning, danger: $dark-danger, muted: $dark-muted, - primary-light: #{$dark-primary-light}, + primary-light: $dark-primary-light, secondary-light:$dark-secondary-light, success-light:$dark-success-light, warning-light:$dark-warning-light, danger-light:$dark-danger-light, muted-light:$dark-muted-light, + primary-dark: $dark-primary-dark, + secondary-dark:$dark-secondary-dark, + success-dark:$dark-success-dark, + warning-dark:$dark-warning-dark, + danger-dark:$dark-danger-dark, + muted-dark:$dark-muted-dark, + primary-light-10:$dark-primary-light-10, + secondary-light-10:$dark-secondary-light-10, + success-light-10:$dark-success-light-10, + warning-light-10:$dark-warning-light-10, + danger-light-10:$dark-danger-light-10, + muted-light-10:$dark-muted-light-10, + primary-dark-10:$dark-primary-dark-10, + secondary-dark-10:$dark-secondary-dark-10, + success-dark-10:$dark-success-dark-10, + warning-dark-10:$dark-warning-dark-10, + danger-dark-10:$dark-danger-dark-10, + muted-dark-10:$dark-muted-dark-10, white-dark:$dark-white-dark, + white-dark-light-80:$dark-white-dark-light-80, light-dark:$dark-light-dark, white:$dark-white, main-background: $dark-main-background, From 1198a321b02c040941b795ff607077093f87bbf5 Mon Sep 17 00:00:00 2001 From: Seifeldin Mahjoub Date: Fri, 4 Sep 2020 14:24:40 +0200 Subject: [PATCH 45/52] chore: remove comments --- src/components/_buttons.scss | 1 - src/content/_images.scss | 1 - 2 files changed, 2 deletions(-) diff --git a/src/components/_buttons.scss b/src/components/_buttons.scss index cba673f..1146581 100644 --- a/src/components/_buttons.scss +++ b/src/components/_buttons.scss @@ -1,4 +1,3 @@ -// here button, .paper-btn, [type='button'] { diff --git a/src/content/_images.scss b/src/content/_images.scss index 3ed980d..593d514 100644 --- a/src/content/_images.scss +++ b/src/content/_images.scss @@ -1,4 +1,3 @@ -// here img { @include border-style(); @include color('border-color', 'primary'); From e60492710ef7074959a9b05e16ed52272e22737d Mon Sep 17 00:00:00 2001 From: Seifeldin Mahjoub Date: Sun, 6 Sep 2020 20:22:55 +0200 Subject: [PATCH 46/52] fix: update alerts and badges text --- src/components/_badges.scss | 2 +- src/core/_config.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/_badges.scss b/src/components/_badges.scss index f735355..6c0246a 100644 --- a/src/components/_badges.scss +++ b/src/components/_badges.scss @@ -1,6 +1,6 @@ .badge { @include border-style(); - @include color('color', 'primary-text'); + @include color('color', 'white'); @include color('background-color', 'muted'); @include color('border-color', 'primary'); border: 2px solid; diff --git a/src/core/_config.scss b/src/core/_config.scss index a06a93d..f03673a 100644 --- a/src/core/_config.scss +++ b/src/core/_config.scss @@ -50,7 +50,7 @@ $white: rgba(#fff, 1) !default; $main-background: rgba(#fff, 1) !default; $main-background-light: lighten($main-background, 50%) !default; -$primary-text: #fff !default; +$primary-text: $primary !default; $secondary-text: $primary !default; $success-text: $primary !default; $warning-text: $primary !default; From 2c2edbadfa38101f2ea2f14cbd09632978e2d5d4 Mon Sep 17 00:00:00 2001 From: Seifeldin Mahjoub Date: Sun, 6 Sep 2020 20:28:16 +0200 Subject: [PATCH 47/52] fix: cards border color --- src/components/_cards.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/_cards.scss b/src/components/_cards.scss index a108b31..5e468bf 100644 --- a/src/components/_cards.scss +++ b/src/components/_cards.scss @@ -2,7 +2,8 @@ @include shadow; @include color('border-color', 'muted-light'); backface-visibility: hidden; - border: 2px solid; + border-style: solid; + border-width: 2px; display: flex; flex-direction: column; position: relative; From 496409f2b88e53b47cfac2e2311997a07d3876c9 Mon Sep 17 00:00:00 2001 From: Seifeldin Mahjoub Date: Mon, 7 Sep 2020 00:19:31 +0200 Subject: [PATCH 48/52] fix: code styling --- src/content/_code.scss | 10 +++++----- src/core/_config.scss | 8 ++++++++ 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/src/content/_code.scss b/src/content/_code.scss index e047ce8..fd2c064 100644 --- a/src/content/_code.scss +++ b/src/content/_code.scss @@ -1,13 +1,13 @@ code { @include color('color', 'secondary'); - @include color('background-color', 'primary-light'); + @include color('background-color', 'primary-light-70'); border-radius: 3px; font-size: 80%; padding: 2px 4px; } kbd { - @include color('color', 'primary-text'); + @include color('color', 'white'); @include color('background-color', 'primary'); border-radius: 3px; font-size: 80%; @@ -16,8 +16,8 @@ kbd { pre { @include color('color', 'primary'); - @include color('background-color', 'main-background'); - @include color('border-color', 'main-background-light'); + @include color('background-color', 'primary-light-70'); + @include color('border-color', 'primary-light-50'); border-radius: 3px; border-style: solid; @@ -32,7 +32,7 @@ pre { word-wrap: break-word; code { - @include color('background-color', 'main-background'); + background: transparent; color: inherit; display: block; font-size: inherit; diff --git a/src/core/_config.scss b/src/core/_config.scss index f03673a..f68f465 100644 --- a/src/core/_config.scss +++ b/src/core/_config.scss @@ -29,6 +29,8 @@ $danger-dark: darken($danger, 45%) !default; $muted-dark: darken($muted, 35%) !default; $primary-light-10: lighten($primary, 10%) !default; +$primary-light-70: lighten($primary, 70%) !default; +$primary-light-50: lighten($primary, 50%) !default; $secondary-light-10: lighten($secondary, 10%) !default; $success-light-10: lighten($success, 10%) !default; $warning-light-10: lighten($warning, 10%) !default; @@ -86,6 +88,8 @@ $dark-danger-dark: darken($dark-danger, 45%) !default; $dark-muted-dark: darken($dark-muted, 35%) !default; $dark-primary-light-10: lighten($dark-primary, 10%) !default; +$dark-primary-light-70: lighten($dark-primary, 70%) !default; +$dark-primary-light-50: lighten($dark-primary, 50%) !default; $dark-secondary-light-10: lighten($dark-secondary, 10%) !default; $dark-success-light-10: lighten($dark-success, 10%) !default; $dark-warning-light-10: lighten($dark-warning, 10%) !default; @@ -139,6 +143,8 @@ $theme-map: ( danger-dark:$danger-dark, muted-dark:$muted-dark, primary-light-10:$primary-light-10, + primary-light-50: $primary-light-50, + primary-light-70: $primary-light-70, secondary-light-10:$secondary-light-10, success-light-10:$success-light-10, warning-light-10:$warning-light-10, @@ -185,6 +191,8 @@ $theme-map: ( danger-dark:$dark-danger-dark, muted-dark:$dark-muted-dark, primary-light-10:$dark-primary-light-10, + primary-light-50: $dark-primary-light-50, + primary-light-70: $dark-primary-light-70, secondary-light-10:$dark-secondary-light-10, success-light-10:$dark-success-light-10, warning-light-10:$dark-warning-light-10, From a810ac75515ade98798f0c87b3c6ad1552f84df9 Mon Sep 17 00:00:00 2001 From: Seifeldin Mahjoub Date: Mon, 7 Sep 2020 00:19:52 +0200 Subject: [PATCH 49/52] fix: form focus styles --- src/components/_forms.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/_forms.scss b/src/components/_forms.scss index f1d4d5c..a8ca631 100644 --- a/src/components/_forms.scss +++ b/src/components/_forms.scss @@ -17,7 +17,8 @@ textarea { &:focus { @include color('border-color', 'secondary'); - border: 2px solid; + border-style: solid; + border-width: 2px; } &.disabled, From ac672095359d24eb69b47416fb2a3f23c097518e Mon Sep 17 00:00:00 2001 From: Seifeldin Mahjoub Date: Mon, 7 Sep 2020 02:11:51 +0200 Subject: [PATCH 50/52] fix: border styles --- src/components/_buttons.scss | 17 +++++------------ src/components/_forms.scss | 9 ++++++--- src/components/_navbar.scss | 3 ++- src/components/_popovers.scss | 3 ++- src/utilities/_borders.scss | 6 ++++-- 5 files changed, 19 insertions(+), 19 deletions(-) diff --git a/src/components/_buttons.scss b/src/components/_buttons.scss index 1146581..24b40cd 100644 --- a/src/components/_buttons.scss +++ b/src/components/_buttons.scss @@ -9,7 +9,8 @@ button, @include color('background-color', 'main-background'); align-self: center; background-image: none; - border: 2px solid; + border-style: solid; + border-width: 2px; cursor: pointer; display: inline-block; font-size: 1rem; @@ -46,7 +47,8 @@ button, &:focus { @include color('border-color', 'secondary'); - border: 2px solid; + border-style: solid; + border-width: 2px; box-shadow: 2px 8px 4px -6px hsla(0, 0%, 0%, 0.3); } @@ -63,16 +65,7 @@ button, } a { - @include color('color', 'secondary'); - background-image: linear-gradient ( - 5deg, - transparent 65%, - $secondary 80%, - transparent 90% - ), - linear-gradient(165deg, transparent 5%, $secondary 15%, transparent 25%), - linear-gradient(165deg, transparent 45%, $secondary 55%, transparent 65%), - linear-gradient(15deg, transparent 25%, $secondary 35%, transparent 50%); + background-image: linear-gradient(5deg, transparent 65%, $secondary 80%, transparent 90%), linear-gradient(165deg, transparent 5%, $secondary 15%, transparent 25%), linear-gradient(165deg, transparent 45%, $secondary 55%, transparent 65%), linear-gradient(15deg, transparent 25%, $secondary 35%, transparent 50%); background-position: 0 90%; background-repeat: repeat-x; background-size: 4px 3px; diff --git a/src/components/_forms.scss b/src/components/_forms.scss index a8ca631..1471fc6 100644 --- a/src/components/_forms.scss +++ b/src/components/_forms.scss @@ -81,7 +81,8 @@ select { &::before { @include color('border-color', 'primary'); - border: 2px solid; + border-style: solid; + border-width: 2px; content: ''; display: inline-block; height: 1rem; @@ -167,11 +168,12 @@ select { .paper-switch-slider { @include color('border-color', 'primary'); - border: 2px solid; border-bottom-left-radius: 15px 255px; border-bottom-right-radius: 225px 15px; + border-style: solid; border-top-left-radius: 255px 15px; border-top-right-radius: 15px 225px; + border-width: 2px; bottom: 0; cursor: pointer; left: 0; @@ -196,11 +198,12 @@ select { .paper-switch-slider.round { @include color('border-color', 'primary'); - border: 2px solid; border-bottom-left-radius: 0.7rem 1rem; border-bottom-right-radius: 1rem 0.9rem; + border-style: solid; border-top-left-radius: 1rem 1rem; border-top-right-radius: 1rem 0.6rem; + border-width: 2px; &::before { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20viewBox%3D'0%200%20100%20100'%3E%3Cpath%20fill%3D'%230071de'%20d%3D'M49.346,46.341c-3.79-2.005,3.698-10.294,7.984-8.89%20c8.713,2.852,4.352,20.922-4.901,20.269c-4.684-0.33-12.616-7.405-14.38-11.818c-2.375-5.938,7.208-11.688,11.624-13.837%20c9.078-4.42,18.403-3.503,22.784,6.651c4.049,9.378,6.206,28.09-1.462,36.276c-7.091,7.567-24.673,2.277-32.357-1.079%20c-11.474-5.01-24.54-19.124-21.738-32.758c3.958-19.263,28.856-28.248,46.044-23.244c20.693,6.025,22.012,36.268,16.246,52.826%20c-5.267,15.118-17.03,26.26-33.603,21.938c-11.054-2.883-20.984-10.949-28.809-18.908C9.236,66.096,2.704,57.597,6.01,46.371%20c3.059-10.385,12.719-20.155,20.892-26.604C40.809,8.788,58.615,1.851,75.058,12.031c9.289,5.749,16.787,16.361,18.284,27.262%20c0.643,4.698,0.646,10.775-3.811,13.746'%3E%3C/path%3E%3C/svg%3E") left center no-repeat; diff --git a/src/components/_navbar.scss b/src/components/_navbar.scss index d3b83c5..63cfce3 100644 --- a/src/components/_navbar.scss +++ b/src/components/_navbar.scss @@ -82,7 +82,8 @@ nav { a:hover { @include color('border-color', 'primary-light'); - border-bottom: 5px solid; + border-bottom-style: solid; + border-bottom-width: 5px; } ul.inline li a { diff --git a/src/components/_popovers.scss b/src/components/_popovers.scss index c37e6b6..8e03459 100644 --- a/src/components/_popovers.scss +++ b/src/components/_popovers.scss @@ -20,7 +20,8 @@ @include transition(opacity); @include color('background-color', 'light-dark'); @include color('border-color', 'primary'); - border: 2px solid; + border-style: solid; + border-width: 2px; color: $white; font-size: 0.7em; left: 50%; diff --git a/src/utilities/_borders.scss b/src/utilities/_borders.scss index 430ada0..2acb241 100644 --- a/src/utilities/_borders.scss +++ b/src/utilities/_borders.scss @@ -1,6 +1,7 @@ .border { @include color('border-color','primary' ); - border: 2px solid; + border-style: solid; + border-width: 2px; } .border, @@ -36,7 +37,8 @@ .child-borders>* { @include color('border-color', 'primary'); - border: 2px solid; + border-style: solid; + border-width: 2px; } .border-white { From 493d673f5da325fca4676c20c6ce4cf79297795d Mon Sep 17 00:00:00 2001 From: Seifeldin Mahjoub Date: Mon, 7 Sep 2020 02:26:43 +0200 Subject: [PATCH 51/52] fix: code for dark-theme --- src/content/_code.scss | 6 +++--- src/core/_config.scss | 4 ++++ 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/content/_code.scss b/src/content/_code.scss index fd2c064..c661acd 100644 --- a/src/content/_code.scss +++ b/src/content/_code.scss @@ -7,7 +7,7 @@ code { } kbd { - @include color('color', 'white'); + @include color('color', 'black'); @include color('background-color', 'primary'); border-radius: 3px; font-size: 80%; @@ -15,7 +15,7 @@ kbd { } pre { - @include color('color', 'primary'); + @include color('color', 'black'); @include color('background-color', 'primary-light-70'); @include color('border-color', 'primary-light-50'); @@ -32,8 +32,8 @@ pre { word-wrap: break-word; code { + @include color('color', 'black'); background: transparent; - color: inherit; display: block; font-size: inherit; padding: initial; diff --git a/src/core/_config.scss b/src/core/_config.scss index f68f465..522f6e1 100644 --- a/src/core/_config.scss +++ b/src/core/_config.scss @@ -50,6 +50,7 @@ $white-dark-light-80: lighten($white-dark, 80%) !default; $light-dark: rgba(#000, 0.7) !default; $white: rgba(#fff, 1) !default; $main-background: rgba(#fff, 1) !default; +$black: rgba(#000, 1) !default; $main-background-light: lighten($main-background, 50%) !default; $primary-text: $primary !default; @@ -109,6 +110,7 @@ $dark-light-dark: rgba(#fff, 0.7) !default; $dark-white: rgba(#fff, 1) !default; $dark-main-background: rgba(#41403e, 1) !default; $dark-main-background-light: lighten($dark-main-background, 50%) !default; +$dark-black: rgba(#000, 1) !default; $dark-primary-text: #41403e !default; $dark-secondary-text: #41403e !default; @@ -162,6 +164,7 @@ $theme-map: ( white:$white, main-background: $main-background, main-background-light: $main-background-light, + black: $black, primary-text:$primary-text, secondary-text:$secondary-text, success-text:$success-text, @@ -210,6 +213,7 @@ $theme-map: ( white:$dark-white, main-background: $dark-main-background, main-background-light: $dark-main-background-light, + black: $dark-black, primary-text:$dark-primary-text, secondary-text:$dark-secondary-text, success-text:$dark-success-text, From 6f166e544c5b7f5e54c1f64dfcb044e45fe3c172 Mon Sep 17 00:00:00 2001 From: Seifeldin Mahjoub Date: Mon, 7 Sep 2020 02:27:55 +0200 Subject: [PATCH 52/52] feat: change links color to secondary --- src/components/_buttons.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/_buttons.scss b/src/components/_buttons.scss index 24b40cd..142ea36 100644 --- a/src/components/_buttons.scss +++ b/src/components/_buttons.scss @@ -65,6 +65,7 @@ button, } a { + @include color('color', 'secondary'); background-image: linear-gradient(5deg, transparent 65%, $secondary 80%, transparent 90%), linear-gradient(165deg, transparent 5%, $secondary 15%, transparent 25%), linear-gradient(165deg, transparent 45%, $secondary 55%, transparent 65%), linear-gradient(15deg, transparent 25%, $secondary 35%, transparent 50%); background-position: 0 90%; background-repeat: repeat-x;