aboutsummaryrefslogtreecommitdiff
path: root/assets/sass/components
diff options
context:
space:
mode:
Diffstat (limited to 'assets/sass/components')
-rw-r--r--assets/sass/components/_button.scss156
-rw-r--r--assets/sass/components/_form.scss275
-rw-r--r--assets/sass/components/_gallery.scss218
-rw-r--r--assets/sass/components/_icon.scss17
-rw-r--r--assets/sass/components/_image.scss169
-rw-r--r--assets/sass/components/_list.scss380
-rw-r--r--assets/sass/components/_panel-banner.scss90
-rw-r--r--assets/sass/components/_panel-spotlight.scss81
-rw-r--r--assets/sass/components/_panel.scss300
-rw-r--r--assets/sass/components/_table.scss81
10 files changed, 1767 insertions, 0 deletions
diff --git a/assets/sass/components/_button.scss b/assets/sass/components/_button.scss
new file mode 100644
index 0000000..9ce38c2
--- /dev/null
+++ b/assets/sass/components/_button.scss
@@ -0,0 +1,156 @@
+///
+/// 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
new file mode 100644
index 0000000..9ff5ab2
--- /dev/null
+++ b/assets/sass/components/_form.scss
@@ -0,0 +1,275 @@
+///
+/// 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
new file mode 100644
index 0000000..f54b0de
--- /dev/null
+++ b/assets/sass/components/_gallery.scss
@@ -0,0 +1,218 @@
+///
+/// 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('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="96px" height="96px" viewBox="0 0 96 96" zoomAndPan="disable"><style>circle {fill: transparent; stroke: #{_palette(fg-bold)}; stroke-width: 1.5px; }</style><defs><clipPath id="corner"><polygon points="0,0 48,0 48,48 96,48 96,96 0,96" /></clipPath></defs><g clip-path="url(#corner)"><circle cx="48" cy="48" r="32"/></g></svg>');
+ 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('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64px" height="64px" viewBox="0 0 64 64" zoomAndPan="disable"><style>line {stroke: #{_palette(fg-bold)};stroke-width: 1.5px;}</style><line x1="20" y1="20" x2="44" y2="44" /><line x1="20" y1="44" x2="44" y2="20" /></svg>');
+ 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
new file mode 100644
index 0000000..ce4e37c
--- /dev/null
+++ b/assets/sass/components/_icon.scss
@@ -0,0 +1,17 @@
+///
+/// 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
new file mode 100644
index 0000000..b428fb3
--- /dev/null
+++ b/assets/sass/components/_image.scss
@@ -0,0 +1,169 @@
+///
+/// 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
new file mode 100644
index 0000000..7744695
--- /dev/null
+++ b/assets/sass/components/_list.scss
@@ -0,0 +1,380 @@
+///
+/// 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
new file mode 100644
index 0000000..983ad32
--- /dev/null
+++ b/assets/sass/components/_panel-banner.scss
@@ -0,0 +1,90 @@
+///
+/// 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
new file mode 100644
index 0000000..e84a3fd
--- /dev/null
+++ b/assets/sass/components/_panel-spotlight.scss
@@ -0,0 +1,81 @@
+///
+/// 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
new file mode 100644
index 0000000..2771c31
--- /dev/null
+++ b/assets/sass/components/_panel.scss
@@ -0,0 +1,300 @@
+///
+/// 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
new file mode 100644
index 0000000..212bee0
--- /dev/null
+++ b/assets/sass/components/_table.scss
@@ -0,0 +1,81 @@
+///
+/// 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
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-22 19:36:37 +0000