maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor sass themeable style (#2762) [ci skip]

Browse source
This commit is contained in:
Alireza Zekavat Fetrat 2019-05-08 18:48:48 +04:30 • committed by Mac Siri
parent d730e8cb9a
commit c7b0c1c023
3 changed files with 97 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
app/assets/stylesheets/credits.scss
View file

@ -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;

8
app/assets/stylesheets/sidebar-data.scss
View file

@ -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;
}

71
app/assets/stylesheets/sticky-nav.scss
View file

@ -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;