meetings plugin styling etc
This commit is contained in:
parent
1e68eac502
commit
0286759b4a
8 changed files with 497 additions and 276 deletions
|
@ -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
|
||||
|
|
|
@ -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";
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -23,13 +23,14 @@ body {
|
|||
}
|
||||
|
||||
/* links */
|
||||
a,
|
||||
#tsml a {
|
||||
a {
|
||||
&:hover, &:focus {
|
||||
text-decoration-color: $gray-200 !important;
|
||||
}
|
||||
}
|
||||
|
||||
#tsml a {
|
||||
@extend a;
|
||||
}
|
||||
|
||||
|
||||
/* post styling */
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue