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
Split 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');
$header_text_color = get_header_textcolor();
if ($primary || $secondary || $header_text_color) { ?>
<style type="text/css">
<?php if ($primary) {
$primary = '#' . $primary; ?>
a { color: <?= $primary ?>; }
.primary { color: <?= $primary ?>; }
.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 }
<style type="text/css">:root {
<?php if ($primary) {
$primary = '#' . $primary; ?>
--brand-primary: <?= $primary ?>;
<?php }
if ($secondary) {
$secondary = '#' . $secondary; ?>
.secondary { color: <?= $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 ?>;
}
--brand-secondary: <?= $secondary ?>;
<?php }
if ($header_text_color) {
$header_text_color = '#' . $header_text_color; ?>
.banner .branding p {
color: <?= $header_text_color ?>;
}
@media (min-width: 1200px) {
.banner .primary-navigation a {
color: <?= $header_text_color ?>;
}
}
--brand-header-text: <?= $header_text_color; ?>;
<?php } ?>
</style>
}</style>
<?php }
});

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

@ -32,31 +32,36 @@ h2 {
margin: 0;
}
:root {
--brand-primary: $brand-primary;
--brand-secondary: $brand-secondary;
}
a {
color: $brand-primary;
color: var(--brand-primary, $brand-primary);
text-decoration: none;
}
.primary {
color: $brand-primary;
color: var(--brand-primary, $brand-primary);
}
.bg-primary {
background-color: $brand-primary;
background-color: var(--brand-primary, $brand-primary);
}
.b--primary {
border-color: $brand-primary;
border-color: var(--brand-primary, $brand-primary);
}
.secondary {
color: $brand-secondary;
color: var(--brand-secondary, $brand-secondary);
}
.bg-secondary {
background-color: $brand-secondary;
background-color: var(--brand-secondary, $brand-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;
}
&.button-small {
width: 150px;
height: 40px;
padding: 0.5em;
}
&.button-wide {
width: 305px;
}
@ -39,41 +45,45 @@
}
&.button-primary {
border-color: $brand-primary;
background: $brand-primary;
border-color: var(--brand-primary, $brand-primary);
background: var(--brand-primary, $brand-primary);
&:hover,
&:focus {
background: $white;
color: $brand-primary;
color: var(--brand-primary, $brand-primary);
}
&.button-outline {
color: $brand-primary;
background: $white;
color: var(--brand-primary, $brand-primary);
&:hover,
&:focus {
background: $brand-primary;
color: $white;
background: var(--brand-primary, $brand-primary);
}
}
}
&.button-secondary {
border-color: $brand-secondary;
background: $brand-secondary;
border-color: var(--brand-secondary, $brand-secondary);
background: var(--brand-secondary, $brand-secondary);
&:hover,
&:focus {
background: $white;
color: $brand-secondary;
color: var(--brand-secondary, $brand-secondary);
}
&.button-outline {
color: $brand-secondary;
background: $white;
color: var(--brand-secondary, $brand-secondary);
&:hover,
&: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;
width: 25px;
height: 3px;
background: $brand-primary;
background: var(--brand-primary, $brand-primary);
&::before,
&::after {
width: 25px;
height: 3px;
content: '';
background: $brand-primary;
background: var(--brand-primary, $brand-primary);
}
&::before {
@ -80,7 +80,7 @@
margin: 0;
padding: 0 52px;
z-index: 1;
background: $brand-primary;
background: var(--brand-primary, $brand-primary);
a {
display: block;
@ -136,7 +136,7 @@
&:hover,
&:focus {
color: $brand-primary;
color: var(--brand-primary, $brand-primary);
}
&.catalog {

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

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

Write Preview
Loading…
Cancel
Save