Skip to content

Commit

Permalink
[apigee#397] Replace rgb values and remaining hex values with variables.
Browse files Browse the repository at this point in the history
  • Loading branch information
Zakiya committed Jul 30, 2020
1 parent 31223e6 commit b397775
Show file tree
Hide file tree
Showing 2 changed files with 42 additions and 42 deletions.
42 changes: 21 additions & 21 deletions themes/custom/apigee_kickstart/assets/css/apigee-kickstart.smartdocs.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -253,7 +253,7 @@
background-color: var(--ak-header-color-bg);
}
.mat-datepicker-content.mat-warn .mat-calendar-body-disabled > .mat-calendar-body-selected {
background-color: rgba(244, 67, 54, 0.4);
background-color: rgba(var(--ak-header-color-bg), 0.4);
}

.mat-datepicker-toggle-active {
Expand Down Expand Up @@ -356,20 +356,20 @@
}

.mat-progress-bar.mat-accent .mat-progress-bar-background {
fill: #ff80ab;
fill: var(--ak-accent-color-dark);
}
.mat-progress-bar.mat-accent .mat-progress-bar-buffer {
background-color: #ff80ab;
background-color: var(--ak-accent-color-dark);
}
.mat-progress-bar.mat-accent .mat-progress-bar-fill::after {
background-color: var(--ak-accent-color-dark);
}

.mat-progress-bar.mat-warn .mat-progress-bar-background {
fill: #ffcdd2;
fill: var(--ak-accent-color-dark);
}
.mat-progress-bar.mat-warn .mat-progress-bar-buffer {
background-color: #ffcdd2;
background-color: var(--ak-accent-color-dark);
}
.mat-progress-bar.mat-warn .mat-progress-bar-fill::after {
background-color: var(--ak-header-color-bg);
Expand Down Expand Up @@ -522,32 +522,32 @@
}

.mat-tab-group.mat-accent .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled) {
background-color: rgba(255, 128, 171, 0.3);
background-color: rgba(var(--ak-accent-color-dark), 0.3);
}
.mat-tab-group.mat-accent .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled) {
background-color: rgba(255, 128, 171, 0.3);
background-color: rgba(var(--ak-accent-color-dark), 0.3);
}
.mat-tab-group.mat-accent .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled) {
background-color: rgba(255, 128, 171, 0.3);
background-color: rgba(var(--ak-accent-color-dark), 0.3);
}
.mat-tab-group.mat-accent .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled) {
background-color: rgba(255, 128, 171, 0.3);
background-color: rgba(var(--ak-accent-color-dark), 0.3);
}
.mat-tab-group.mat-accent .mat-ink-bar {
background-color: var(--ak-accent-color-dark);
}

.mat-tab-nav-bar.mat-accent .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled) {
background-color: rgba(255, 128, 171, 0.3);
background-color: rgba(var(--ak-accent-color-dark), 0.3);
}
.mat-tab-nav-bar.mat-accent .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled) {
background-color: rgba(255, 128, 171, 0.3);
background-color: rgba(var(--ak-accent-color-dark), 0.3);
}
.mat-tab-nav-bar.mat-accent .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled) {
background-color: rgba(255, 128, 171, 0.3);
background-color: rgba(var(--ak-accent-color-dark), 0.3);
}
.mat-tab-nav-bar.mat-accent .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled) {
background-color: rgba(255, 128, 171, 0.3);
background-color: rgba(var(--ak-accent-color-dark), 0.3);
}
.mat-tab-nav-bar.mat-accent .mat-ink-bar {
background-color: var(--ak-accent-color-dark);
Expand Down Expand Up @@ -600,16 +600,16 @@
}

.mat-tab-group.mat-background-accent .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled) {
background-color: rgba(255, 128, 171, 0.3);
background-color: rgba(var(--ak-accent-color-dark), 0.3);
}
.mat-tab-group.mat-background-accent .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled) {
background-color: rgba(255, 128, 171, 0.3);
background-color: rgba(var(--ak-accent-color-dark), 0.3);
}
.mat-tab-group.mat-background-accent .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled) {
background-color: rgba(255, 128, 171, 0.3);
background-color: rgba(var(--ak-accent-color-dark), 0.3);
}
.mat-tab-group.mat-background-accent .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled) {
background-color: rgba(255, 128, 171, 0.3);
background-color: rgba(var(--ak-accent-color-dark), 0.3);
}
.mat-tab-group.mat-background-accent .mat-tab-header {
background-color: var(--ak-accent-color-dark);
Expand All @@ -619,16 +619,16 @@
}

