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

Refactors SASS themeable style discussed at #2539 (#2735) [ci skip]

Browse source 
* Refactored classified_listings.scss themeable style
This commit is contained in:
Mohammadjavad Raadi 2019-05-07 18:30:48 +04:30 • committed by Mac Siri
parent 879864a9bb
commit 2f3afeb029
1 changed files with 120 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

160
app/assets/stylesheets/classified_listings.scss
View file

@ -59,10 +59,16 @@
position: relative;
input {
font-size: 0.8em;
color: $black;
color: var(--theme-color, $black);
background: $light-gray;
background: var(--theme-container-accent-background, $light-gray);
@include themeable(
color,
theme-color,
$black
);
@include themeable(
background,
theme-container-accent-background,
$light-gray
);
border-radius: 100px;
padding: 3px 14px;
border: 1px solid $light-medium-gray;
@ -119,10 +125,22 @@
margin: 60px auto 0px;
width: 100%;
max-width: 580px;
@include themeable(background, theme-container-background, white);
@include themeable(
background,
theme-container-background,
white
);
box-sizing: border-box;
@include themeable(border, theme-border, 1px solid $light-medium-gray);
box-shadow: var(--theme-container-box-shadow, 2px 2px 8px darken($light-medium-gray, 5%));
@include themeable(
border,
theme-border,
1px solid $light-medium-gray
);
@include themeable(
box-shadow,
theme-container-box-shadow,
2px 2px 8px darken($light-medium-gray, 5%)
);
@media screen and (min-width: 580px) {
border-radius: 8px;
margin: 100px auto 20px;
@ -131,7 +149,11 @@
box-sizing: border-box;
}
header {
@include themeable(background, theme-container-accent-background, #f2f7fc);
@include themeable(
background,
theme-container-accent-background,
#f2f7fc
);
padding: 25px 22px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
@ -150,7 +172,11 @@
}
h2 {
font-size: 1.45em;
@include themeable(color, theme-color, #32325d);
@include themeable(
color,
theme-color,
#32325d
);
margin: 0px;
}
.classified-errors {
@ -173,10 +199,16 @@
padding: 10px 7px;
border-radius: 3px;
border: 1px solid $light-medium-gray;
background: white;
background: var(--theme-container-accent-background, $light-gray);
color: $black;
color: var(--theme-color, $black);
@include themeable(
background,
theme-container-accent-background,
$light-gray
);
@include themeable(
color,
theme-color,
$black
);
&[type="checkbox"] {
width: 100px;
}
@ -187,10 +219,16 @@
padding: 5px;
font-size: 17px;
border-radius: 3px;
background: $light-gray;
background: var(--theme-container-accent-background, $light-gray);
color: $black;
color: var(--theme-color, $black);
@include themeable(
background,
theme-container-accent-background,
$light-gray
);
@include themeable(
color,
theme-color,
$black
);
border: 1px solid $light-medium-gray;
}
select {
@ -201,8 +239,11 @@
cursor: pointer;
font-size: 0.8em;
padding: 8px 0px;
color: $medium-gray;
color: var(--theme-secondary-color, $medium-gray);
@include themeable(
color,
theme-secondary-color,
$medium-gray
);
}
input[type="submit"] {
border: 0px;
@ -218,8 +259,11 @@
max-width: 90%;
margin: 35px auto;
display: block;
box-shadow: 2px 2px 4px darken($light-medium-gray, 5%);
box-shadow: var(--theme-container-box-shadow, 2px 2px 8px darken($light-medium-gray, 5%));
@include themeable(
box-shadow,
theme-container-box-shadow,
2px 2px 8px darken($light-medium-gray, 5%)
);
}
.listings-current-credits {
position: fixed;
@ -240,7 +284,11 @@
a {
text-decoration: underline;
display: inline-block;
@include themeable(color, theme-anchor-color, $bold-blue);
@include themeable(
color,
theme-anchor-color,
$bold-blue
);
}
@media screen and (min-width: 580px) {
font-size: 1.1em;
@ -251,7 +299,11 @@
}
p {
font-size: 0.8em;
color: var(--theme-secondary-color, $medium-gray);
@include themeable(
color,
theme-secondary-color,
$medium-gray
);
}
}
}
@ -266,16 +318,26 @@
padding: 5px;
font-size: 17px;
border-radius: 3px;
background: white;
@include themeable(
background,
theme-container-background,
white
);
margin-top: 10px;
background: var(--theme-container-background, white);
color: $black;
color: var(--theme-color, $black);
@include themeable(
color,
theme-color,
$black
);
border: 1px solid $light-medium-gray;
}
.listingform__tagsoptions {
@include themeable(border, theme-border, 1px solid $light-medium-gray);
@include themeable(
border,
theme-border,
1px solid $light-medium-gray
);
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
@ -318,13 +380,19 @@
text-overflow: ellipsis;
font-size: 0.9em;
break-inside: avoid;
background: white;
background: var(--theme-container-background, white);
@include themeable(
background,
theme-container-background,
white
);
h3 {
margin: 0px;
padding: 9px 15px;
background: lighten($light-medium-gray, 8%);
background: var(--theme-container-accent-background, lighten($light-medium-gray, 8%));
@include themeable(
background,
theme-container-accent-background,
lighten($light-medium-gray, 8%)
);
border-bottom: 1px solid $light-medium-gray;
font-size: 16px;
a { @include themeable(color, theme-color, $black); }
@ -346,10 +414,16 @@
.single-classified-listing-tags {
padding: 10px 15px;
a {
color: $dark-medium-gray;
color: var(--theme-secondary-color, $dark-medium-gray);
background: $light-medium-gray;
background: var(--theme-container-accent-background, $light-medium-gray);
@include themeable(
color,
theme-secondary-color,
$dark-medium-gray
);
@include themeable(
background,
theme-container-accent-background,
$light-medium-gray
);
display: inline-block;
margin: 2px;
padding: 2px 7px;
@ -360,12 +434,18 @@
}
.single-classified-listing-author-info {
font-size: 0.69em;
color: $medium-gray;
color: var(--theme-secondary-color, $medium-gray);
@include themeable(
color,
theme-secondary-color,
$medium-gray
);
padding: 0px 15px 4px;
a {
color: $medium-gray;
color: var(--theme-secondary-color, $medium-gray);
@include themeable(
color,
theme-secondary-color,
$medium-gray
);
display: inline-block;
&.classified-listing-edit-button {
margin-left: 4px;