From d938a333c208c67c890a9e4888d4cbabcc2b1e87 Mon Sep 17 00:00:00 2001 From: Dylan Bolger Date: Wed, 21 Mar 2018 12:19:35 -0500 Subject: working on web --- assets/sass/components/_button.scss | 156 ----------- assets/sass/components/_form.scss | 275 ------------------- assets/sass/components/_gallery.scss | 218 --------------- assets/sass/components/_icon.scss | 17 -- assets/sass/components/_image.scss | 169 ------------ assets/sass/components/_list.scss | 380 --------------------------- assets/sass/components/_panel-banner.scss | 90 ------- assets/sass/components/_panel-spotlight.scss | 81 ------ assets/sass/components/_panel.scss | 300 --------------------- assets/sass/components/_table.scss | 81 ------ 10 files changed, 1767 deletions(-) delete mode 100644 assets/sass/components/_button.scss delete mode 100644 assets/sass/components/_form.scss delete mode 100644 assets/sass/components/_gallery.scss delete mode 100644 assets/sass/components/_icon.scss delete mode 100644 assets/sass/components/_image.scss delete mode 100644 assets/sass/components/_list.scss delete mode 100644 assets/sass/components/_panel-banner.scss delete mode 100644 assets/sass/components/_panel-spotlight.scss delete mode 100644 assets/sass/components/_panel.scss delete mode 100644 assets/sass/components/_table.scss (limited to 'assets/sass/components') diff --git a/assets/sass/components/_button.scss b/assets/sass/components/_button.scss deleted file mode 100644 index 9ce38c2..0000000 --- a/assets/sass/components/_button.scss +++ /dev/null @@ -1,156 +0,0 @@ -/// -/// Ethereal by HTML5 UP -/// html5up.net | @ajlkn -/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) -/// - -/* Button */ - - input[type="submit"], - input[type="reset"], - input[type="button"], - button, - .button { - @include vendor('appearance', 'none'); - @include vendor('transition', ( - 'background-color #{_duration(transition)} ease-in-out', - 'box-shadow #{_duration(transition)} ease-in-out', - 'color #{_duration(transition)} ease-in-out' - )); - background-color: transparent; - border: 0; - border-radius: _size(border-radius); - box-shadow: inset 0 0 0 2px _palette(border); - color: _palette(fg-bold) !important; - cursor: pointer; - display: inline-block; - font-family: _font(family-heading); - font-size: 0.6rem; - font-weight: _font(weight-heading); - height: _size(element-height) * 1.1; - letter-spacing: 0.15rem; - line-height: _size(element-height) * 1.1; - padding: 0 1.5rem 0 (1.5rem + 0.15rem); - text-align: center; - text-decoration: none; - text-transform: uppercase; - white-space: nowrap; - - &:hover { - box-shadow: inset 0 0 0 2px _palette(accent3); - color: _palette(accent3) !important; - } - - &:active { - background-color: transparentize(_palette(accent3), 0.875); - } - - &.icon { - &:before { - display: inline-block; - position: relative; - top: -0.075rem; - vertical-align: middle; - font-size: 0.8rem; - margin: 0 0.375rem 0 -0.325rem; - } - - &.circle { - position: relative; - width: _size(element-height) * 1.25; - height: _size(element-height) * 1.25; - line-height: _size(element-height) * 1.25; - text-indent: _size(element-height) * 1.25; - border-radius: 100%; - overflow: hidden; - padding: 0; - letter-spacing: 0; - - &:before { - display: block; - position: absolute; - top: 0; - left: 0; - width: inherit; - height: inherit; - font-size: 1.25rem; - line-height: inherit; - margin: 0; - text-indent: 0; - } - - &.fa-angle-left { - &:before { - position: relative; - left: -0.1rem; - font-size: 1.75rem; - } - } - - &.fa-angle-right { - &:before { - position: relative; - left: 0.1rem; - font-size: 1.75rem; - } - } - } - } - - &.fit { - display: block; - margin: 0 0 (_size(element-margin) * 0.5) 0; - width: 100%; - } - - &.small { - font-size: 0.4rem; - height: _size(element-height) * 0.75; - line-height: _size(element-height) * 0.75; - padding: 0 1.25rem 0 (1.25rem + 0.15rem); - } - - &.large { - font-size: 0.8rem; - height: _size(element-height) * 1.325; - line-height: _size(element-height) * 1.325; - padding: 0 2rem 0 (2rem + 0.15rem); - } - - &.special { - background-color: rgba(_palette(fg-bold), 1); - box-shadow: none; - color: _palette(bg) !important; - - &.color1 { - color: _palette(accent1) !important; - } - - &.color2 { - color: _palette(accent2) !important; - } - - &.color3 { - color: _palette(accent3) !important; - } - - &.color4 { - color: _palette(accent4) !important; - } - - &:hover { - background-color: _palette(accent3); - } - - &:active { - background-color: desaturate(darken(_palette(accent3), 6), 3); - } - } - - &.disabled, - &:disabled { - @include vendor('pointer-events', 'none'); - cursor: default; - opacity: 0.5; - } - } \ No newline at end of file diff --git a/assets/sass/components/_form.scss b/assets/sass/components/_form.scss deleted file mode 100644 index 9ff5ab2..0000000 --- a/assets/sass/components/_form.scss +++ /dev/null @@ -1,275 +0,0 @@ -/// -/// Ethereal by HTML5 UP -/// html5up.net | @ajlkn -/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) -/// - -/* Form */ - - $gutter: (_size(element-margin) * 1); - - form { - - @include vendor('display', 'flex'); - @include vendor('flex-wrap', 'wrap'); - width: calc(100% + #{$gutter * 2}); - margin: ($gutter * -1) 0 _size(element-margin) ($gutter * -1); - - > .field { - @include vendor('flex-grow', '0'); - @include vendor('flex-shrink', '0'); - padding: $gutter 0 0 $gutter; - width: calc(100% - #{$gutter * 1}); - - &.half { - width: calc(50% - #{$gutter * 0.5}); - } - - &.third { - width: calc(#{100% / 3} - #{$gutter * (1 / 3)}); - } - - &.quarter { - width: calc(25% - #{$gutter * 0.25}); - } - } - - > .actions { - @include vendor('flex-grow', '0'); - @include vendor('flex-shrink', '1'); - margin: $gutter 0 0 $gutter; - } - } - - label { - color: _palette(fg-bold); - display: block; - font-family: _font(family-heading); - font-size: 0.8rem; - font-weight: _font(weight-heading); - margin: 0 0 (_size(element-margin) * 0.325) 0; - } - - input[type="text"], - input[type="password"], - input[type="email"], - input[type="tel"], - select, - textarea { - @include vendor('appearance', 'none'); - background: transparent; - border: solid 2px _palette(border); - border-radius: _size(border-radius); - color: inherit; - display: block; - outline: 0; - padding: 0 0.75rem; - text-decoration: none; - width: 100%; - - &:invalid { - box-shadow: none; - } - - &:focus { - border-color: _palette(accent3); - } - } - - option { - background-color: _palette(fg-bold); - color: _palette(bg); - } - - .select-wrapper { - @include icon; - display: block; - position: relative; - - &:before { - display: block; - content: '\f107'; - position: absolute; - top: 0; - right: 0; - width: _size(element-height); - height: _size(element-height); - line-height: _size(element-height); - color: _palette(fg); - pointer-events: none; - text-align: center; - - body.is-ie & { - line-height: 2.5; - } - } - - select::-ms-expand { - display: none; - } - } - - input[type="text"], - input[type="password"], - input[type="email"], - select { - height: _size(element-height); - } - - textarea { - padding: 0.75rem 1rem; - } - - input[type="checkbox"], - input[type="radio"], { - @include vendor('appearance', 'none'); - display: block; - float: left; - margin-right: -2rem; - opacity: 0; - width: 1rem; - z-index: -1; - - & + label { - @include icon; - position: relative; - color: _palette(fg); - cursor: pointer; - display: inline-block; - font-size: 1rem; - font-weight: _font(weight); - margin-bottom: 0; - padding-left: (_size(element-height) * 0.6) + 1rem; - padding-right: 1rem; - - &:before { - content: ''; - display: inline-block; - position: absolute; - top: 0; - left: 0; - width: (_size(element-height) * 0.6); - height: (_size(element-height) * 0.6); - line-height: (_size(element-height) * 0.575); - background: _palette(border-bg); - border: solid 1px _palette(border); - border-radius: _size(border-radius); - color: _palette(bg); - text-align: center; - - body.is-ie & { - line-height: 1.5; - } - } - } - - &:checked + label { - &:before { - content: '\f00c'; - background: _palette(fg-bold); - border-color: _palette(fg-bold); - } - } - - &:focus + label { - &:before { - border-color: _palette(accent3); - box-shadow: 0 0 0 1px _palette(accent3); - } - } - - &:focus:checked + label { - &:before { - background: _palette(accent3); - } - } - - &.color1 { - & + label { - &:before { - color: _palette(accent1); - } - } - } - - &.color2 { - & + label { - &:before { - color: _palette(accent2); - } - } - } - - &.color3 { - & + label { - &:before { - color: _palette(accent3); - } - } - } - - &.color4 { - & + label { - &:before { - color: _palette(accent4); - } - } - } - } - - input[type="checkbox"] { - & + label { - &:before { - border-radius: _size(border-radius); - } - } - } - - input[type="radio"] { - & + label { - &:before { - border-radius: 100%; - } - } - } - - ::-webkit-input-placeholder { - color: _palette(fg-light) !important; - opacity: 1.0; - } - - :-moz-placeholder { - color: _palette(fg-light) !important; - opacity: 1.0; - } - - ::-moz-placeholder { - color: _palette(fg-light) !important; - opacity: 1.0; - } - - :-ms-input-placeholder { - color: _palette(fg-light) !important; - opacity: 1.0; - } - - .formerize-placeholder { - color: _palette(fg-light) !important; - opacity: 1.0; - } - - @include breakpoint(small) { - form { - margin: ($gutter * -1) 0 _size(element-margin) 0; - width: 100%; - - > .field { - padding: $gutter 0 0 0; - width: 100% !important; - } - - > .actions { - margin: $gutter 0 0 0; - } - } - } \ No newline at end of file diff --git a/assets/sass/components/_gallery.scss b/assets/sass/components/_gallery.scss deleted file mode 100644 index f54b0de..0000000 --- a/assets/sass/components/_gallery.scss +++ /dev/null @@ -1,218 +0,0 @@ -/// -/// Ethereal by HTML5 UP -/// html5up.net | @ajlkn -/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) -/// - -/* Gallery */ - - $pad: _size(pad); - $pad-small-tb: _size(pad-small-tb); - $pad-small-lr: _size(pad-small-lr); - - @include keyframes('gallery-modal-spinner') { - 0% { - @include vendor('transform', 'rotate(0deg)'); - } - - 100% { - @include vendor('transform', 'rotate(360deg)'); - } - } - - .gallery { - @include vendor('align-items', 'stretch'); - @include vendor('display', 'flex'); - height: 100%; - - > * { - width: 20rem; - height: 100%; - } - - .image { - display: block; - position: relative; - border-bottom: 0; - overflow: hidden; - - img { - @include vendor('transition', 'transform #{_duration(transition)} ease-in-out'); - } - - &:after { - @include vendor('transition', 'opacity #{_duration(transition)} ease-in-out'); - } - - &:hover { - img { - @include vendor('transform', 'scale(1.025)'); - } - - &:after { - opacity: 0; - } - } - } - - .group { - @include vendor('display', 'flex'); - @include vendor('flex-wrap', 'wrap'); - - > * { - height: 50%; - } - } - - .modal { - @include vendor('display', 'flex'); - @include vendor('align-items', 'center'); - @include vendor('justify-content', 'center'); - @include vendor('pointer-events', 'none'); - @include vendor('user-select', 'none'); - @include vendor('transition', ( - 'opacity #{_duration(gallery-lightbox-fadein)} ease', - 'visibility #{_duration(gallery-lightbox-fadein)}', - 'z-index #{_duration(gallery-lightbox-fadein)}' - )); - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: transparentize(_palette(bg), 1 - _misc(gallery-lightbox-opacity)); - opacity: 0; - outline: 0; - visibility: none; - z-index: 0; - - &:before { - @include vendor('animation', 'gallery-modal-spinner 1s infinite linear'); - @include vendor('transition', 'opacity #{_duration(gallery-lightbox-fadein) * 0.5} ease'); - @include vendor('transition-delay', '#{_duration(gallery-lightbox-fadein)}'); - content: ''; - display: block; - position: absolute; - top: 50%; - left: 50%; - width: 4rem; - height: 4rem; - margin: -2rem 0 0 -2rem; - background-image: svg-url(''); - background-position: center; - background-repeat: no-repeat; - background-size: 4rem; - opacity: 0; - } - - &:after { - content: ''; - display: block; - position: absolute; - top: 0.5rem; - right: 0.5rem; - width: 4rem; - height: 4rem; - background-image: svg-url(''); - background-position: center; - background-repeat: no-repeat; - background-size: 3rem; - cursor: pointer; - } - - .inner { - @include vendor('transform', 'translateY(0.75rem)'); - @include vendor('transition', ( - 'opacity #{_duration(gallery-lightbox-fadein) * 0.5} ease', - 'transform #{_duration(gallery-lightbox-fadein) * 0.5} ease' - )); - opacity: 0; - - img { - display: block; - max-width: 90vw; - max-height: 85vh; - box-shadow: 0 1rem 3rem 0 rgba(0, 0, 0, 0.35); - } - } - - &.visible { - @include vendor('pointer-events', 'auto'); - opacity: 1; - visibility: visible; - z-index: _misc(z-index-base) + 1000; - - &:before { - opacity: 1; - } - } - - &.loaded { - .inner { - @include vendor('transform', 'translateY(0)'); - @include vendor('transition', ( - 'opacity #{_duration(gallery-lightbox-fadein)} ease', - 'transform #{_duration(gallery-lightbox-fadein)} ease' - )); - opacity: 1; - } - - &:before { - @include vendor('transition-delay', '0s'); - opacity: 0; - } - } - } - } - - @include breakpoint(medium) { - .gallery { - .modal { - .inner { - img { - max-width: 100vw; - } - } - } - } - } - - @include breakpoint(small) { - .gallery { - @include vendor('flex-direction', 'column'); - height: auto; - - > * { - height: auto; - width: 100%; - } - - .image { - width: 100%; - height: 40rem; - } - - .group { - @include spans(33.33333%); - - .image { - height: 20rem; - } - } - } - } - - @include breakpoint(xsmall) { - .gallery { - .image { - height: 30rem; - } - - .group { - .image { - height: 12.5rem; - } - } - } - } \ No newline at end of file diff --git a/assets/sass/components/_icon.scss b/assets/sass/components/_icon.scss deleted file mode 100644 index ce4e37c..0000000 --- a/assets/sass/components/_icon.scss +++ /dev/null @@ -1,17 +0,0 @@ -/// -/// Ethereal by HTML5 UP -/// html5up.net | @ajlkn -/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) -/// - -/* Icon */ - - .icon { - @include icon; - position: relative; - border-bottom: none; - - > .label { - display: none; - } - } \ No newline at end of file diff --git a/assets/sass/components/_image.scss b/assets/sass/components/_image.scss deleted file mode 100644 index b428fb3..0000000 --- a/assets/sass/components/_image.scss +++ /dev/null @@ -1,169 +0,0 @@ -/// -/// Ethereal by HTML5 UP -/// html5up.net | @ajlkn -/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) -/// - -/* Image */ - - .image { - display: inline-block; - position: relative; - border: 0; - - &.filtered { - &:after { - @include gradient-background; - @include vendor('pointer-events', 'none'); - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - opacity: 1; - z-index: 1; - } - - &.tinted { - &:after { - @include gradient-background(true); - } - } - } - - &[data-position] { - img { - @include vendor('object-fit', 'cover'); - display: block; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - } - } - - &[data-position="top left"] { - img { - @include vendor('object-position', 'top left'); - } - } - - &[data-position="top"] { - img { - @include vendor('object-position', 'top'); - } - } - - &[data-position="top right"] { - img { - @include vendor('object-position', 'top right'); - } - } - - &[data-position="right"] { - img { - @include vendor('object-position', 'right'); - } - } - - &[data-position="bottom right"] { - img { - @include vendor('object-position', 'bottom right'); - } - } - - &[data-position="bottom"] { - img { - @include vendor('object-position', 'bottom'); - } - } - - &[data-position="bottom left"] { - img { - @include vendor('object-position', 'bottom left'); - } - } - - &[data-position="left"] { - img { - @include vendor('object-position', 'left'); - } - } - - &[data-position="center"] { - img { - @include vendor('object-position', 'center'); - } - } - - &[data-position="25% 25%"] { - img { - @include vendor('object-position', '25% 25%'); - } - } - - &[data-position="75% 25%"] { - img { - @include vendor('object-position', '75% 25%'); - } - } - - &[data-position="75% 75%"] { - img { - @include vendor('object-position', '75% 75%'); - } - } - - &[data-position="25% 75%"] { - img { - @include vendor('object-position', '25% 75%'); - } - } - - img { - display: block; - } - - &.left, - &.right { - max-width: 40%; - - img { - width: 100%; - } - } - - &.left { - float: left; - padding: 0 1.5rem 1rem 0; - top: 0.25rem; - } - - &.right { - float: right; - padding: 0 0 1rem 1.5rem; - top: 0.25rem; - } - - &.fit { - display: block; - margin: 0 0 _size(element-margin) 0; - width: 100%; - - img { - width: 100%; - } - } - - &.main { - display: block; - margin: 0 0 (_size(element-margin) * 1.5) 0; - width: 100%; - - img { - width: 100%; - } - } - } \ No newline at end of file diff --git a/assets/sass/components/_list.scss b/assets/sass/components/_list.scss deleted file mode 100644 index 7744695..0000000 --- a/assets/sass/components/_list.scss +++ /dev/null @@ -1,380 +0,0 @@ -/// -/// Ethereal by HTML5 UP -/// html5up.net | @ajlkn -/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) -/// - -// skel-baseline v3.0.1 | (c) n33 | skel.io | MIT licensed - -/* List */ - - ol { - list-style: decimal; - margin: 0 0 _size(element-margin) 0; - padding-left: 1.25rem; - - li { - padding-left: 0.25rem; - } - } - - ul { - list-style: disc; - margin: 0 0 _size(element-margin) 0; - padding-left: 1rem; - - li { - padding-left: 0.5rem; - } - - &.alt { - list-style: none; - padding-left: 0; - - li { - border-top: solid 1px _palette(border); - padding: 0.5rem 0; - - &:first-child { - border-top: 0; - padding-top: 0; - } - } - } - - &.icons { - cursor: default; - list-style: none; - padding-left: 0; - - li { - display: inline-block; - padding: 0 1rem 0 0; - - &:last-child { - padding-right: 0; - } - - .icon { - &:before { - font-size: 1.25em; - } - } - } - } - - &.actions { - cursor: default; - list-style: none; - padding-left: 0; - - li { - display: inline-block; - padding: 0 (_size(element-margin) * 0.5) 0 0; - vertical-align: middle; - - &:last-child { - padding-right: 0; - } - } - - &.small { - li { - padding: 0 (_size(element-margin) * 0.25) 0 0; - } - } - - &.vertical { - li { - display: block; - padding: (_size(element-margin) * 0.5) 0 0 0; - - &:first-child { - padding-top: 0; - } - - > * { - margin-bottom: 0; - } - } - - &.small { - li { - padding: (_size(element-margin) * 0.25) 0 0 0; - - &:first-child { - padding-top: 0; - } - } - } - } - - &.fit { - display: table; - margin-left: (_size(element-margin) * -0.5); - padding: 0; - table-layout: fixed; - width: calc(100% + #{(_size(element-margin) * 0.5)}); - - li { - display: table-cell; - padding: 0 0 0 (_size(element-margin) * 0.5); - - > * { - margin-bottom: 0; - } - } - - &.small { - margin-left: (_size(element-margin) * -0.25); - width: calc(100% + #{(_size(element-margin) * 0.25)}); - - li { - padding: 0 0 0 (_size(element-margin) * 0.25); - } - } - } - } - - &.contact-icons { - list-style: none; - padding-left: 0; - - > li { - margin: 1.25rem 0 0 0; - padding-left: 0; - - &:before { - display: inline-block; - width: 2.25rem; - height: 2.25rem; - line-height: 2.25rem; - border-radius: 2.25rem; - background-color: rgba(_palette(fg-bold), 1); - color: _palette(bg); - cursor: default; - font-size: 1.125rem; - margin-right: 1rem; - text-align: center; - vertical-align: middle; - - body.is-ie & { - line-height: 2.125; - } - } - - a { - border-bottom: 0; - } - } - - &.color1 { - > li { - &:before { - color: _palette(accent1); - } - } - } - - &.color2 { - > li { - &:before { - color: _palette(accent2); - } - } - } - - &.color3 { - > li { - &:before { - color: _palette(accent3); - } - } - } - - &.color4 { - > li { - &:before { - color: _palette(accent4); - } - } - } - } - - &.grid-icons { - @include vendor('display', 'flex'); - @include vendor('flex-wrap', 'wrap'); - @include vendor('justify-content', 'center'); - list-style: none; - margin: 0 0 _size(element-margin) 0; - padding-left: 0; - - .icon { - display: block; - position: relative; - width: 100%; - text-align: center; - - &:before { - display: block; - width: 6rem; - height: 6rem; - line-height: 6rem; - border-radius: 6rem; - box-shadow: inset 0 0 0 2px _palette(border); - font-size: 2.5rem; - margin: 0 auto; - text-align: center; - - body.is-ie & { - line-height: 2.375; - } - } - } - - > li { - @include vendor('flex-grow', '0'); - @include vendor('flex-shrink', '0'); - position: relative; - margin: 1.5rem 0 0 1.5rem; - padding-left: 0; - } - - &.connected { - > li { - &:before { - content: ''; - display: block; - position: absolute; - width: 1.5rem; - height: 2px; - top: 50%; - left: -1.5rem; - background-color: _palette(border); - } - - &:after { - content: ''; - display: block; - position: absolute; - width: 2px; - height: 1.5rem; - top: -1.5rem; - left: 50%; - background-color: _palette(border); - } - } - } - - &.two { - width: 14rem; - - > li { - &:nth-child(-n + 2) { - margin-top: 0; - - &:after { - display: none; - } - } - - &:nth-child(2n - 1) { - margin-left: 0; - - &:before { - display: none; - } - } - } - } - - &.three { - width: 21.5rem; - - > li { - &:nth-child(-n + 3) { - margin-top: 0; - - &:after { - display: none; - } - } - - &:nth-child(3n - 2) { - margin-left: 0; - - &:before { - display: none; - } - } - } - } - - &.four { - width: 29rem; - - > li { - &:nth-child(-n + 4) { - margin-top: 0; - - &:after { - display: none; - } - } - - &:nth-child(4n - 3) { - margin-left: 0; - - &:before { - display: none; - } - } - } - } - } - } - - dl { - margin: 0 0 _size(element-margin) 0; - - dt { - display: block; - font-weight: _font(weight-bold); - margin: 0 0 (_size(element-margin) * 0.5) 0; - } - - dd { - margin-left: _size(element-margin); - } - } - - @include breakpoint(small) { - ul { - &.grid-icons { - @include vendor('justify-content', 'flex-start'); - width: 100% !important; - margin: -1rem 0 _size(element-margin) -1rem; - - .icon { - &:before { - width: 4.5rem; - height: 4.5rem; - line-height: 4.5rem; - font-size: 1.75rem; - } - } - - > li { - margin: 1rem 0 0 1rem !important; - - &:before { - display: none !important; - } - - &:after { - display: none !important; - } - } - } - } - } \ No newline at end of file diff --git a/assets/sass/components/_panel-banner.scss b/assets/sass/components/_panel-banner.scss deleted file mode 100644 index 983ad32..0000000 --- a/assets/sass/components/_panel-banner.scss +++ /dev/null @@ -1,90 +0,0 @@ -/// -/// Ethereal by HTML5 UP -/// html5up.net | @ajlkn -/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) -/// - -/* Panel (Banner) */ - - $pad: _size(pad); - $pad-small-tb: _size(pad-small-tb); - $pad-small-lr: _size(pad-small-lr); - - .panel.banner { - @include vendor('align-items', 'stretch'); - - .content { - @include padding($pad, $pad); - @include vendor('display', 'flex'); - @include vendor('flex-direction', 'column'); - @include vendor('justify-content', 'center'); - @include vendor('flex-grow', '0'); - @include vendor('flex-shrink', '0'); - - > .actions:last-child { - margin-bottom: 0; - } - } - - .image { - @include vendor('flex-grow', '0'); - @include vendor('flex-shrink', '0'); - position: relative; - - img { - @include vendor('object-fit', 'cover'); - display: block; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - } - } - - &.left { - @include vendor('flex-direction', 'row'); - } - - &.right { - @include vendor('flex-direction', 'row-reverse'); - } - } - - @include breakpoint(small) { - .panel.banner { - .content { - @include padding($pad-small-tb, $pad-small-lr); - @include vendor('flex-basis', '60%'); - - > .actions:last-child { - margin-bottom: _size(element-margin); - } - } - - .image { - @include vendor('flex-basis', '40%'); - } - } - - @include orientation(portrait) { - .panel.banner { - .content { - @include vendor('flex-basis', 'auto'); - } - - .image { - @include vendor('flex-basis', 'auto'); - height: 18rem; - } - - &.left { - @include vendor('flex-direction', 'column'); - } - - &.right { - @include vendor('flex-direction', 'column-reverse'); - } - } - } - } \ No newline at end of file diff --git a/assets/sass/components/_panel-spotlight.scss b/assets/sass/components/_panel-spotlight.scss deleted file mode 100644 index e84a3fd..0000000 --- a/assets/sass/components/_panel-spotlight.scss +++ /dev/null @@ -1,81 +0,0 @@ -/// -/// Ethereal by HTML5 UP -/// html5up.net | @ajlkn -/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) -/// - -/* Panel (Spotlight) */ - - $pad: _size(pad); - $pad-small-tb: _size(pad-small-tb); - $pad-small-lr: _size(pad-small-lr); - - .panel.spotlight { - @include vendor('align-items', 'stretch'); - position: relative; - - > * { - z-index: 1; - } - - .content { - @include vendor('display', 'flex'); - @include vendor('flex-direction', 'column'); - @include vendor('justify-content', 'center'); - @include padding($pad, $pad); - } - - .image { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 0; - - img { - @include vendor('object-fit', 'cover'); - display: block; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - } - } - - &.left { - @include vendor('justify-content', 'flex-start'); - - .content { - background-image: linear-gradient(-90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.125) 30%, rgba(0,0,0,0.175) 50%); - } - } - - &.right { - @include vendor('justify-content', 'flex-end'); - - .content { - background-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.125) 30%, rgba(0,0,0,0.175) 50%); - } - } - } - - @include breakpoint(small) { - .panel.spotlight { - .content { - @include padding($pad-small-tb, $pad-small-lr); - @include vendor('flex-direction', 'column !important'); - background-image: linear-gradient(0deg, rgba(0,0,0,0.25) 70%, rgba(0,0,0,0.175)) !important; - min-height: 25rem; - } - } - } - - @include breakpoint(xsmall) { - .panel.spotlight { - .content { - min-height: 30rem; - } - } - } \ No newline at end of file diff --git a/assets/sass/components/_panel.scss b/assets/sass/components/_panel.scss deleted file mode 100644 index 2771c31..0000000 --- a/assets/sass/components/_panel.scss +++ /dev/null @@ -1,300 +0,0 @@ -/// -/// Ethereal by HTML5 UP -/// html5up.net | @ajlkn -/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) -/// - -/* Panel */ - - $pad: _size(pad); - $pad-small-tb: _size(pad-small-tb); - $pad-small-lr: _size(pad-small-lr); - - @mixin panel-colors { - $opacity: 0.175; - $darken: 3; - $desaturate: 3; - - &.color0 { - @include gradient-background(false, 1, 20%, 60%); - } - - &.color1 { - @include gradient-background; - background-color: _palette(accent1); - } - - &.color2 { - @include gradient-background; - background-color: _palette(accent2); - } - - &.color3 { - @include gradient-background; - background-color: _palette(accent3); - } - - &.color4 { - @include gradient-background; - background-color: _palette(accent4); - } - - &.color1-alt { - @include gradient-background(false, $opacity); - background-color: desaturate(darken(_palette(accent1), $darken), $desaturate); - } - - &.color2-alt { - @include gradient-background(false, $opacity); - background-color: desaturate(darken(_palette(accent2), $darken), $desaturate); - } - - &.color3-alt { - @include gradient-background(false, $opacity); - background-color: desaturate(darken(_palette(accent3), $darken), $desaturate); - } - - &.color4-alt { - @include gradient-background(false, $opacity); - background-color: desaturate(darken(_palette(accent4), $darken), $desaturate); - } - } - - .panel { - @include vendor('display', 'flex'); - @include vendor('flex-grow', '0'); - @include vendor('flex-shrink', '0'); - @include vendor('justify-content', 'center'); - @include vendor('align-items', 'stretch'); - height: 100%; - overflow-x: hidden; - overflow-y: auto; - - > * { - position: relative; - min-width: 10rem; - - @include panel-colors; - } - - > .intro { - @include padding($pad, $pad); - @include vendor('display', 'flex'); - @include vendor('flex-grow', '0'); - @include vendor('flex-shrink', '0'); - @include vendor('justify-content', 'center'); - @include vendor('align-items', 'flex-start'); - @include vendor('flex-direction', 'column'); - width: 22rem; - - &.joined { - width: (22rem - $pad); - padding-right: 0; - - & + .inner { - padding-left: ($pad * 0.75); - } - } - } - - > .inner { - @include padding($pad, $pad); - @include vendor('display', 'flex'); - @include vendor('flex-grow', '1'); - @include vendor('flex-shrink', '1'); - @include vendor('justify-content', 'center'); - @include vendor('align-items', 'flex-start'); - @include vendor('flex-direction', 'column'); - position: relative; - width: 100%; - - &.columns { - @include vendor('display', 'flex'); - @include vendor('justify-content', 'center'); - @include vendor('align-items', 'center'); - @include vendor('flex-direction', 'row'); - - > * { - @include vendor('flex-grow', '0'); - @include vendor('flex-shrink', '0'); - margin-left: $pad; - } - - > :first-child { - margin-left: 0; - } - - &.divided { - > * { - margin-left: ($pad * 2); - - &:before { - content: ''; - position: absolute; - top: $pad; - width: 2px; - height: calc(100% - #{$pad * 2}); - margin-left: ($pad * -1); - background-color: _palette(border); - } - } - - > :first-child { - margin-left: 0; - - &:before { - display: none; - } - } - } - - &.aligned { - @include vendor('align-items', 'flex-start'); - } - } - } - - @include spans(_size(span-fixed)); - - &.small { - width: 35rem; - } - - &.medium { - width: 50rem; - } - - &.large { - width: 65rem; - } - - &.small, - &.medium, - &.large { - @include spans(_size(span-variable)); - } - - @include panel-colors; - } - - @mixin panel-colors-small { - $opacity: 0.175; - $darken: 3; - $desaturate: 3; - - &.color1 { - @include gradient-background-small; - background-color: _palette(accent1); - } - - &.color2 { - @include gradient-background-small; - background-color: _palette(accent2); - } - - &.color3 { - @include gradient-background-small; - background-color: _palette(accent3); - } - - &.color4 { - @include gradient-background-small; - background-color: _palette(accent4); - } - - &.color1-alt { - @include gradient-background-small(false, $opacity); - background-color: desaturate(darken(_palette(accent1), $darken), $desaturate); - } - - &.color2-alt { - @include gradient-background-small(false, $opacity); - background-color: desaturate(darken(_palette(accent2), $darken), $desaturate); - } - - &.color3-alt { - @include gradient-background-small(false, $opacity); - background-color: desaturate(darken(_palette(accent3), $darken), $desaturate); - } - - &.color4-alt { - @include gradient-background-small(false, $opacity); - background-color: desaturate(darken(_palette(accent4), $darken), $desaturate); - } - } - - @include breakpoint(small) { - .panel { - @include vendor('flex-direction', 'column'); - height: auto; - - > * { - @include panel-colors-small; - } - - > .intro { - @include padding($pad-small-tb, $pad-small-lr); - width: 100% !important; - - &.joined { - padding-bottom: 0; - padding-right: $pad-small-lr; - - & + .inner { - padding-top: 0; - padding-left: $pad-small-lr; - } - } - } - - > .inner { - @include padding($pad-small-tb, $pad-small-lr); - - &.columns { - @include vendor('flex-direction', 'column'); - - > * { - margin-left: 0; - margin-top: 0; - } - - > :first-child { - margin-top: 0; - } - - &.divided { - > * { - margin-left: 0; - margin-top: ($pad-small-lr * 2); - - &:before { - content: ''; - position: absolute; - top: auto; - left: $pad-small-lr; - width: calc(100% - #{$pad-small-lr * 2}); - height: 2px; - margin-left: 0; - margin-top: ($pad-small-lr * -1); - } - } - - > :first-child { - margin-top: 0; - } - } - } - } - - @include spans-small(_size(span-fixed)); - - &.small, - &.medium, - &.large { - @include spans-small(_size(span-variable)); - width: 100% !important; - } - - @include panel-colors-small; - } - } \ No newline at end of file diff --git a/assets/sass/components/_table.scss b/assets/sass/components/_table.scss deleted file mode 100644 index 212bee0..0000000 --- a/assets/sass/components/_table.scss +++ /dev/null @@ -1,81 +0,0 @@ -/// -/// Ethereal by HTML5 UP -/// html5up.net | @ajlkn -/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) -/// - -/* Table */ - - .table-wrapper { - -webkit-overflow-scrolling: touch; - overflow-x: auto; - } - - table { - margin: 0 0 _size(element-margin) 0; - width: 100%; - - tbody { - tr { - border: solid 1px _palette(border); - border-left: 0; - border-right: 0; - - &:nth-child(2n + 1) { - background-color: _palette(border-bg); - } - } - } - - td { - padding: 0.75rem 0.75rem; - } - - th { - color: _palette(fg-bold); - font-size: 0.9rem; - font-weight: _font(weight-bold); - padding: 0 0.75rem 0.75rem 0.75rem; - text-align: left; - } - - thead { - border-bottom: solid 2px _palette(border); - } - - tfoot { - border-top: solid 2px _palette(border); - } - - &.alt { - border-collapse: separate; - - tbody { - tr { - td { - border: solid 1px _palette(border); - border-left-width: 0; - border-top-width: 0; - - &:first-child { - border-left-width: 1px; - } - } - - &:first-child { - td { - border-top-width: 1px; - } - } - } - } - - thead { - border-bottom: 0; - } - - tfoot { - border-top: 0; - } - } - } \ No newline at end of file -- cgit v1.2.3