.bw-app {
position: absolute; display: block; top: 0%; left: 0%; max-width: 100%; width: 100%; min-height: 100%; overflow-x: hidden; overflow-y: visible;
}
.bw-full-back {
// Position position: absolute; top: 0%; left: 0%; bottom: 0%; right: 0%; // Grid Layout display: grid; grid-template-rows: 1fr; grid-template-columns: 1fr; place-items: center; // Coloring background-color: $back-color; color: $white-color; // Container .bw-full-back-container { // Transform and sizing transform: translateY(-25%); max-width: 25%; margin: 0pt $spacing-unit; @include on-mobile { max-width: 75%; } // Title .bw-full-back-page-title { padding: $spacing-unit 0pt; color: $white-color; border-bottom: 1px solid $white-color; } // Content .bw-full-back-page-content { margin: 2*$spacing-unit 0pt; } // Link .bw-full-back-page-links { display: flex; flex-direction: row-reverse; .bw-full-back-page-link { @extend .bw-border-button; border-color: $white-color !important; padding: $spacing-unit/2 $spacing-unit !important; &:hover { background-color: $white-color; color: black; } } } }
}
// Hide on desktop, show on mobile .bw-show-on-mobile {
display: none; @include on-mobile { display: inline-block; }
}
// Sizing .bw-mega { font-size: $mega-font-size; } .bw-large { font-size: $large-font-size; } .bw-medium { font-size: $medium-font-size; } .bw-normal { font-size: $normal-font-size; } .bw-small { font-size: $small-font-size; }
// Basic header with action button availability .bw-header {
// Flex systme display: flex; flex-direction: row; align-items: stretch; // Spacing and border margin: $spacing-unit 0pt; border-bottom: 1px solid; // Title button .bw-title { flex: 1; margin: 0; color: inherit; } // Action button .bw-action { flex: 0; background-color: inherit; border: none; color: inherit; padding: $spacing-unit; }
}
// Front page header .bw-page-header {
@extend .bw-header; align-items: center !important; // Front header action .bw-action { @include cutout; padding: $spacing-unit 4*$spacing-unit/3 !important; background-color: $back-color !important; color: $white-color !important; }
}
// Content gutters .bw-content-gutters {
display: block; max-width: $gutters-width; margin-left: auto; margin-right: auto; @include on-tablet { max-width: 100%; }
}
// Grid rows .bw-row {
display: grid; grid-template-rows: 1fr; grid-template-columns: repeat(12, 1fr); grid-column-gap: $spacing-unit; // Create grid columns @for $i from 1 through 12 { .bw-col-#{$i} { grid-column-start: span $i; @include on-tablet { grid-column-start: span 12; }; } }
}
// Custom buttons .bw-text-button {
border: none; background: none; display: inline-block; color: inherit; padding: $spacing-unit;
} .bw-border-button {
@extend .bw-text-button; border: 1px solid; border-color: $back-color;
} .bw-cutout-button {
@include cutout; border: none; display: inline-block; transition: box-shadow 0.5s; &:hover { box-shadow: none; }
} .bw-raised-button {
@include raised; border: none; display: inline-block; transition: box-shadow 0.5s; &:hover { box-shadow: none; }
} .bw-emph-button {
@extend .bw-cutout-button;
}
// Cutout section (appears as a recessed section that uses the back color) .bw-cutout {
@include block-cutout; .bw-border-button { border-color: $white-color; } .bw-emph-button { @extend .bw-raised-button; }
}
// Wraps an element with a horizontal scroll bar .bw-horiz-scroll-wrapper {
display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
// Basic horizontal rule .bw-horiz-rule {
display: block; width: 100%; border-bottom: 1px solid;
}
// Thumbnail image .bw-thumbnail {
max-width: 200px; max-height: 200px;
}