cleaning up some of the custom styling
This commit is contained in:
parent
a666face00
commit
1e68eac502
9 changed files with 160 additions and 128 deletions
43
assets/css/_bs-custom-post.scss
Normal file
43
assets/css/_bs-custom-post.scss
Normal file
|
@ -0,0 +1,43 @@
|
|||
// Merge the color maps
|
||||
$theme-colors: map-merge($theme-colors, $custom-colors);
|
||||
|
||||
/* general styles */
|
||||
$link-color: $gray-200;
|
||||
$link-decoration: underline;
|
||||
$link-shade-percentage: 20% !default;
|
||||
$link-hover-color: $primary;
|
||||
|
||||
/* tables */
|
||||
$table-bg: $dark;
|
||||
|
||||
/* buttons */
|
||||
$btn-box-shadow: null;
|
||||
|
||||
/* figure captions */
|
||||
$figure-caption-color: $gray-400;
|
||||
|
||||
/* form inputs */
|
||||
$input-bg: $dark;
|
||||
$input-focus-bg: $dark;
|
||||
$input-border-color: $spaceblue-600;
|
||||
$input-focus-color: $gray-100;
|
||||
$input-placeholder-color: shade-color($spaceblue-600, 20%);
|
||||
|
||||
/* pagination */
|
||||
$pagination-bg: $dark;
|
||||
$pagination-border-color: $spaceblue-600;
|
||||
$pagination-active-color: $dark;
|
||||
$pagination-hover-color: tint-color($primary, 10%);
|
||||
$pagination-hover-bg: tint-color($dark, 7%);
|
||||
$pagination-hover-border-color: $spaceblue-600;
|
||||
$pagination-focus-color: tint-color($primary, 10%);
|
||||
$pagination-focus-bg: tint-color($dark, 7%);
|
||||
|
||||
/* dropdown menus */
|
||||
$dropdown-dark-bg: $dark;
|
||||
$dropdown-link-color: $light;
|
||||
$dropdown-link-hover-color: tint-color($light, 10%);
|
||||
$dropdown-link-hover-bg: $spaceblue-700;
|
||||
|
||||
// $dropdown-link-active-color: tint-color($dark, 10%);
|
||||
// $dropdown-link-active-bg: $spaceblue-700;
|
|
@ -1,13 +1,4 @@
|
|||
/* Bootstrap custom variable overrides */
|
||||
// Colors
|
||||
$primary: #51A39F;
|
||||
// $secondary: #9883E5;
|
||||
$secondary: #955E42;
|
||||
$success: #37B800;
|
||||
$info: #0075F2;
|
||||
$warning: #F9E900;
|
||||
$danger: #DD1C1A;
|
||||
|
||||
// Typography
|
||||
$font-size-base: 1.125rem;
|
||||
$line-height-base: 1.35;
|
|
@ -1,12 +1,17 @@
|
|||
/* Bootstrap custom variable overrides */
|
||||
@import "bs-custom";
|
||||
@import "bs-custom-pre";
|
||||
|
||||
// Required || Configuration
|
||||
// Required || Configuration :: bootstrap functions
|
||||
@import "../../node_modules/bootstrap/scss/functions";
|
||||
|
||||
/* Bootstrap custom variable overrides */
|
||||
@import "bs-vars-pre";
|
||||
|
||||
// Required || Configuration :: bootstrap variables
|
||||
@import "../../node_modules/bootstrap/scss/variables";
|
||||
|
||||
/* Bootstrap custom variable overrides */
|
||||
@import "bs-colors";
|
||||
@import "bs-custom-post";
|
||||
|
||||
// Required || Configuration -- CONTINUED
|
||||
@import "../../node_modules/bootstrap/scss/mixins";
|
||||
|
|
|
@ -1,12 +1,16 @@
|
|||
// Colors
|
||||
// now defined in bs-custom
|
||||
// $primary: #51A39F;
|
||||
// // $secondary: #9883E5;
|
||||
// $secondary: #955E42;
|
||||
// $success: #37B800;
|
||||
// $info: #0075F2;
|
||||
// $warning: #F9E900;
|
||||
// $danger: #DD1C1A;
|
||||
// scss-docs-start color-variables
|
||||
$blue: #0d6efd;
|
||||
$indigo: #6610f2;
|
||||
$purple: #6f42c1;
|
||||
$pink: #d63384;
|
||||
$red: #dc3545;
|
||||
$orange: #fd7e14;
|
||||
$yellow: #ffc107;
|
||||
$green: #198754;
|
||||
$teal: #20c997;
|
||||
$cyan: #0dcaf0;
|
||||
// scss-docs-end color-variables
|
||||
|
||||
// define black, white, gray
|
||||
$white: #fff;
|
||||
|
@ -25,6 +29,7 @@ $gray-750: shade-color($gray, 50%);
|
|||
$gray-800: shade-color($gray, 60%);
|
||||
$gray-900: shade-color($gray, 80%);
|
||||
|
||||
|
||||
// spaceblue is based on coolors.co 'space cadet' #212c40 which was bg color in Lester's original design
|
||||
// background will be spaceblue-800
|
||||
$spaceblue-100: #aebcd5;
|
||||
|
@ -40,6 +45,18 @@ $spaceblue-850: #1c2536;
|
|||
$spaceblue-900: #151c28;
|
||||
|
||||
|
||||
// scss-docs-start theme-color-variables
|
||||
$primary: #51A39F;
|
||||
$secondary: $gray;
|
||||
$success: $green;
|
||||
$info: $cyan;
|
||||
$warning: $yellow;
|
||||
$danger: $red;
|
||||
$light: $spaceblue-100;
|
||||
$dark: $spaceblue-900;
|
||||
// scss-docs-end theme-color-variables
|
||||
|
||||
|
||||
// Create your own map
|
||||
$custom-colors: (
|
||||
"primary": $primary,
|
||||
|
@ -54,14 +71,9 @@ $custom-colors: (
|
|||
"gray-dark": $gray-800
|
||||
);
|
||||
|
||||
// Merge the maps
|
||||
$theme-colors: map-merge($theme-colors, $custom-colors);
|
||||
|
||||
// misc
|
||||
$navbar-dark-color: rgba($white, 0.75);
|
||||
$navbar-dark-hover-color: rgba($white, 0.9);
|
||||
$navbar-dark-active-color: $white;
|
||||
$navbar-dark-disabled-color: rgba($white, 0.45);
|
||||
$navbar-dark-toggler-border-color: rgba($white, 0.3);
|
||||
$body-bg: $spaceblue-800;
|
||||
$body-color: $gray-200;
|
||||
$text-muted: $gray-400;
|
||||
$component-active-color: $dark;
|
||||
$component-active-bg: $primary;
|
||||
// $custom-dropdown-menu-background:
|
|
@ -209,7 +209,6 @@ nav#top-navbar-grid-outer {
|
|||
}
|
||||
}
|
||||
&.show {
|
||||
// color: $primary;
|
||||
opacity: 0.5;
|
||||
&:hover {
|
||||
@extend .text-decoration-none;
|
||||
|
@ -224,22 +223,20 @@ nav#top-navbar-grid-outer {
|
|||
}
|
||||
}
|
||||
.dropdown-menu.dropdown-menu-dark {
|
||||
background-color: $spaceblue-900;
|
||||
li.menu-item {
|
||||
.dropdown-item.top-navbar-grid-main-menu-item-link {
|
||||
@extend .fw-normal;
|
||||
// padding: 0.25rem 1rem 0 1rem !important;
|
||||
text-transform: inherit !important;
|
||||
&:hover {
|
||||
@extend .text-decoration-none;
|
||||
color: $spaceblue-800;
|
||||
background-color: $primary;
|
||||
color: $dropdown-link-hover-color;
|
||||
background-color: $dropdown-link-hover-bg;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
.dropdown-item.top-navbar-grid-main-menu-item-link {
|
||||
color: $spaceblue-100;
|
||||
background-color: $spaceblue-600;
|
||||
color: $dropdown-link-active-color;
|
||||
background-color: $dropdown-link-active-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
54
assets/css/_meetings-plugin.scss
Normal file
54
assets/css/_meetings-plugin.scss
Normal file
|
@ -0,0 +1,54 @@
|
|||
#tsml {
|
||||
.form-control {
|
||||
border: 1px solid $primary;
|
||||
}
|
||||
& .btn, & .btn a {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
.btn-default {
|
||||
color: $spaceblue-800;
|
||||
background-color: $primary;
|
||||
border: 1px solid $primary;
|
||||
&:hover {
|
||||
@extend .btn-primary, :hover;
|
||||
}
|
||||
&.toggle-view {
|
||||
color: $primary;
|
||||
background-color: inherit;
|
||||
border: 1px solid $primary;
|
||||
&:hover {
|
||||
color: $spaceblue-900;
|
||||
background-color: tint-color($primary, 30%);
|
||||
border: 1px solid $primary;
|
||||
}
|
||||
&.active {
|
||||
color: $spaceblue-900;
|
||||
background-color: $primary;
|
||||
border: 1px solid $primary;
|
||||
&:hover {
|
||||
color: $spaceblue-900;
|
||||
background-color: $primary;
|
||||
border: 1px solid $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.table-wrapper {
|
||||
color: #fff;
|
||||
}
|
||||
.dropdown-menu {
|
||||
color: $gray-200;
|
||||
// background-color: $spaceblue-900;
|
||||
}
|
||||
.dropdown-menu > li > a {
|
||||
color: $gray-200 !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
.dropdown-menu > li > a:hover,
|
||||
.dropdown-menu > li.active > a,
|
||||
.dropdown-menu > li.active > a:hover {
|
||||
color: $spaceblue-900 !important;
|
||||
text-decoration: none !important;
|
||||
background-color: $primary !important;
|
||||
}
|
||||
}
|
|
@ -19,19 +19,13 @@
|
|||
/* main */
|
||||
html,
|
||||
body {
|
||||
color: $gray-200;
|
||||
background-color: $spaceblue-800;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* links */
|
||||
a,
|
||||
#tsml a {
|
||||
@extend .text-decoration-underline;
|
||||
color: $gray-200;
|
||||
&:hover, &:focus {
|
||||
// @extend .text-decoration-underline;
|
||||
color: $primary;
|
||||
text-decoration-color: $gray-200 !important;
|
||||
}
|
||||
}
|
||||
|
@ -121,8 +115,6 @@ blockquote.wp-block-quote {
|
|||
}
|
||||
}
|
||||
figure.wp-block-pullquote {
|
||||
// @extend .my-3;
|
||||
// @extend .py-3;
|
||||
margin: 2em !important;
|
||||
@extend .p-5;
|
||||
&:not(.is-style-solid-color) {
|
||||
|
@ -153,7 +145,7 @@ figure.wp-block-pullquote {
|
|||
height: auto;
|
||||
}
|
||||
.btn-primary {
|
||||
color: $spaceblue-800;
|
||||
color: $dark;
|
||||
}
|
||||
.has-drop-cap:not(:focus)::first-letter {
|
||||
font-size: 5em;
|
||||
|
@ -181,123 +173,61 @@ figure.wp-block-pullquote {
|
|||
@extend .text-end;
|
||||
}
|
||||
}
|
||||
.wp-caption-text {
|
||||
@extend .text-muted;
|
||||
}
|
||||
|
||||
/* tables */
|
||||
table,
|
||||
.wp-block-table table,
|
||||
.wp-block-calendar table {
|
||||
@extend .table;
|
||||
@extend .table-dark;
|
||||
caption {
|
||||
@extend .text-gray-400;
|
||||
@extend .text-muted;
|
||||
}
|
||||
thead th,
|
||||
tbody td {
|
||||
border: none !important;
|
||||
}
|
||||
thead tr {
|
||||
border-bottom: 1px solid $gray-600;
|
||||
border-bottom: 1px solid $spaceblue-600;
|
||||
}
|
||||
tbody tr {
|
||||
border-bottom: 1px solid $gray-800;
|
||||
border-bottom: 1px solid $spaceblue-800;
|
||||
&:last-child {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.wp-block-calendar table,
|
||||
.wp-block-table.is-style-stripes table {
|
||||
@extend .table-striped;
|
||||
.wp-block-table.is-style-stripes {
|
||||
border-bottom: none;
|
||||
table {
|
||||
@extend .table-striped;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* post page pagination */
|
||||
.post-page-numbers {
|
||||
@extend .text-decoration-none;
|
||||
@extend .page-item;
|
||||
&.current {
|
||||
@extend .active;
|
||||
& .page-link {
|
||||
@extend .text-decoration-none;
|
||||
color: $spaceblue-100 !important;
|
||||
background-color: $spaceblue-600 !important;
|
||||
border-color: $spaceblue-600 !important;
|
||||
&:hover {
|
||||
@extend .text-decoration-none;
|
||||
color: $spaceblue-100 !important;
|
||||
background-color: $spaceblue-600 !important;
|
||||
border-color: $spaceblue-600 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
@extend .text-decoration-none;
|
||||
}
|
||||
& .page-link {
|
||||
@extend .text-decoration-none;
|
||||
color: $gray-200;
|
||||
background-color: inherit !important;
|
||||
border: 1px solid $spaceblue-600;
|
||||
&:hover {
|
||||
color: $spaceblue-800;
|
||||
background-color: $primary !important;
|
||||
border: 1px solid $spaceblue-600;
|
||||
}
|
||||
@extend .page-item, .active;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* forms and search */
|
||||
label {
|
||||
@extend .form-label;
|
||||
}
|
||||
|
||||
.form-control,
|
||||
input.form-control {
|
||||
color: $gray-200;
|
||||
background-color: $spaceblue-900 !important;
|
||||
border-color: $spaceblue-600;
|
||||
&:focus {
|
||||
border-color: $input-focus-border-color;
|
||||
color: $gray-200;
|
||||
}
|
||||
&::-ms-clear,
|
||||
&::-ms-reveal { display: none; }
|
||||
&::-webkit-input-placeholder, /* WebKit, Blink, Edge */
|
||||
&:-ms-input-placeholder, /* Internet Explorer 10-11 */
|
||||
&::-ms-input-placeholder, /* Microsoft Edge */
|
||||
&::placeholder /* Most modern browsers support this now. */
|
||||
{
|
||||
color: $spaceblue-700 !important;
|
||||
}
|
||||
&:-moz-placeholder, /* Mozilla Firefox 4 to 18 */
|
||||
&::-moz-placeholder { /* Mozilla Firefox 19+ */
|
||||
color: $spaceblue-700 !important;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
input,
|
||||
.wp-block-search .wp-block-search__input,
|
||||
form input {
|
||||
@extend .form-control;
|
||||
color: $gray-200;
|
||||
&:focus {
|
||||
border-color: $input-focus-border-color;
|
||||
color: $gray-200;
|
||||
}
|
||||
&::-ms-clear,
|
||||
&::-ms-reveal { display: none; }
|
||||
&::-webkit-input-placeholder, /* WebKit, Blink, Edge */
|
||||
&:-ms-input-placeholder, /* Internet Explorer 10-11 */
|
||||
&::-ms-input-placeholder, /* Microsoft Edge */
|
||||
&::placeholder /* Most modern browsers support this now. */
|
||||
{
|
||||
color: $spaceblue-700 !important;
|
||||
}
|
||||
&:-moz-placeholder, /* Mozilla Firefox 4 to 18 */
|
||||
&::-moz-placeholder { /* Mozilla Firefox 19+ */
|
||||
color: $spaceblue-700 !important;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
button,
|
||||
|
@ -306,10 +236,10 @@ form button {
|
|||
@extend .btn;
|
||||
@extend .btn-primary;
|
||||
}
|
||||
.btn-primary, button, .wp-block-search .wp-block-search__button, form button, .wp-block-button:not(.is-style-outline) .wp-block-button__link {
|
||||
box-shadow: inherit;
|
||||
}
|
||||
|
||||
select {
|
||||
@extend .form-select;
|
||||
}
|
||||
|
||||
/* Meetings plugin styling changes */
|
||||
@import "meetings-plugin";
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
* standard "page/multi-post index/listing" & "single-blog-post" header styles
|
||||
*/
|
||||
function get_page_multi_heading( $content_str = '' ) {
|
||||
$class = 'fw-light text-gray-400 mb-4 border-bottom border-dashed border-spaceblue-600';
|
||||
$class = 'fw-light text-muted mb-4 border-bottom border-dashed border-spaceblue-600';
|
||||
return '<h1 class="' . $class . '">' . $content_str . '</h1>';
|
||||
}
|
||||
function get_post_single_heading( $content_str = '' ) {
|
||||
|
|
|
@ -19,7 +19,7 @@ $seventythreek_aria_label = ! empty( $args['aria_label'] ) ? 'aria-label="' . es
|
|||
<form role="search" <?php echo $seventythreek_aria_label; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Escaped above. ?> method="get" class="search-form flex-fill flex-sm-grow-0" action="<?php echo esc_url( home_url( '/' ) ); ?>">
|
||||
<div class="d-flex flex-nowrap">
|
||||
<label id="<?php echo esc_attr( $seventythreek_unique_id ) . '-label'; ?>" for="<?php echo esc_attr( $seventythreek_unique_id ); ?>" aria-hidden class="form-label d-none"><?php _e( 'Search…', 'seventythreek' ); // phpcs:ignore: WordPress.Security.EscapeOutput.UnsafePrintingFunction -- core trusts translations ?></label>
|
||||
<input type="search" id="<?php echo esc_attr( $seventythreek_unique_id ); ?>" class="form-control me-2 tek-search-input" value="<?php echo get_search_query(); ?>" name="s" aria-labelledby="<?php echo esc_attr( $seventythreek_unique_id ) . '-label'; ?>" placeholder="Search blog…" />
|
||||
<input type="search" id="<?php echo esc_attr( $seventythreek_unique_id ); ?>" class="form-control me-2 tek-search-input" value="<?php echo get_search_query(); ?>" name="s" aria-labelledby="<?php echo esc_attr( $seventythreek_unique_id ) . '-label'; ?>" placeholder="Search…" />
|
||||
<button type="submit" class="btn btn-primary" title="Search">
|
||||
<?php echo inline_svg( 'bsi-search', array( 'div_class' => 'icon baseline' ) ); ?>
|
||||
</button>
|
||||
|
|
Loading…
Reference in a new issue