Skip to content

Commit

Permalink
Add theming to the masterbar
Browse files Browse the repository at this point in the history
  • Loading branch information
@frontdevde
frontdevde committed Jul 11, 2017
1 parent 990c4bb commit fadb4c1
Show file tree
Hide file tree
Showing 3 changed files with 56 additions and 39 deletions.
44 changes: 28 additions & 16 deletions assets/stylesheets/shared/_themes.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,16 @@
*/

// Layout
$masterbar-color: $blue-wordpress;
$sidebar-bg-color: $gray-lighten-30;
$sidebar-text-color: $gray-dark;
$sidebar-selected-color: $gray-text-min;
$masterbar-color: $white;
$masterbar-bg-color: $blue-wordpress;
$masterbar-border-color: darken( $masterbar-bg-color, 4% );
$masterbar-item-active-bg-color: darken( $masterbar-bg-color, 17% );
$masterbar-item-hover-bg-color: lighten( $masterbar-bg-color, 5% );
$masterbar-item-new-color: $blue-wordpress;

$sidebar-bg-color: $gray-lighten-30;
$sidebar-text-color: $gray-dark;
$sidebar-selected-color: $gray-text-min;

/**
* 2.0 Color scheme definitions
Expand All @@ -41,22 +47,28 @@ $sidebar-selected-color: $gray-text-min;

$color-schemes: (
default: (
'--masterbar-color': $masterbar-color,
'--sidebar-bg-color': $sidebar-bg-color,
'--sidebar-text-color': $sidebar-text-color,
'--sidebar-selected-color': $sidebar-selected-color
'--masterbar-color': $masterbar-color,
'--masterbar-bg-color': $masterbar-bg-color,
'--masterbar-border-color': $masterbar-border-color,
'--masterbar-item-active-bg-color': $masterbar-item-active-bg-color,
'--masterbar-item-hover-bg-color': $masterbar-item-hover-bg-color,
'--masterbar-item-new-color': $masterbar-item-new-color,
),
light: (
'--masterbar-color': $gray,
'--sidebar-bg-color': $white,
'--sidebar-text-color': $sidebar-text-color,
'--sidebar-selected-color': $sidebar-selected-color
'--masterbar-color': $gray-text,
'--masterbar-bg-color': $gray-lighten-20,
'--masterbar-border-color': $gray-lighten-10,
'--masterbar-item-active-bg-color': $gray-lighten-10,
'--masterbar-item-hover-bg-color': $gray-lighten-30,
'--masterbar-item-new-color': $gray-text,
),
dark: (
'--masterbar-color': $gray-dark,
'--sidebar-bg-color': $gray-dark,
'--sidebar-text-color': $white,
'--sidebar-selected-color': $sidebar-selected-color
'--masterbar-color': $masterbar-color,
'--masterbar-bg-color': $gray-dark,
'--masterbar-border-color': $gray-darken-10,
'--masterbar-item-active-bg-color': $gray-text-min,
'--masterbar-item-hover-bg-color': $gray-darken-10,
'--masterbar-item-new-color': $masterbar-item-new-color,
)
);

Expand Down
4 changes: 2 additions & 2 deletions client/components/sub-masterbar-nav/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
display: flex;
flex-direction: column;
padding: 56px 20px 28px;
background-color: $masterbar-color;
background-color: $masterbar-bg-color;

&:not(.is-collapsed) .sub-masterbar-nav__select {
background-color: $blue-dark;
Expand Down Expand Up @@ -89,7 +89,7 @@

&:hover,
&:focus {
background: lighten( $masterbar-color, 5% );
background: lighten( $masterbar-bg-color, 5% );
color: $white;
outline: 0;
transition: all 200ms ease-out;
Expand Down
47 changes: 26 additions & 21 deletions client/layout/masterbar/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,14 @@ $autobar-height: 20px;

// The WordPress.com Masterbar
.masterbar {
background: $masterbar-color;
border-bottom: 1px solid darken( $masterbar-color, 4% );
color: $white;
border-bottom: 1px solid;
@include theme-multiple(
(
'background': --masterbar-bg-color,
'border-color': --masterbar-border-color,
'color': --masterbar-color,
)
);
font-size: 16px;
display: flex;
height: $masterbar-height;
Expand Down Expand Up @@ -38,7 +43,7 @@ $autobar-height: 20px;
display: flex;
align-items: center;
position: relative;
color: $white;
@include theme( color, --masterbar-color );
font-size: 14px;
height: $masterbar-height;
line-height: $masterbar-height;
Expand All @@ -48,15 +53,15 @@ $autobar-height: 20px;
transition: all 150ms ease-in;

&:visited {
color: $white;
@include theme( color, --masterbar-color );
}

&[href] {
cursor: pointer;
}

.masterbar__item-content {
color: $white;
@include theme( color, --masterbar-color );
}

.gridicon + .masterbar__item-content {
Expand All @@ -65,13 +70,13 @@ $autobar-height: 20px;

&:hover,
&:focus {
background: lighten( $masterbar-color, 5% );
color: $white;
@include theme( background, --masterbar-item-hover-bg-color );
@include theme( color, --masterbar-color );
outline: 0;
}

&.is-active {
background: darken( $masterbar-color, 17% );
@include theme( background, --masterbar-item-active-bg-color );
}

.is-support-user &.is-active {
Expand Down Expand Up @@ -140,13 +145,13 @@ $autobar-height: 20px;
.masterbar__item-new {
background: $white;
border-radius: 3px;
color: $blue-wordpress;
@include theme( color, --masterbar-item-new-color );
height: 36px;
margin: 5px 8px;
transition: all 0.2s ease-out;

&:visited {
color: $blue-wordpress;
@include theme( color, --masterbar-item-new-color );
}

&.is-active {
Expand All @@ -156,11 +161,11 @@ $autobar-height: 20px;
&:hover,
&:focus {
background: $gray-light;
color: $blue-wordpress;
@include theme( color, --masterbar-item-new-color );
}

.masterbar__item-content {
color: $blue-wordpress;
@include theme( color, --masterbar-item-new-color );
display: none;

@include breakpoint( ">960px" ) {
Expand All @@ -182,7 +187,7 @@ $autobar-height: 20px;

// active state when editing
.is-group-editor & {
background: darken( $masterbar-color, 17% );
background: darken( $masterbar-bg-color, 17% );
color: $white;
}

Expand All @@ -192,7 +197,7 @@ $autobar-height: 20px;
}

.is-group-editor &:hover {
background: darken( $masterbar-color, 13% );
background: darken( $masterbar-bg-color, 13% );
}

}
Expand Down Expand Up @@ -237,7 +242,7 @@ $autobar-height: 20px;
}

.masterbar__notifications-bubble {
border: solid 2px $masterbar-color;
border: solid 2px $masterbar-bg-color;
border-radius: 50%;
display: none;
font-size: 8px;
Expand All @@ -259,11 +264,11 @@ $autobar-height: 20px;
}

&:hover .masterbar__notifications-bubble {
border-color: lighten( $masterbar-color, 5% );
border-color: lighten( $masterbar-bg-color, 5% );
}

&.is-active .masterbar__notifications-bubble {
border-color: darken( $masterbar-color, 10% );
border-color: darken( $masterbar-bg-color, 10% );
}

&.has-unread .masterbar__notifications-bubble {
Expand Down Expand Up @@ -358,16 +363,16 @@ $autobar-height: 20px;
}

.is-group-editor & {
background: darken( $masterbar-color, 12% );
border-left: 1px solid darken( $masterbar-color, 5% );
background: darken( $masterbar-bg-color, 12% );
border-left: 1px solid darken( $masterbar-bg-color, 5% );

.count {
color: $gray-light;
}
}

.is-group-editor &:hover {
background: darken( $masterbar-color, 17% );
background: darken( $masterbar-bg-color, 17% );

.count {
color: $white;
Expand Down

0 comments on commit fadb4c1

Please sign in to comment.