Code
/
pressbooks-aldine
7
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Switch to css var(), simplify custom colors.

pull/11/head
Ned Zimmerman 7 years ago
parent
bd12c7620a
commit
3785a38963
No known key found for this signature in database
GPG Key ID: FF56334A013120CA
5 changed files with 53 additions and 103 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 85
      app/setup.php
  2. 19
      resources/assets/styles/common/_global.scss
  3. 30
      resources/assets/styles/components/_buttons.scss
  4. 8
      resources/assets/styles/layouts/_header.scss
  5. 14
      resources/assets/styles/layouts/_pages.scss

85
app/setup.php
Unescape View File

@ -205,88 +205,19 @@ add_action('wp_head', function () {
$secondary = get_option('pb_network_secondary_color'); $secondary = get_option('pb_network_secondary_color');
$header_text_color = get_header_textcolor(); $header_text_color = get_header_textcolor();
if ($primary || $secondary || $header_text_color) { ?> if ($primary || $secondary || $header_text_color) { ?>
<style type="text/css"> <style type="text/css">:root {
<?php if ($primary) { <?php if ($primary) {
$primary = '#' . $primary; ?> $primary = '#' . $primary; ?>
a { color: <?= $primary ?>; } --brand-primary: <?= $primary ?>;
.primary { color: <?= $primary ?>; } <?php }
.bg-primary { background-color: <?= $primary ?>; }
.b--primary { border-color: <?= $primary ?>; }
.button.button-primary {
border-color: <?= $primary ?>;
background: <?= $primary ?>;
}
.button.button-primary:hover,
.button.button-primary:focus {
color: <?= $primary ?>;
}
.button.button-primary.button-outline {
color: <?= $primary ?>;
}
.button.button-primary.button-outline:hover,
.button.button-primary.button-outline:focus {
background: <?= $primary ?>;
}
.home .blocks.blocks-2 .widget_text:nth-child(2) {
border-color: <?= $primary ?>;
}
.home .blocks.blocks-4 .widget_text:nth-child(3) {
border-color: <?= $primary ?>;
}
.banner .toggle-menu .icon,
.banner .toggle-menu .icon:after,
.banner .toggle-menu .icon:before {
background: <?= $primary ?>;
}
.banner .primary-navigation.is-visible {
background: <?= $primary ?>;
}
<?php }
if ($secondary) { if ($secondary) {
$secondary = '#' . $secondary; ?> $secondary = '#' . $secondary; ?>
.secondary { color: <?= $secondary ?>; } --brand-secondary: <?= $secondary ?>;
.bg-secondary { background-color: <?= $secondary ?>; }
.b--secondary {
border-color: <?= $secondary ?>;
}
.button.button-secondary {
border-color: <?= $secondary ?>;
background: <?= $secondary ?>;
}
.button.button-secondary:hover,
.button.button-secondary:focus {
color: <?= $secondary ?>;
}
.button.button-secondary.button-outline {
color: <?= $secondary ?>;
}
.button.button-secondary.button-outline:hover,
.button.button-secondary.button-outline:focus {
background: <?= $secondary ?>;
}
.home .widget h3::before,
.home .latest-books h3::before {
background-color: <?= $secondary ?>;
}
.home .blocks.blocks-4 .widget_text:nth-child(2) {
background: <?= $secondary ?>;
}
.home .blocks.blocks-4 .widget_text:nth-child(2) .button:hover,
.home .blocks.blocks-4 .widget_text:nth-child(2) .button:focus {
color: <?= $secondary ?>;
}
<?php } <?php }
if ($header_text_color) { if ($header_text_color) {
$header_text_color = '#' . $header_text_color; ?> $header_text_color = '#' . $header_text_color; ?>
.banner .branding p { --brand-header-text: <?= $header_text_color; ?>;
color: <?= $header_text_color ?>;
}
@media (min-width: 1200px) {
.banner .primary-navigation a {
color: <?= $header_text_color ?>;
}
}
<?php } ?> <?php } ?>
</style> }</style>
<?php } <?php }
}); });

19
resources/assets/styles/common/_global.scss
Unescape View File

@ -32,31 +32,36 @@ h2 {
margin: 0; margin: 0;
} }
:root {
--brand-primary: $brand-primary;
--brand-secondary: $brand-secondary;
}
a { a {
color: $brand-primary; color: var(--brand-primary, $brand-primary);
text-decoration: none; text-decoration: none;
} }
.primary { .primary {
color: $brand-primary; color: var(--brand-primary, $brand-primary);
} }
.bg-primary { .bg-primary {
background-color: $brand-primary; background-color: var(--brand-primary, $brand-primary);
} }
.b--primary { .b--primary {
border-color: $brand-primary; border-color: var(--brand-primary, $brand-primary);
} }
.secondary { .secondary {
color: $brand-secondary; color: var(--brand-secondary, $brand-secondary);
} }
.bg-secondary { .bg-secondary {
background-color: $brand-secondary; background-color: var(--brand-secondary, $brand-secondary);
} }
.b--secondary { .b--secondary {
border-color: $brand-secondary; border-color: var(--brand-secondary, $brand-secondary);
} }