.mat-tab-nav-bar.mat-background-accent .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled) {
background-color: rgba(255, 128, 171, 0.3);
background-color: rgba(var(--ak-accent-color-dark), 0.3);
}
.mat-tab-nav-bar.mat-background-accent .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled) {
background-color: rgba(255, 128, 171, 0.3);
background-color: rgba(var(--ak-accent-color-dark), 0.3);
}
.mat-tab-nav-bar.mat-background-accent .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled) {
background-color: rgba(255, 128, 171, 0.3);
background-color: rgba(var(--ak-accent-color-dark), 0.3);
}
.mat-tab-nav-bar.mat-background-accent .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled) {
background-color: rgba(255, 128, 171, 0.3);
background-color: rgba(var(--ak-accent-color-dark), 0.3);
}
.mat-tab-nav-bar.mat-background-accent .mat-tab-header {
background-color: var(--ak-accent-color-dark);
Expand Down
42 changes: 21 additions & 21 deletions themes/custom/apigee_kickstart/src/sass/apigee/_smartdocs-app.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -267,7 +267,7 @@
}
.mat-calendar-body-disabled {
>.mat-calendar-body-selected {
background-color: rgba(244,67,54,.4);
background-color: rgba(var(--ak-header-color-bg),.4);
}
}
}
Expand Down Expand Up @@ -376,10 +376,10 @@
}
.mat-progress-bar.mat-accent {
.mat-progress-bar-background {
fill: #ff80ab;
fill: var(--ak-accent-color-dark);
}
.mat-progress-bar-buffer {
background-color: #ff80ab;
background-color: var(--ak-accent-color-dark);
}
.mat-progress-bar-fill {
&::after {
Expand All @@ -389,10 +389,10 @@
}
.mat-progress-bar.mat-warn {
.mat-progress-bar-background {
fill: #ffcdd2;
fill: var(--ak-accent-color-dark);
}
.mat-progress-bar-buffer {
background-color: #ffcdd2;
background-color: var(--ak-accent-color-dark);
}
.mat-progress-bar-fill {
&::after {
Expand Down Expand Up @@ -587,22 +587,22 @@
.mat-tab-group.mat-accent {
.mat-tab-label.cdk-keyboard-focused {
&:not(.mat-tab-disabled) {
background-color: rgba(255,128,171,.3);
background-color: rgba(var(--ak-accent-color-dark),.3);
}
}
.mat-tab-label.cdk-program-focused {
&:not(.mat-tab-disabled) {
background-color: rgba(255,128,171,.3);
background-color: rgba(var(--ak-accent-color-dark),.3);
}
}
.mat-tab-link.cdk-keyboard-focused {
&:not(.mat-tab-disabled) {
background-color: rgba(255,128,171,.3);
background-color: rgba(var(--ak-accent-color-dark),.3);
}
}
.mat-tab-link.cdk-program-focused {
&:not(.mat-tab-disabled) {
background-color: rgba(255,128,171,.3);
background-color: rgba(var(--ak-accent-color-dark),.3);
}
}
.mat-ink-bar {
Expand All @@ -612,22 +612,22 @@
.mat-tab-nav-bar.mat-accent {
.mat-tab-label.cdk-keyboard-focused {
&:not(.mat-tab-disabled) {
background-color: rgba(255,128,171,.3);
background-color: rgba(var(--ak-accent-color-dark),.3);
}
}
.mat-tab-label.cdk-program-focused {
&:not(.mat-tab-disabled) {
background-color: rgba(255,128,171,.3);
background-color: rgba(var(--ak-accent-color-dark),.3);
}
}
.mat-tab-link.cdk-keyboard-focused {
&:not(.mat-tab-disabled) {
background-color: rgba(255,128,171,.3);
background-color: rgba(var(--ak-accent-color-dark),.3);
}
}
.mat-tab-link.cdk-program-focused {
&:not(.mat-tab-disabled) {
background-color: rgba(255,128,171,.3);
background-color: rgba(var(--ak-accent-color-dark),.3);
}
}
.mat-ink-bar {
Expand Down Expand Up @@ -703,22 +703,22 @@
.mat-tab-group.mat-background-accent {
.mat-tab-label.cdk-keyboard-focused {
&:not(.mat-tab-disabled) {
background-color: rgba(255,128,171,.3);
background-color: rgba(var(--ak-accent-color-dark),.3);
}
}
.mat-tab-label.cdk-program-focused {
&:not(.mat-tab-disabled) {
background-color: rgba(255,128,171,.3);
background-color: rgba(var(--ak-accent-color-dark),.3);
}
}
.mat-tab-link.cdk-keyboard-focused {
&:not(.mat-tab-disabled) {
background-color: rgba(255,128,171,.3);
background-color: rgba(var(--ak-accent-color-dark),.3);
}
}
.mat-tab-link.cdk-program-focused {
&:not(.mat-tab-disabled) {
background-color: rgba(255,128,171,.3);
background-color: rgba(var(--ak-accent-color-dark),.3);
}
}
.mat-tab-header {
Expand All @@ -731,22 +731,22 @@
.mat-tab-nav-bar.mat-background-accent {
.mat-tab-label.cdk-keyboard-focused {
&:not(.mat-tab-disabled) {
background-color: rgba(255,128,171,.3);
background-color: rgba(var(--ak-accent-color-dark),.3);
}
}
.mat-tab-label.cdk-program-focused {
&:not(.mat-tab-disabled) {
background-color: rgba(255,128,171,.3);
background-color: rgba(var(--ak-accent-color-dark),.3);
}
}
.mat-tab-link.cdk-keyboard-focused {
&:not(.mat-tab-disabled) {
background-color: rgba(255,128,171,.3);
background-color: rgba(var(--ak-accent-color-dark),.3);
}
}
.mat-tab-link.cdk-program-focused {
&:not(.mat-tab-disabled) {
background-color: rgba(255,128,171,.3);
background-color: rgba(var(--ak-accent-color-dark),.3);
}
}
.mat-tab-header {
Expand Down

0 comments on commit b397775

Please sign in to comment.