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

Refactor sass themeable style (#2767)

Browse source
This commit is contained in:
Mohammadjavad Raadi 2019-05-08 23:37:49 +04:30 • committed by Mac Siri
parent b1d8786436
commit b8a544f4e7
3 changed files with 108 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

93
app/assets/stylesheets/top-bar.scss
View file

@ -22,8 +22,11 @@
z-index: 1000;
font-size: 17px;
height: 48px;
background: $tan;
background: var(--theme-top-bar-background, $tan);
@include themeable(
background,
theme-top-bar-background,
$tan
);
position: fixed;
border-bottom: 1px solid rgba(0, 0, 0, 0.33);
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.13);
@ -43,8 +46,11 @@
width: 28px;
text-align: center;
opacity: 0.75;
filter: invert(0);
filter: var(--theme-social-icon-invert, invert(0));
@include themeable(
filter,
theme-social-icon-invert,
invert(0)
);
img {
width: 15px;
height: 15px;
@ -89,8 +95,16 @@
border-radius: 3px;
border: 2px solid $black;
border: 2px solid var(--theme-top-bar-write-color, $black);
color: var(--theme-top-bar-write-color, $black);
background: var(--theme-top-bar-write-background, $green);
@include themeable(
color,
theme-top-bar-write-color,
$black
);
@include themeable(
background,
theme-top-bar-write-background,
$green
);
@media screen and (min-width: 560px) {
display: block;
right: 140px;
@ -108,7 +122,11 @@
z-index: 10;
top: 1px;
right: 90px;
fill: var(--theme-top-bar-color, $black);
@include themeable(
fill,
theme-top-bar-color,
$black
);
@media screen and (min-width: 700px) {
right: 110px;
}
@ -147,7 +165,11 @@
display: block;
text-align: center;
z-index: 10;
fill: var(--theme-top-bar-color, $black);
@include themeable(
fill,
theme-top-bar-color,
$black
);
@media screen and (min-width: 700px) {
right: 73px;
}
@ -256,8 +278,11 @@
right: -3px;
padding: 5px 10px;
text-align: left;
background: $tan;
background: var(--theme-top-bar-background, $tan);
@include themeable(
background,
theme-top-bar-background,
$tan
);
border: 1px solid rgb(219, 222, 225);
border-top: 0px;
display: none;
@ -300,13 +325,19 @@
text-overflow: ellipsis;
}
&:hover {
background: darken($tan, 2%);
background: var(--theme-top-bar-background-hover, darken($tan, 2%));
@include themeable(
background,
theme-top-bar-background-hover,
darken($tan, 2%)
);
}
}
a {
color: $black;
color: var(--theme-color, $black);
@include themeable(
color,
theme-color,
$black
);
}
}
}
@ -342,11 +373,17 @@
height: 21px;
padding: 7px 8px 6px 10px;
margin-top: 7px;
fill: white;
fill: var(--theme-logo-color, white);
@include themeable(
fill,
theme-logo-color,
white
);
border-radius: 3px;
background: $black;
background: var(--theme-logo-background, $black);
@include themeable(
background,
theme-logo-background,
$black
);
}
}
@ -381,14 +418,24 @@
border: 0px;
padding: 8px;
font-size: 0.9em;
background: #e8e7e7;
background: var(--theme-top-bar-search-background, #e8e7e7);
color: var(--theme-top-bar-search-color, $black);
@include themeable(
background,
theme-top-bar-search-background,
#e8e7e7
);
@include themeable(
color,
theme-top-bar-search-color,
$black
);
-webkit-appearance: none;
&::placeholder {
opacity: 0.5;
color: $black;
color: var(--theme-top-bar-search-color, $black);
@include themeable(
color,
theme-top-bar-search-color,
$black
);
}
}
}

23
app/assets/stylesheets/user-profile-header.scss
View file

@ -1,4 +1,6 @@
@import 'variables';
@import 'mixins';
.user-profile-header{
padding:calc(1.4vw + 8px) 0px;
font-family: $helvetica;
@ -7,8 +9,11 @@
width:1216px;
max-width:92%;
margin: 30px auto 20px;
background: white;
background: var(--theme-container-background, #fff);
@include themeable(
background,
theme-container-background,
#fff
);
border-radius: 3px;
@media screen and ( min-width: 950px ){
max-width:98%;
@ -156,8 +161,11 @@
padding:0px 0px;
margin:0;
font-style: italic;
color:$medium-gray;
color: var(--theme-secondary-color, $medium-gray);
@include themeable(
color,
theme-secondary-color,
$medium-gray
);
width: 94%;
font-size:0.9em;
margin-top:12px;
@ -246,8 +254,11 @@
font-size: 0.7em;
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;

29
app/assets/stylesheets/video-collection.scss
View file

@ -1,17 +1,24 @@
@import 'variables';
@import 'mixins';
.home.video-page-title {
margin: 68px auto 10px;
text-align: center;
background: $lightest-gray;
background: var(--theme-container-background, $lightest-gray);
@include themeable(
background,
theme-container-background,
$lightest-gray
);
header {
font-size:calc(0.9vw + 10px);
}
}
.video-collection {
background: $lightest-gray;
background: var(--theme-container-background, $lightest-gray);
@include themeable(
background,
theme-container-background,
$lightest-gray
);
display: flex;
max-width: 100%;
flex-direction: row;
@ -68,12 +75,18 @@
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: $black;
color: var(--theme-color, $black);
@include themeable(
color,
theme-color,
$black
);
font-size: 0.95em;
&.video-username {
color: $medium-gray;
color: var(--theme-secondary-color, $medium-gray);
@include themeable(
color,
theme-secondary-color,
$medium-gray
);
font-size: 0.88em;
}
}