2023-03-04
This commit is contained in:
348
src/scss/application.scss
Normal file
348
src/scss/application.scss
Normal file
@@ -0,0 +1,348 @@
|
||||
/*
|
||||
* This is a manifest file that'll be compiled into application.css, which will include all the files
|
||||
* listed below.
|
||||
*
|
||||
* Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
|
||||
* vendor/assets/stylesheets directory can be referenced here using a relative path.
|
||||
*
|
||||
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
|
||||
* compiled file so the styles you add here take precedence over styles defined in any other CSS
|
||||
* files in this directory. Styles in this file should be added after the last require_* statement.
|
||||
* It is generally better to create a new file per style scope.
|
||||
*
|
||||
*= require_tree .
|
||||
*= require_self
|
||||
*/
|
||||
|
||||
@import "../../node_modules/@teamsnap/teamsnap-ui/src/css/teamsnap-ui.scss";
|
||||
|
||||
|
||||
$color-success: #b7e1cd;
|
||||
$color-danger: #f4c7c3;
|
||||
$color-neutral: #acc9fe;
|
||||
$color-warning: rgb(249, 228, 180);
|
||||
$color-grey-100: #f8f9fa;
|
||||
$color-grey-200: #e9ecef;
|
||||
$color-grey-300: #dee2e6;
|
||||
$color-grey-400: #ced4da;
|
||||
$color-grey-500: #adb5bd;
|
||||
$color-grey-600: #6c757d;
|
||||
$color-grey-700: #495057;
|
||||
$color-grey-800: #343a40;
|
||||
$color-grey-900: #212529;
|
||||
$row-height: 14px;
|
||||
$monospace-font: "Inconsolata", monospace;
|
||||
|
||||
|
||||
// Components
|
||||
@import "components/progress";
|
||||
|
||||
:root {
|
||||
--bc-text-muted:#6c757d;
|
||||
--bc-avail-color-yes: $cu-positive;
|
||||
--bc-avail-color-no: $cu-negative;
|
||||
--bc-avail-color-maybe:#113b63;
|
||||
}
|
||||
|
||||
.availability-bar {
|
||||
&.going {
|
||||
background-color: $ts-green;
|
||||
}
|
||||
|
||||
&.not-going {
|
||||
background-color: $ts-red;
|
||||
}
|
||||
|
||||
&.maybe {
|
||||
background-color: $ts-blue;
|
||||
}
|
||||
|
||||
&.unknown {
|
||||
background-color: $ts-grey;
|
||||
}
|
||||
}
|
||||
|
||||
header.Header {
|
||||
background: #323669;
|
||||
padding: 8px 0;
|
||||
box-shadow: 0 4px 0 rgba(0, 0, 25, 0.1);
|
||||
border-bottom: 1px solid #d6d6d6;
|
||||
color: white;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: rgb(246, 246, 246);
|
||||
}
|
||||
|
||||
/* .u-padSm.u-border.u-borderRadiusLg.u-spaceEndsSm.u-maxWidthXs */
|
||||
|
||||
.event-card {
|
||||
font-family: "Open Sans", Helvetica, sans-serif;
|
||||
border: 1px solid #e6e6e6;
|
||||
border-radius: 8px;
|
||||
max-width: 480px;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
background: white;
|
||||
|
||||
.title {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.event-card-body {
|
||||
padding: 8px 8px 8px 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.event-card-body {
|
||||
> .availability-bar {
|
||||
margin: 4px;
|
||||
|
||||
&.fullwidth {
|
||||
margin-top: 4px;
|
||||
margin-bottom: -8px;
|
||||
margin-left: -8px;
|
||||
margin-right: -8px;
|
||||
}
|
||||
}
|
||||
|
||||
.availability-bar.fullwidth .progress {
|
||||
margin-left: -8px;
|
||||
margin-right: -8px;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.event-card {
|
||||
.date, .location {
|
||||
color: #7a7a7a;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.opponent {}
|
||||
|
||||
.Button span {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.event-card-footer {
|
||||
padding: 8px;
|
||||
border-radius: 0px 0px 8px 8px;
|
||||
background-color: rgb(251, 251, 251);
|
||||
border-top: solid 1px rgb(214, 214, 214);
|
||||
}
|
||||
}
|
||||
|
||||
.event-card-footer div {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.Header-bannerLogo, .Header-bannerTitle {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
.Header-bannerLogo img {
|
||||
height: 36px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.Header-bannerTitle {
|
||||
font-family: "Helvetica", sans-serif;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
color: white;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.benchcoach-nav {
|
||||
background-color: #323669;
|
||||
margin-bottom: 2em;
|
||||
padding: 0.5em;
|
||||
color: white;
|
||||
}
|
||||
|
||||
a.Panel-row {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.benchcoach-nav h3 {
|
||||
font-family: "Helvetica", sans-serif;
|
||||
font-weight: bolder;
|
||||
color: white;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.lineup-slot .Panel-cell {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
div[id^="event-lineup"] {
|
||||
max-width: 576px;
|
||||
counter-reset: lineup-sequence-counter 0;
|
||||
}
|
||||
|
||||
.lineup-slot {
|
||||
counter-increment: lineup-sequence-counter 1;
|
||||
|
||||
.Panel-cell {
|
||||
&.Panel-cell--header {
|
||||
background: rgba(256, 256, 256, 0);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
[class*="availability-status-code"]::before {
|
||||
padding-right: 6px;
|
||||
font-family: "bootstrap-icons";
|
||||
}
|
||||
}
|
||||
|
||||
.lineup-slot .availability-status-code-1 .icon {
|
||||
color: $ts-green;
|
||||
}
|
||||
|
||||
.lineup-slot .availability-status-code-2 .icon {
|
||||
color: $ts-blue;
|
||||
}
|
||||
|
||||
.lineup-slot .availability-status-code-0 .icon {
|
||||
color: $ts-red;
|
||||
}
|
||||
|
||||
.lineup-slot {
|
||||
.availability-status-code-nil .icon, .availability-status-code- .icon {
|
||||
color: $ts-grey;
|
||||
}
|
||||
}
|
||||
|
||||
li .availability-status-code- {
|
||||
content: "\F50B";
|
||||
color: var(--bs-secondary);
|
||||
}
|
||||
|
||||
.lineup-slot {
|
||||
line-height: 100%;
|
||||
vertical-align: middle;
|
||||
span {
|
||||
margin:auto;
|
||||
}
|
||||
.lastname {
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.jerseynumber {
|
||||
text-transform: uppercase;
|
||||
font-weight: light;
|
||||
color: var(--bc-text-muted);
|
||||
font-size: 0.8em;
|
||||
|
||||
// &::before {
|
||||
// content: "-";
|
||||
// margin-right: 4px;
|
||||
margin-left: 4px;
|
||||
// }
|
||||
}
|
||||
|
||||
button {
|
||||
margin-right: 0.5ch;
|
||||
}
|
||||
.sequence {
|
||||
width: 2.4ch;
|
||||
text-align: right;
|
||||
margin-right: 0.3ch;
|
||||
|
||||
&::before {
|
||||
content: counter(lineup-sequence-counter);
|
||||
}
|
||||
}
|
||||
|
||||
.drag-handle {
|
||||
width: 2ch;
|
||||
}
|
||||
|
||||
.position-select-box {
|
||||
width: 10ch;
|
||||
}
|
||||
|
||||
.Panel-cell {
|
||||
&:has(.sequence), &:has(.drag-handle), &:has(.position-select-box) {
|
||||
flex: 0 0 0% !important;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
div[id^="event-lineup"] .Panel {
|
||||
&.position-only .Panel-cell:has(.sequence), &.bench .Panel-cell:has(.sequence), &.out .Panel-cell:has(.sequence){
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.out {
|
||||
.Panel-cell {
|
||||
&:has(.sequence), .drag-handle, .SelectBox {
|
||||
// display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.Tooltip:after {
|
||||
padding: 2px !important;
|
||||
font-size: inherit !important;
|
||||
}
|
||||
|
||||
@media (max-width: 480px){
|
||||
.Panel--full {
|
||||
border-radius: 0;
|
||||
margin-right: -16px;
|
||||
margin-left: -16px;
|
||||
}}
|
||||
|
||||
.lineup-email {
|
||||
font-family: "Helvetica", sans-serif;
|
||||
|
||||
.title-cell {
|
||||
font-weight:bold;
|
||||
background-color:#323669;
|
||||
color:#fff;
|
||||
padding:2px 5px;
|
||||
text-transform: uppercase;
|
||||
|
||||
&.out {
|
||||
background-color: rgb(244, 199, 195);
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
.sequence-cell {
|
||||
font-weight:bold;
|
||||
padding: 1px 5px;
|
||||
text-align: left
|
||||
}
|
||||
|
||||
.name-cell {
|
||||
width:200px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.position-label-cell {
|
||||
font-weight: bold;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.Panel .Panel{
|
||||
// padding: 0;
|
||||
// border-radius: 0;
|
||||
border: none;
|
||||
// border-top: 1px solid #d6d6d6;
|
||||
// border-bottom: 1px solid #d6d6d6;
|
||||
margin: 0;
|
||||
}
|
||||
Reference in New Issue
Block a user