30
resources/assets/styles/components/_buttons.scss
Unescape View File

@ -23,6 +23,12 @@
color: $black; color: $black;
} }
&.button-small {
width: 150px;
height: 40px;
padding: 0.5em;
}
&.button-wide { &.button-wide {
width: 305px; width: 305px;
} }
@ -39,41 +45,45 @@
} }
&.button-primary { &.button-primary {
border-color: $brand-primary; border-color: var(--brand-primary, $brand-primary);
background: $brand-primary; background: var(--brand-primary, $brand-primary);
&:hover, &:hover,
&:focus { &:focus {
background: $white; background: $white;
color: $brand-primary; color: var(--brand-primary, $brand-primary);
} }
&.button-outline { &.button-outline {
color: $brand-primary; background: $white;
color: var(--brand-primary, $brand-primary);
&:hover, &:hover,
&:focus { &:focus {
background: $brand-primary; color: $white;
background: var(--brand-primary, $brand-primary);
} }
} }
} }
&.button-secondary { &.button-secondary {
border-color: $brand-secondary; border-color: var(--brand-secondary, $brand-secondary);
background: $brand-secondary; background: var(--brand-secondary, $brand-secondary);
&:hover, &:hover,
&:focus { &:focus {
background: $white; background: $white;
color: $brand-secondary; color: var(--brand-secondary, $brand-secondary);
} }
&.button-outline { &.button-outline {
color: $brand-secondary; background: $white;
color: var(--brand-secondary, $brand-secondary);
&:hover, &:hover,
&:focus { &:focus {
background: $brand-secondary; color: $white;
background: var(--brand-secondary, $brand-secondary);
} }
} }
} }

8
resources/assets/styles/layouts/_header.scss
Unescape View File

@ -16,14 +16,14 @@
top: 7px; top: 7px;
width: 25px; width: 25px;
height: 3px; height: 3px;
background: $brand-primary; background: var(--brand-primary, $brand-primary);
&::before, &::before,
&::after { &::after {
width: 25px; width: 25px;
height: 3px; height: 3px;
content: ''; content: '';
background: $brand-primary; background: var(--brand-primary, $brand-primary);
} }
&::before { &::before {
@ -80,7 +80,7 @@
margin: 0; margin: 0;
padding: 0 52px; padding: 0 52px;
z-index: 1; z-index: 1;
background: $brand-primary; background: var(--brand-primary, $brand-primary);
a { a {
display: block; display: block;
@ -136,7 +136,7 @@
&:hover, &:hover,
&:focus { &:focus {
color: $brand-primary; color: var(--brand-primary, $brand-primary);
} }
&.catalog { &.catalog {

14
resources/assets/styles/layouts/_pages.scss
Unescape View File

@ -18,7 +18,7 @@
margin: 0 auto 1em; margin: 0 auto 1em;
width: 46px; width: 46px;
height: 5px; height: 5px;
background-color: $brand-secondary; background-color: var(--brand-secondary, $brand-secondary);
} }
} }
@ -37,7 +37,7 @@
.blocks.blocks-2 { .blocks.blocks-2 {
.widget_text:nth-child(2) { .widget_text:nth-child(2) {
border: solid 2px $brand-primary; border: solid 2px var(--brand-primary, $brand-primary);
box-shadow: unset; box-shadow: unset;
} }
} }
@ -45,7 +45,7 @@
.blocks.blocks-4 { .blocks.blocks-4 {
.widget_text:nth-child(2) { .widget_text:nth-child(2) {
color: $white; color: $white;
background: $brand-secondary; background: var(--brand-secondary, $brand-secondary);
h3::before { h3::before {
background-color: $white; background-color: $white;
@ -57,14 +57,14 @@
&:hover, &:hover,
&:focus { &:focus {
color: $brand-secondary; color: var(--brand-secondary, $brand-secondary);
background: $white; background: $white;
} }
} }
} }
.widget_text:nth-child(3) { .widget_text:nth-child(3) {
border: solid 2px $brand-primary; border: solid 2px var(--brand-primary, $brand-primary);
box-shadow: unset; box-shadow: unset;
} }
} }
@ -131,6 +131,10 @@
padding: 0 90px; padding: 0 90px;
box-shadow: -3px 5px 4px 2px rgba(135, 135, 135, 0.09); box-shadow: -3px 5px 4px 2px rgba(135, 135, 135, 0.09);
&:last-child {
margin-bottom: 4.0625rem;
}
h3 { h3 {
font-size: em(48); font-size: em(48);
line-height: (56/48); line-height: (56/48);

Write Preview
Loading…
Cancel
Save