From c7b0c1c023eeac7af5c377e9fa7e7604fc2564cc Mon Sep 17 00:00:00 2001 From: Alireza Zekavat Fetrat <50259907+ar-zekavat@users.noreply.github.com> Date: Wed, 8 May 2019 18:48:48 +0430 Subject: [PATCH] Refactor sass themeable style (#2762) [ci skip] --- app/assets/stylesheets/credits.scss | 56 +++++++++++++------ app/assets/stylesheets/sidebar-data.scss | 8 ++- app/assets/stylesheets/sticky-nav.scss | 71 +++++++++++++++++------- 3 files changed, 97 insertions(+), 38 deletions(-) diff --git a/app/assets/stylesheets/credits.scss b/app/assets/stylesheets/credits.scss index beba4e9bc..8a5ea89df 100644 --- a/app/assets/stylesheets/credits.scss +++ b/app/assets/stylesheets/credits.scss @@ -43,10 +43,16 @@ } .InputElement { - background-color: white; - background-color: var(--theme-container-background, white); - color: $black; - color: var(--theme-color, $black); + @include themeable( + background-color, + theme-container-background, + white + ); + @include themeable( + color, + theme-color, + $black + ); } .StripeElement, input[type="number"], button, .existing-card { @@ -55,10 +61,16 @@ padding: 10px 12px; border: 1px solid transparent; border-radius: 4px; - background-color: white; - background-color: var(--theme-container-background, white); - color: $black; - color: var(--theme-color, $black); + @include themeable( + background-color, + theme-container-background, + white + ); + @include themeable( + color, + theme-color, + $black + ); box-shadow: 0 1px 3px 0 #e6ebf1; -webkit-transition: box-shadow 150ms ease; @@ -183,10 +195,16 @@ font-weight: bold; } button#add-new-card { - background-color: $light-gray; - background-color: var(--theme-container-background, $light-gray); - color: $black; - color: var(--theme-color, $black); + @include themeable( + background-color, + theme-container-background, + $light-gray + ); + @include themeable( + color, + theme-color, + $black + ); font-size: 15px; } @@ -202,8 +220,11 @@ padding: 10px 0px; } .credit-card-component { - background: $lightest-gray; - background: var(--theme-container-accent-background, $lightest-gray); + @include themeable( + background, + theme-container-accent-background, + $lightest-gray + ); border-radius: 3px; margin: 0px 5px; display: inline-block; @@ -213,8 +234,11 @@ label.main-form-label { margin-bottom: 4px; - background: $light-gray; - background: var(--theme-container-accent-background, $light-gray); + @include themeable( + background, + theme-container-accent-background, + $light-gray + ); border-radius: 3px; padding: 2px 8px; display: inline-block; diff --git a/app/assets/stylesheets/sidebar-data.scss b/app/assets/stylesheets/sidebar-data.scss index a287ecc84..201a457d6 100644 --- a/app/assets/stylesheets/sidebar-data.scss +++ b/app/assets/stylesheets/sidebar-data.scss @@ -1,4 +1,5 @@ @import 'variables'; +@import 'mixins'; .sidebar-data{ border-radius:3px; @@ -6,7 +7,10 @@ font-weight:bold; padding:1px 12px 1px; margin:3px 1px; - color: $dark-medium-gray; - color: var(--theme-secondary-color, $dark-medium-gray); + @include themeable( + color, + theme-secondary-color, + $dark-medium-gray + ); font-family: $monospace; } \ No newline at end of file diff --git a/app/assets/stylesheets/sticky-nav.scss b/app/assets/stylesheets/sticky-nav.scss index 3cb50557d..f56f5cfcf 100644 --- a/app/assets/stylesheets/sticky-nav.scss +++ b/app/assets/stylesheets/sticky-nav.scss @@ -1,4 +1,5 @@ @import 'variables'; +@import 'mixins'; .primary-sticky-nav { display: none; @@ -16,8 +17,11 @@ } .primary-sticky-nav-author{ a{ - color: $black; - color: var(--theme-container-color, $black); + @include themeable( + color, + theme-container-color, + $black + ); } .primary-sticky-nav-author-top-profile-image{ width: 35px; @@ -36,8 +40,11 @@ } .primary-sticky-nav-author-summary{ font-weight: 400; - color: $medium-gray; - color: var(--theme-secondary-color, $medium-gray); + @include themeable( + color, + theme-secondary-color, + $medium-gray + ); padding: 10px 0px 5px; font-style: italic; font-size:0.88em; @@ -73,8 +80,11 @@ vertical-align: -1px; } a{ - color: $black; - color: var(--theme-container-color, $black); + @include themeable( + color, + theme-container-color, + $black + ); display: inline-block; } } @@ -83,16 +93,28 @@ padding: 10px 13px; font-size:0.9em; font-weight: bold; - background: white; - background: var(--theme-container-background, #fff); + @include themeable( + background, + theme-container-background, + #fff + ); margin-bottom: 10px; margin-left: 10px; - border: 1px solid $outline-color; - border: var(--theme-container-border, 1px solid $outline-color); - box-shadow: $bold-shadow; - box-shadow: var(--theme-container-box-shadow, $bold-shadow); - color: $black; - color: var(--theme-container-color, $black); + @include themeable( + border, + theme-container-border, + 1px solid $outline-color + ); + @include themeable( + box-shadow, + theme-container-box-shadow, + $bold-shadow + ); + @include themeable( + color, + theme-container-color, + $black + ); width: 262px; border-radius: 3px; &.sticky-join-cta{ @@ -117,8 +139,11 @@ .primary-sticky-nav-element-details{ margin-top:9px; font-size: 0.8em; - color: $medium-gray; - color: var(--theme-secondary-color, $medium-gray); + @include themeable( + color, + theme-secondary-color, + $medium-gray + ); } &:hover{ border: 1px solid darken($light-medium-gray, 17%); @@ -138,8 +163,11 @@ font-size: 0.8em; font-weight: 800; margin-bottom: 2px; - color: $medium-gray; - color: var(--theme-secondary-color, $medium-gray); + @include themeable( + color, + theme-secondary-color, + $medium-gray + ); } .value{ display: inline-block; @@ -155,8 +183,11 @@ .primary-sticky-nav-org-summary{ font-weight: 400; - color: $black; - color: var(--theme-container-color, $black); + @include themeable( + color, + theme-container-color, + $black + ); padding: 4px 0px; font-size:0.95em; margin-top: 20px;