Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-07-08 12:35:09 +02:00
Code Issues Projects Releases Wiki Activity

stub out theme styling

Browse Source
This commit is contained in:
Kyle Spearrin 2018-05-30 09:28:19 -04:00
parent 957e460a43
commit a0b59ab9bd
3 changed files with 73 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/scss/box.scss
View File

@ -17,9 +17,13 @@
}
.box-content {
background: $box-background-color;
border-radius: $border-radius;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
background-color: $box-background-color;
@include themify($themes) {
background-color: themed('boxBackgroundColor');
}
&.box-content-padded {
padding: 10px 15px;
@ -39,6 +43,10 @@
height: 1px;
width: calc(100% - 10px);
border-bottom: 1px solid $box-border-color;
@include themify($themes) {
border-bottom-color: themed('boxBorderColor');
}
}
&:first-child, &:last-child {
@ -60,6 +68,10 @@
&:hover, &:focus, &.active {
background-color: $box-background-hover-color;
@include themify($themes) {
background-color: themed('boxBackgroundHoverColor');
}
}
&.pre {

44
src/scss/variables.scss
View File

@ -4,7 +4,6 @@ $font-size-base: 14px;
$font-size-large: 18px;
$font-size-small: 12px;
$text-color: #000000;
$background-color: #efeff4;
$border-color: #f0f0f0;
$border-color-dark: #ddd;
$list-item-hover: #fbfbfb;
@ -36,3 +35,46 @@ $button-backgound-color: white;
$button-color: lighten($text-color, 40%);
$button-color-primary: darken($brand-primary, 8%);
$button-color-danger: darken($brand-danger, 10%);
$themes: (
light: (
textColor: $text-color,
borderColor: $border-color,
borderColorDark: $border-color-dark,
backgroundColor: $background-color,
backgroundColorAlt: $background-color-alt,
backgroundColorAlt2: $background-color-alt2,
boxBackgroundColor: $box-background-color,
boxBackgroundHoverColor: $box-background-hover-color,
boxBorderColor: $box-border-color,
),
dark: (
textColor: #ffffff,
borderColor: #000000,
borderColorDark: #000000,
backgroundColor: #5f5f5f,
backgroundColorAlt: #5f5f5f,
backgroundColorAlt2: #5f5f5f,
boxBackgroundColor: #5f5f5f,
boxBackgroundHoverColor: #707070,
boxBorderColor: #000000,
),
);
@mixin themify($themes: $themes) {
@each $theme, $map in $themes {
html.theme_#{$theme} & {
$theme-map: () !global;
@each $key, $submap in $map {
$value: map-get(map-get($themes, $theme), '#{$key}');
$theme-map: map-merge($theme-map, ($key: $value)) !global;
}
@content;
$theme-map: null !global;
}
}
}
@function themed($key) {
@return map-get($theme-map, $key);
}

20
src/scss/vault.scss
View File

@ -14,12 +14,17 @@
}
> #groupings {
background-color: $background-color-alt;
width: 22%;
min-width: 175px;
max-width: 250px;
background-color: $background-color-alt;
border-right: 1px solid $border-color-dark;
@include themify($themes) {
background-color: themed('backgroundColorAlt');
border-right-color: themed('borderColorDark');
}
.inner-content {
padding-bottom: 0;
padding-right: 5px;
@ -111,11 +116,16 @@
}
> #items {
background-color: $background-color;
width: 28%;
min-width: 200px;
max-width: 350px;
background-color: $background-color;
border-right: 1px solid $border-color-dark;
@include themify($themes) {
background-color: themed('backgroundColor');
border-right-color: themed('borderColorDark');
}
.no-items {
display: flex;
@ -134,9 +144,13 @@
}
> #details {
background-color: $background-color-alt2;
flex: 1;
min-width: 0;
background-color: $background-color-alt2;
@include themify($themes) {
background-color: themed('backgroundColorAlt2');
}
.inner-content {
min-width: 400px;