meetings plugin styling etc

This commit is contained in:
Adam Piontek 2021-08-02 21:32:27 -04:00
parent 1e68eac502
commit 0286759b4a
8 changed files with 497 additions and 276 deletions

View file

@ -4,7 +4,7 @@ $theme-colors: map-merge($theme-colors, $custom-colors);
/* general styles */
$link-color: $gray-200;
$link-decoration: underline;
$link-shade-percentage: 20% !default;
$link-shade-percentage: 20%;
$link-hover-color: $primary;
/* tables */
@ -26,18 +26,31 @@ $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-bg: $component-hover-bg;
$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-dark-divider-bg: $spaceblue-600;
$dropdown-dark-link-color: $light;
$dropdown-dark-link-hover-color: $component-hover-color;
$dropdown-dark-link-hover-bg: $component-hover-bg; // was $spaceblue-600
$dropdown-dark-link-active-color: $component-active-color;
$dropdown-dark-link-active-bg: $component-active-bg;
// $dropdown-link-active-color: tint-color($dark, 10%);
// $dropdown-link-active-bg: $spaceblue-700;
/* alerts */
// scss-docs-start alert-variables
$alert-padding-y: $spacer;
$alert-padding-x: $spacer;
$alert-margin-bottom: 1rem;
$alert-border-radius: $border-radius;
$alert-link-font-weight: $font-weight-bold;
$alert-border-width: $border-width;
$alert-bg-scale: -40%;
$alert-border-scale: -30%;
$alert-color-scale: 60%;
$alert-dismissible-padding-r: $alert-padding-x * 3; // 3x covers width of x plus default padding on either side
// scss-docs-end alert-variables

View file

@ -37,9 +37,9 @@
// @import "../../node_modules/bootstrap/scss/breadcrumb";
@import "../../node_modules/bootstrap/scss/pagination";
// @import "../../node_modules/bootstrap/scss/badge";
// @import "../../node_modules/bootstrap/scss/alert";
@import "../../node_modules/bootstrap/scss/alert";
// @import "../../node_modules/bootstrap/scss/progress";
// @import "../../node_modules/bootstrap/scss/list-group";
@import "../../node_modules/bootstrap/scss/list-group";
// @import "../../node_modules/bootstrap/scss/close";
// @import "../../node_modules/bootstrap/scss/toasts";
// @import "../../node_modules/bootstrap/scss/modal";

View file

@ -4,10 +4,10 @@ $blue: #0d6efd;
$indigo: #6610f2;
$purple: #6f42c1;
$pink: #d63384;
$red: #dc3545;
$red: #eb2744;
$orange: #fd7e14;
$yellow: #ffc107;
$green: #198754;
$yellow: #EECF6D;
$green: #1db954;
$teal: #20c997;
$cyan: #0dcaf0;
// scss-docs-end color-variables
@ -30,7 +30,7 @@ $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
// 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;
$spaceblue-200: #93a6c8;
@ -47,7 +47,7 @@ $spaceblue-900: #151c28;
// scss-docs-start theme-color-variables
$primary: #51A39F;
$secondary: $gray;
$secondary: #BF98A0;
$success: $green;
$info: $cyan;
$warning: $yellow;
@ -77,3 +77,6 @@ $body-color: $gray-200;
$text-muted: $gray-400;
$component-active-color: $dark;
$component-active-bg: $primary;
$component-hover-color: tint-color($light, 5%);
$component-hover-bg: rgba($white, .125);

View file

@ -229,14 +229,14 @@ nav#top-navbar-grid-outer {
text-transform: inherit !important;
&:hover {
@extend .text-decoration-none;
color: $dropdown-link-hover-color;
background-color: $dropdown-link-hover-bg;
color: $dropdown-dark-link-hover-color;
background-color: $dropdown-dark-link-hover-bg;
}
}
&.active {
.dropdown-item.top-navbar-grid-main-menu-item-link {
color: $dropdown-link-active-color;
background-color: $dropdown-link-active-bg;
color: $dropdown-dark-link-active-color;
background-color: $dropdown-dark-link-active-bg;
}
}
}

View file

