summaryrefslogtreecommitdiff
path: root/assets/sass/components
diff options
context:
space:
mode:
Diffstat (limited to 'assets/sass/components')
-rw-r--r--assets/sass/components/_actions.scss101
-rw-r--r--assets/sass/components/_box.scss26
-rw-r--r--assets/sass/components/_button.scss84
-rw-r--r--assets/sass/components/_form.scss252
-rw-r--r--assets/sass/components/_icon.scss33
-rw-r--r--assets/sass/components/_icons.scss40
-rw-r--r--assets/sass/components/_image.scss87
-rw-r--r--assets/sass/components/_list.scss56
-rw-r--r--assets/sass/components/_table.scss81
9 files changed, 760 insertions, 0 deletions
diff --git a/assets/sass/components/_actions.scss b/assets/sass/components/_actions.scss
new file mode 100644
index 0000000..c3605a0
--- /dev/null
+++ b/assets/sass/components/_actions.scss
@@ -0,0 +1,101 @@
+///
+/// Dimension by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Actions */
+
+ ul.actions {
+ @include vendor('display', 'flex');
+ cursor: default;
+ list-style: none;
+ margin-left: (_size(element-margin) * -0.5);
+ padding-left: 0;
+
+ li {
+ padding: 0 0 0 (_size(element-margin) * 0.5);
+ vertical-align: middle;
+ }
+
+ &.special {
+ @include vendor('justify-content', 'center');
+ width: 100%;
+ margin-left: 0;
+
+ li {
+ &:first-child {
+ padding-left: 0;
+ }
+ }
+ }
+
+ &.stacked {
+ @include vendor('flex-direction', 'column');
+ margin-left: 0;
+
+ li {
+ padding: (_size(element-margin) * 0.65) 0 0 0;
+
+ &:first-child {
+ padding-top: 0;
+ }
+ }
+ }
+
+ &.fit {
+ width: calc(100% + #{_size(element-margin) * 0.5});
+
+ li {
+ @include vendor('flex-grow', '1');
+ @include vendor('flex-shrink', '1');
+ width: 100%;
+
+ > * {
+ width: 100%;
+ }
+ }
+
+ &.stacked {
+ width: 100%;
+ }
+ }
+
+ @include breakpoint('<=xsmall') {
+ &:not(.fixed) {
+ @include vendor('flex-direction', 'column');
+ margin-left: 0;
+ width: 100% !important;
+
+ li {
+ @include vendor('flex-grow', '1');
+ @include vendor('flex-shrink', '1');
+ padding: (_size(element-margin) * 0.5) 0 0 0;
+ text-align: center;
+ width: 100%;
+
+ > * {
+ width: 100%;
+ }
+
+ &:first-child {
+ padding-top: 0;
+ }
+
+ input[type="submit"],
+ input[type="reset"],
+ input[type="button"],
+ button,
+ .button {
+ width: 100%;
+
+ &.icon {
+ &:before {
+ margin-left: -0.5em;
+ }
+ }
+ }
+ }
+ }
+ }
+ } \ No newline at end of file
diff --git a/assets/sass/components/_box.scss b/assets/sass/components/_box.scss
new file mode 100644
index 0000000..ec5ab0d
--- /dev/null
+++ b/assets/sass/components/_box.scss
@@ -0,0 +1,26 @@
+///
+/// Dimension by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Box */
+
+ .box {
+ border-radius: _size(border-radius);
+ border: solid _size(border-width) _palette(border);
+ margin-bottom: _size(element-margin);
+ padding: 1.5em;
+
+ > :last-child,
+ > :last-child > :last-child,
+ > :last-child > :last-child > :last-child {
+ margin-bottom: 0;
+ }
+
+ &.alt {
+ border: 0;
+ border-radius: 0;
+ padding: 0;
+ }
+ } \ No newline at end of file
diff --git a/assets/sass/components/_button.scss b/assets/sass/components/_button.scss
new file mode 100644
index 0000000..61fe069
--- /dev/null
+++ b/assets/sass/components/_button.scss
@@ -0,0 +1,84 @@
+///
+/// Dimension 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, color #{_duration(transition)} ease-in-out');
+ background-color: transparent;
+ border-radius: _size(border-radius);
+ border: 0;
+ box-shadow: inset 0 0 0 _size(border-width) _palette(border);
+ color: _palette(fg-bold) !important;
+ cursor: pointer;
+ display: inline-block;
+ font-size: 0.8rem;
+ font-weight: _font(weight);
+ height: _size(element-height);
+ letter-spacing: _font(letter-spacing);
+ line-height: _size(element-height);
+ outline: 0;
+ padding: 0 1.25rem 0 (1.25rem + (_font(letter-spacing) * 0.5));
+ text-align: center;
+ text-decoration: none;
+ text-transform: uppercase;
+ white-space: nowrap;
+
+ &:hover {
+ background-color: _palette(border-bg);
+ }
+
+ &:active {
+ background-color: _palette(border-bg-alt);
+ }
+
+ &.icon {
+ &:before {
+ margin-right: 0.5em;
+ }
+ }
+
+ &.fit {
+ width: 100%;
+ }
+
+ &.small {
+ font-size: 0.6rem;
+ height: (_size(element-height) * 0.75);
+ line-height: (_size(element-height) * 0.75);
+ }
+
+ &.primary {
+ background-color: _palette(fg-bold);
+ color: _palette(bg) !important;
+ font-weight: _font(weight-bold);
+
+ &:hover {
+ }
+
+ &:active {
+ }
+ }
+
+ &.disabled,
+ &:disabled {
+ @include vendor('pointer-events', 'none');
+ cursor: default;
+ opacity: 0.25;
+ }
+ }
+
+ input[type="submit"],
+ input[type="reset"],
+ input[type="button"],
+ button {
+ line-height: calc(#{_size(element-height)} - 2px);
+ } \ 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..fdae12e
--- /dev/null
+++ b/assets/sass/components/_form.scss
@@ -0,0 +1,252 @@
+///
+/// Dimension by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Form */
+
+ form {
+ margin: 0 0 _size(element-margin) 0;
+
+ > :last-child {
+ margin-bottom: 0;
+ }
+
+ > .fields {
+ $gutter: (_size(element-margin) * 0.75);
+
+ @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});
+ }
+ }
+ }
+
+ @include breakpoint('<=xsmall') {
+ > .fields {
+ $gutter: (_size(element-margin) * 0.75);
+
+ width: calc(100% + #{$gutter * 2});
+ margin: ($gutter * -1) 0 _size(element-margin) ($gutter * -1);
+
+ > .field {
+ padding: $gutter 0 0 $gutter;
+ width: calc(100% - #{$gutter * 1});
+
+ &.half {
+ width: calc(100% - #{$gutter * 1});
+ }
+
+ &.third {
+ width: calc(100% - #{$gutter * 1});
+ }
+
+ &.quarter {
+ width: calc(100% - #{$gutter * 1});
+ }
+ }
+ }
+ }
+ }
+
+ label {
+ color: _palette(fg-bold);
+ display: block;
+ font-size: 0.8rem;
+ font-weight: _font(weight);
+ letter-spacing: _font(letter-spacing);
+ line-height: 1.5;
+ margin: 0 0 (_size(element-margin) * 0.5) 0;
+ text-transform: uppercase;
+ }
+
+ input[type="text"],
+ input[type="password"],
+ input[type="email"],
+ input[type="tel"],
+ select,
+ textarea {
+ @include vendor('appearance', 'none');
+ @include vendor('transition', (
+ 'border-color #{_duration(transition)} ease-in-out',
+ 'box-shadow #{_duration(transition)} ease-in-out',
+ 'background-color #{_duration(transition)} ease-in-out'
+ ));
+ background-color: transparent;
+ border-radius: _size(border-radius);
+ border: solid _size(border-width) _palette(border);
+ color: inherit;
+ display: block;
+ outline: 0;
+ padding: 0 1rem;
+ text-decoration: none;
+ width: 100%;
+
+ &:invalid {
+ box-shadow: none;
+ }
+
+ &:focus {
+ background: _palette(border-bg);
+ border-color: _palette(fg-bold);
+ box-shadow: 0 0 0 _size(border-width) _palette(fg-bold);
+ }
+ }
+
+ select {
+ background-image: svg-url("<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'><path d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='#{_palette(border)}' /></svg>");
+ background-size: 1.25rem;
+ background-repeat: no-repeat;
+ background-position: calc(100% - 1rem) center;
+ height: _size(element-height);
+ padding-right: _size(element-height);
+ text-overflow: ellipsis;
+
+ option {
+ color: _palette(fg);
+ background: _palette(bg);
+ }
+
+ &:focus {
+ &::-ms-value {
+ background-color: transparent;
+ }
+ }
+
+ &::-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(false, solid);
+ @include vendor('user-select', 'none');
+ color: _palette(fg);
+ cursor: pointer;
+ display: inline-block;
+ font-size: 0.8rem;
+ font-weight: _font(weight);
+ margin: 0 0 (_size(element-margin) * 0.25) 0;
+ padding-left: (_size(element-height) * 0.6) + 1rem;
+ padding-right: 0.75rem;
+ position: relative;
+
+ &:before {
+ @include vendor('transition', (
+ 'border-color #{_duration(transition)} ease-in-out',
+ 'box-shadow #{_duration(transition)} ease-in-out',
+ 'background-color #{_duration(transition)} ease-in-out'
+ ));
+ border-radius: _size(border-radius);
+ border: solid _size(border-width) _palette(border);
+ content: '';
+ display: inline-block;
+ height: (_size(element-height) * 0.6);
+ left: 0;
+ line-height: (_size(element-height) * 0.6);
+ //line-height: calc(#{_size(element-height) * 0.6} + 0em);
+ position: absolute;
+ text-align: center;
+ top: -0.15rem;
+ width: (_size(element-height) * 0.6);
+ }
+ }
+
+ &:checked + label {
+ &:before {
+ background: _palette(fg-bold) !important;
+ border-color: _palette(fg-bold) !important;
+ color: _palette(bg);
+ content: '\f00c';
+ }
+ }
+
+ &:focus + label {
+ &:before {
+ background: _palette(border-bg);
+ border-color: _palette(fg-bold);
+ box-shadow: 0 0 0 _size(border-width) _palette(fg-bold);
+ }
+ }
+ }
+
+ 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;
+ } \ 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..4726114
--- /dev/null
+++ b/assets/sass/components/_icon.scss
@@ -0,0 +1,33 @@
+///
+/// Dimension 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;
+ border-bottom: none;
+ position: relative;
+
+ > .label {
+ display: none;
+ }
+
+ &:before {
+ line-height: inherit;
+ }
+
+ &.solid {
+ &:before {
+ font-weight: 900;
+ }
+ }
+
+ &.brands {
+ &:before {
+ font-family: 'Font Awesome 5 Brands';
+ }
+ }
+ } \ No newline at end of file
diff --git a/assets/sass/components/_icons.scss b/assets/sass/components/_icons.scss
new file mode 100644
index 0000000..f096a32
--- /dev/null
+++ b/assets/sass/components/_icons.scss
@@ -0,0 +1,40 @@
+///
+/// Dimension by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Icons */
+
+ ul.icons {
+ cursor: default;
+ list-style: none;
+ padding-left: 0;
+
+ li {
+ display: inline-block;
+ padding: 0 0.75em 0 0;
+
+ &:last-child {
+ padding-right: 0;
+ }
+
+ a {
+ border-radius: 100%;
+ box-shadow: inset 0 0 0 _size(border-width) _palette(border);
+ display: inline-block;
+ height: 2.25rem;
+ line-height: 2.25rem;
+ text-align: center;
+ width: 2.25rem;
+
+ &:hover {
+ background-color: _palette(border-bg);
+ }
+
+ &:active {
+ background-color: _palette(border-bg-alt);
+ }
+ }
+ }
+ } \ 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..ed94ed7
--- /dev/null
+++ b/assets/sass/components/_image.scss
@@ -0,0 +1,87 @@
+///
+/// Dimension by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Image */
+
+ .image {
+ border-radius: _size(border-radius);
+ border: 0;
+ display: inline-block;
+ position: relative;
+
+ &:before {
+ @include vendor('pointer-events', 'none');
+ background-image: url('../../images/overlay.png');
+ background-color: _palette(bg-overlay);
+ border-radius: _size(border-radius);
+ content: '';
+ display: block;
+ height: 100%;
+ left: 0;
+ opacity: 0.5;
+ position: absolute;
+ top: 0;
+ width: 100%;
+ }
+
+ img {
+ border-radius: _size(border-radius);
+ display: block;
+ }
+
+ &.left,
+ &.right {
+ max-width: 40%;
+
+ img {
+ width: 100%;
+ }
+ }
+
+ &.left {
+ float: left;
+ padding: 0 1.5em 1em 0;
+ top: 0.25em;
+ }
+
+ &.right {
+ float: right;
+ padding: 0 0 1em 1.5em;
+ top: 0.25em;
+ }
+
+ &.fit {
+ display: block;
+ margin: 0 0 _size(element-margin) 0;
+ width: 100%;
+
+ img {
+ width: 100%;
+ }
+ }
+
+ &.main {
+ display: block;
+ margin: (_size(element-margin) * 1.25) 0;
+ width: 100%;
+
+ img {
+ width: 100%;
+ }
+ }
+
+ @include breakpoint('<=small') {
+ &.main {
+ margin: (_size(element-margin) * 1) 0;
+ }
+ }
+
+ @include breakpoint('<=xsmall') {
+ &.main {
+ margin: (_size(element-margin) * 0.75) 0;
+ }
+ }
+ } \ 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..1b384c2
--- /dev/null
+++ b/assets/sass/components/_list.scss
@@ -0,0 +1,56 @@
+///
+/// Dimension by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* List */
+
+ ol {
+ list-style: decimal;
+ margin: 0 0 _size(element-margin) 0;
+ padding-left: 1.25em;
+
+ li {
+ padding-left: 0.25em;
+ }
+ }
+
+ ul {
+ list-style: disc;
+ margin: 0 0 _size(element-margin) 0;
+ padding-left: 1em;
+
+ li {
+ padding-left: 0.5em;
+ }
+
+ &.alt {
+ list-style: none;
+ padding-left: 0;
+
+ li {
+ border-top: solid _size(border-width) _palette(border);
+ padding: 0.5em 0;
+
+ &:first-child {
+ border-top: 0;
+ padding-top: 0;
+ }
+ }
+ }
+ }
+
+ 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);
+ }
+ } \ 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..0c51148
--- /dev/null
+++ b/assets/sass/components/_table.scss
@@ -0,0 +1,81 @@
+///
+/// Dimension 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 _size(border-width) _palette(border);
+ border-left: 0;
+ border-right: 0;
+
+ &:nth-child(2n + 1) {
+ background-color: _palette(border-bg);
+ }
+ }
+ }
+
+ td {
+ padding: 0.75em 0.75em;
+ }
+
+ th {
+ color: _palette(fg-bold);
+ font-size: 0.9em;
+ font-weight: _font(weight-bold);
+ padding: 0 0.75em 0.75em 0.75em;
+ text-align: left;
+ }
+
+ thead {
+ border-bottom: solid (_size(border-width) * 2) _palette(border);
+ }
+
+ tfoot {
+ border-top: solid (_size(border-width) * 2) _palette(border);
+ }
+
+ &.alt {
+ border-collapse: separate;
+
+ tbody {
+ tr {
+ td {
+ border: solid _size(border-width) _palette(border);
+ border-left-width: 0;
+ border-top-width: 0;
+
+ &:first-child {
+ border-left-width: _size(border-width);
+ }
+ }
+
+ &:first-child {
+ td {
+ border-top-width: _size(border-width);
+ }
+ }
+ }
+ }
+
+ thead {
+ border-bottom: 0;
+ }
+
+ tfoot {
+ border-top: 0;
+ }
+ }
+ } \ No newline at end of file
generated by cgit v1.2.3 (git 2.46.0) at 2025-12-08 13:28:28 -0500