@ -1,11 +1,29 @@
#tsml {
.form-control {
background-color: $input-bg;
border: 1px solid $primary;
&::-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: shade-color($primary, 45%) !important;
}
&:-moz-placeholder, /* Mozilla Firefox 4 to 18 */
&::-moz-placeholder { /* Mozilla Firefox 19+ */
color: shade-color($primary, 45%) !important;
opacity: 1;
}
}
& .btn, & .btn a {
text-decoration: none !important;
}
.btn-default {
.btn.btn-default, a.btn.btn-default {
color: $spaceblue-800;
background-color: $primary;
border: 1px solid $primary;
@ -14,41 +32,213 @@
}
&.toggle-view {
color: $primary;
background-color: inherit;
background-color: $dark;
border: 1px solid $primary;
&:hover {
color: $spaceblue-900;
background-color: tint-color($primary, 30%);
color: $pagination-hover-color;
background-color: $pagination-hover-bg;
border: 1px solid $primary;
}
&.active {
color: $spaceblue-900;
color: $dark;
background-color: $primary;
border: 1px solid $primary;
box-shadow: none !important;
&:hover {
color: $spaceblue-900;
color: $dark;
background-color: $primary;
border: 1px solid $primary;
box-shadow: none !important;
}
}
}
}
.table-wrapper {
color: #fff;
}
.dropdown-menu {
color: $gray-200;
// background-color: $spaceblue-900;
@extend .dropdown-menu;
@extend .dropdown-menu-dark;
.divider {
background-color: $dropdown-dark-divider-bg;
}
}
.dropdown-menu > li > a {
color: $gray-200 !important;
text-decoration: none !important;
@extend .dropdown-item;
color: $gray-300 !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;
color: $dropdown-dark-link-active-color !important;
background-color: $dropdown-dark-link-active-bg !important;
}
.dropdown-menu > li > a:hover {
color: $dropdown-dark-link-hover-color !important;
background-color: $dropdown-dark-link-hover-bg !important;
}
}
// for some reason this needs to be outside of the above styling
#tsml {
#meetings {
.results {
@extend .mt-3;
table {
@extend .table;
@extend .table-dark;
@extend .table-striped;
thead {
th {
padding: $table-cell-padding-y $table-cell-padding-x !important;
}
}
tbody {
tr {
@include media-breakpoint-down(md) {
background-color: $dark;
border-color: $spaceblue-600;
}
}
}
}
}
}
}
#tsml .table-striped > tbody > tr:nth-of-type(2n+1),
#tsml #meetings .results table > tbody > tr:nth-of-type(2n+1) {
background-color: var(--bs-table-bg) !important;
box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
// @include media-breakpoint-down(md) {
// background-color: var(--bs-table-bg) !important;
// }
}
#tsml #meetings .results table tbody tr.attendance-online .region,
#tsml #meetings .results table tbody tr.attendance-inactive .region {
opacity: inherit;
}
#tsml #meetings .results table tbody tr.attendance-online .location small {
color: $success;
}
#tsml #meetings .results table tbody tr.attendance-inactive .location small {
color: $danger;
}
#tsml #meetings .results {
.alert {
@extend .alert;
}
.alert-primary {
@extend .alert-primary;
}
.alert-secondary {
@extend .alert-secondary;
}
.alert-success {
@extend .alert-success;
}
.alert-danger {
@extend .alert-danger;
}
.alert-warning {
@extend .alert-warning;
}
.alert-info {
@extend .alert-info;
}
.alert-light {
@extend .alert-light;
}
.alert-dark {
@extend .alert-dark;
}
}
#tsml .page-header {
border-bottom-color: $spaceblue-600 !important;
border-bottom-style: dashed !important;
}
#tsml {
.panel {
@extend .card;
background-color: shade-color($gray-800, 50%) !important;
color: $body-color !important;
&.panel-default {
ul {
&.list-group {
@extend .list-group;
@extend .list-group-flush;
background-color: shade-color($gray-800, 50%) !important;
color: $body-color !important;
li, a {
&.list-group-item {
@extend .list-group-item;
@extend .list-group-item-dark;
background-color: shade-color($gray-800, 50%) !important;
color: $body-color !important;
&.meeting-info {
ul {
li {
hr {
border-color: $spaceblue-300;
}
}
}
}
}
.list-group-item-heading {
color: $text-muted;
}
}
}
}
.panel-heading {
@extend .card-body;
background-color: shade-color($gray-800, 50%) !important;
padding: 1rem 1rem .5rem 1rem !important;
.panel-title {
@extend .card-title;
background-color: inherit !important;
}
}
}
}
}
#tsml #meeting a.btn.btn-default {
@extend .btn;
@extend .btn-outline-primary;
@extend .btn-sm;
color: $primary !important;
margin-bottom: .25rem !important;
// background-color: $spaceblue-900 !important;
// border: 1px solid $primary !important;
svg.icon {
height: 1em;
width: 1em;
top: -0.15em;
position: relative;
}
&:hover {
color: $spaceblue-800 !important;
background-color: $primary !important;
// @extend .btn, :hover;
// @extend .btn-primary, :hover;
}
}
#tsml #meeting .panel.panel-expandable.expanded .panel-heading {
border-color: $spaceblue-700 !important;
}
#tsml #meeting #feedback .panel .list-group .list-group-item button {
@extend .btn;
@extend .btn-primary;
@extend .btn-sm;
}

View file

@ -23,13 +23,14 @@ body {
}
/* links */
a,
#tsml a {
a {
&:hover, &:focus {
text-decoration-color: $gray-200 !important;
}
}
#tsml a {
@extend a;
}
/* post styling */