Upload 14 files
Browse files- assets/sass/components/_actions.scss +101 -0
- assets/sass/components/_box.scss +26 -0
- assets/sass/components/_button.scss +89 -0
- assets/sass/components/_contact.scss +43 -0
- assets/sass/components/_features.scss +71 -0
- assets/sass/components/_form.scss +236 -0
- assets/sass/components/_icon.scss +33 -0
- assets/sass/components/_icons.scss +28 -0
- assets/sass/components/_image.scss +60 -0
- assets/sass/components/_list.scss +56 -0
- assets/sass/components/_pagination.scss +75 -0
- assets/sass/components/_row.scss +35 -0
- assets/sass/components/_section.scss +13 -0
- assets/sass/components/_table.scss +81 -0
assets/sass/components/_actions.scss
ADDED
|
@@ -0,0 +1,101 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
///
|
| 2 |
+
/// Solid State by HTML5 UP
|
| 3 |
+
/// html5up.net | @ajlkn
|
| 4 |
+
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
| 5 |
+
///
|
| 6 |
+
|
| 7 |
+
/* Actions */
|
| 8 |
+
|
| 9 |
+
ul.actions {
|
| 10 |
+
@include vendor('display', 'flex');
|
| 11 |
+
cursor: default;
|
| 12 |
+
list-style: none;
|
| 13 |
+
margin-left: (_size(element-margin) * -0.5);
|
| 14 |
+
padding-left: 0;
|
| 15 |
+
|
| 16 |
+
li {
|
| 17 |
+
padding: 0 0 0 (_size(element-margin) * 0.5);
|
| 18 |
+
vertical-align: middle;
|
| 19 |
+
}
|
| 20 |
+
|
| 21 |
+
&.special {
|
| 22 |
+
@include vendor('justify-content', 'center');
|
| 23 |
+
width: 100%;
|
| 24 |
+
margin-left: 0;
|
| 25 |
+
|
| 26 |
+
li {
|
| 27 |
+
&:first-child {
|
| 28 |
+
padding-left: 0;
|
| 29 |
+
}
|
| 30 |
+
}
|
| 31 |
+
}
|
| 32 |
+
|
| 33 |
+
&.stacked {
|
| 34 |
+
@include vendor('flex-direction', 'column');
|
| 35 |
+
margin-left: 0;
|
| 36 |
+
|
| 37 |
+
li {
|
| 38 |
+
padding: (_size(element-margin) * 0.65) 0 0 0;
|
| 39 |
+
|
| 40 |
+
&:first-child {
|
| 41 |
+
padding-top: 0;
|
| 42 |
+
}
|
| 43 |
+
}
|
| 44 |
+
}
|
| 45 |
+
|
| 46 |
+
&.fit {
|
| 47 |
+
width: calc(100% + #{_size(element-margin) * 0.5});
|
| 48 |
+
|
| 49 |
+
li {
|
| 50 |
+
@include vendor('flex-grow', '1');
|
| 51 |
+
@include vendor('flex-shrink', '1');
|
| 52 |
+
width: 100%;
|
| 53 |
+
|
| 54 |
+
> * {
|
| 55 |
+
width: 100%;
|
| 56 |
+
}
|
| 57 |
+
}
|
| 58 |
+
|
| 59 |
+
&.stacked {
|
| 60 |
+
width: 100%;
|
| 61 |
+
}
|
| 62 |
+
}
|
| 63 |
+
|
| 64 |
+
@include breakpoint('<=xsmall') {
|
| 65 |
+
&:not(.fixed) {
|
| 66 |
+
@include vendor('flex-direction', 'column');
|
| 67 |
+
margin-left: 0;
|
| 68 |
+
width: 100% !important;
|
| 69 |
+
|
| 70 |
+
li {
|
| 71 |
+
@include vendor('flex-grow', '1');
|
| 72 |
+
@include vendor('flex-shrink', '1');
|
| 73 |
+
padding: (_size(element-margin) * 0.5) 0 0 0;
|
| 74 |
+
text-align: center;
|
| 75 |
+
width: 100%;
|
| 76 |
+
|
| 77 |
+
> * {
|
| 78 |
+
width: 100%;
|
| 79 |
+
}
|
| 80 |
+
|
| 81 |
+
&:first-child {
|
| 82 |
+
padding-top: 0;
|
| 83 |
+
}
|
| 84 |
+
|
| 85 |
+
input[type="submit"],
|
| 86 |
+
input[type="reset"],
|
| 87 |
+
input[type="button"],
|
| 88 |
+
button,
|
| 89 |
+
.button {
|
| 90 |
+
width: 100%;
|
| 91 |
+
|
| 92 |
+
&.icon {
|
| 93 |
+
&:before {
|
| 94 |
+
margin-left: -0.5rem;
|
| 95 |
+
}
|
| 96 |
+
}
|
| 97 |
+
}
|
| 98 |
+
}
|
| 99 |
+
}
|
| 100 |
+
}
|
| 101 |
+
}
|
assets/sass/components/_box.scss
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
///
|
| 2 |
+
/// Solid State by HTML5 UP
|
| 3 |
+
/// html5up.net | @ajlkn
|
| 4 |
+
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
| 5 |
+
///
|
| 6 |
+
|
| 7 |
+
/* Box */
|
| 8 |
+
|
| 9 |
+
.box {
|
| 10 |
+
border-radius: _size(border-radius);
|
| 11 |
+
border: solid 2px _palette(border);
|
| 12 |
+
margin-bottom: _size(element-margin);
|
| 13 |
+
padding: 1.5em;
|
| 14 |
+
|
| 15 |
+
> :last-child,
|
| 16 |
+
> :last-child > :last-child,
|
| 17 |
+
> :last-child > :last-child > :last-child {
|
| 18 |
+
margin-bottom: 0;
|
| 19 |
+
}
|
| 20 |
+
|
| 21 |
+
&.alt {
|
| 22 |
+
border: 0;
|
| 23 |
+
border-radius: 0;
|
| 24 |
+
padding: 0;
|
| 25 |
+
}
|
| 26 |
+
}
|
assets/sass/components/_button.scss
ADDED
|
@@ -0,0 +1,89 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
///
|
| 2 |
+
/// Solid State by HTML5 UP
|
| 3 |
+
/// html5up.net | @ajlkn
|
| 4 |
+
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
| 5 |
+
///
|
| 6 |
+
|
| 7 |
+
/* Button */
|
| 8 |
+
|
| 9 |
+
input[type="submit"],
|
| 10 |
+
input[type="reset"],
|
| 11 |
+
input[type="button"],
|
| 12 |
+
button,
|
| 13 |
+
.button {
|
| 14 |
+
@include vendor('appearance', 'none');
|
| 15 |
+
@include vendor('transition', 'background-color #{_duration(transition)} ease-in-out');
|
| 16 |
+
background-color: transparent;
|
| 17 |
+
border-radius: _size(border-radius);
|
| 18 |
+
border: 0;
|
| 19 |
+
box-shadow: inset 0 0 0 2px _palette(border);
|
| 20 |
+
color: _palette(fg-bold) !important;
|
| 21 |
+
cursor: pointer;
|
| 22 |
+
display: inline-block;
|
| 23 |
+
font-family: _font(family-heading);
|
| 24 |
+
font-size: 0.8em;
|
| 25 |
+
font-weight: _font(weight-heading-bold);
|
| 26 |
+
height: 3.75em;
|
| 27 |
+
letter-spacing: _font(kern-heading);
|
| 28 |
+
line-height: 3.75em;
|
| 29 |
+
padding: 0 2.25em;
|
| 30 |
+
text-align: center;
|
| 31 |
+
text-decoration: none;
|
| 32 |
+
text-transform: uppercase;
|
| 33 |
+
white-space: nowrap;
|
| 34 |
+
|
| 35 |
+
&:hover {
|
| 36 |
+
background-color: _palette(border-bg);
|
| 37 |
+
}
|
| 38 |
+
|
| 39 |
+
&:active {
|
| 40 |
+
background-color: _palette(border2-bg);
|
| 41 |
+
}
|
| 42 |
+
|
| 43 |
+
&.icon {
|
| 44 |
+
&:before {
|
| 45 |
+
margin-right: 0.5em;
|
| 46 |
+
color: _palette(fg-light);
|
| 47 |
+
}
|
| 48 |
+
}
|
| 49 |
+
|
| 50 |
+
&.primary {
|
| 51 |
+
background-color: _palette(accent);
|
| 52 |
+
box-shadow: none;
|
| 53 |
+
|
| 54 |
+
&:hover {
|
| 55 |
+
background-color: desaturate(lighten(_palette(accent), 3), 1.5);
|
| 56 |
+
}
|
| 57 |
+
|
| 58 |
+
&:active {
|
| 59 |
+
background-color: saturate(darken(_palette(accent), 3), 1.5);
|
| 60 |
+
}
|
| 61 |
+
|
| 62 |
+
&.icon {
|
| 63 |
+
&:before {
|
| 64 |
+
color: mix(_palette(fg-bold), _palette(accent), 25%);
|
| 65 |
+
}
|
| 66 |
+
}
|
| 67 |
+
}
|
| 68 |
+
|
| 69 |
+
&.fit {
|
| 70 |
+
width: 100%;
|
| 71 |
+
}
|
| 72 |
+
|
| 73 |
+
&.small {
|
| 74 |
+
font-size: 0.6em;
|
| 75 |
+
}
|
| 76 |
+
|
| 77 |
+
&.large {
|
| 78 |
+
font-size: 1em;
|
| 79 |
+
}
|
| 80 |
+
|
| 81 |
+
&.disabled,
|
| 82 |
+
&:disabled {
|
| 83 |
+
opacity: 0.25;
|
| 84 |
+
}
|
| 85 |
+
|
| 86 |
+
@include breakpoint('<=xsmall') {
|
| 87 |
+
padding: 0;
|
| 88 |
+
}
|
| 89 |
+
}
|
assets/sass/components/_contact.scss
ADDED
|
@@ -0,0 +1,43 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
///
|
| 2 |
+
/// Solid State by HTML5 UP
|
| 3 |
+
/// html5up.net | @ajlkn
|
| 4 |
+
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
| 5 |
+
///
|
| 6 |
+
|
| 7 |
+
/* Contact */
|
| 8 |
+
|
| 9 |
+
ul.contact {
|
| 10 |
+
list-style: none;
|
| 11 |
+
padding: 0;
|
| 12 |
+
|
| 13 |
+
li {
|
| 14 |
+
@include icon;
|
| 15 |
+
margin: (_size(element-margin) * 1.25) 0 0 0;
|
| 16 |
+
padding: 0 0 0 3.25em;
|
| 17 |
+
position: relative;
|
| 18 |
+
|
| 19 |
+
&:before {
|
| 20 |
+
border-radius: 100%;
|
| 21 |
+
border: solid 2px _palette(border);
|
| 22 |
+
display: inline-block;
|
| 23 |
+
font-size: 0.8em;
|
| 24 |
+
height: 2.5em;
|
| 25 |
+
left: 0;
|
| 26 |
+
line-height: 2.35em;
|
| 27 |
+
position: absolute;
|
| 28 |
+
text-align: center;
|
| 29 |
+
top: 0;
|
| 30 |
+
width: 2.5em;
|
| 31 |
+
}
|
| 32 |
+
|
| 33 |
+
&:first-child {
|
| 34 |
+
margin-top: 0;
|
| 35 |
+
}
|
| 36 |
+
}
|
| 37 |
+
|
| 38 |
+
@include breakpoint('<=small') {
|
| 39 |
+
li {
|
| 40 |
+
margin: (_size(element-margin) * 0.75) 0 0 0;
|
| 41 |
+
}
|
| 42 |
+
}
|
| 43 |
+
}
|
assets/sass/components/_features.scss
ADDED
|
@@ -0,0 +1,71 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
///
|
| 2 |
+
/// Solid State by HTML5 UP
|
| 3 |
+
/// html5up.net | @ajlkn
|
| 4 |
+
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
| 5 |
+
///
|
| 6 |
+
|
| 7 |
+
/* Features */
|
| 8 |
+
|
| 9 |
+
.features {
|
| 10 |
+
@include vendor('display', 'flex');
|
| 11 |
+
@include vendor('flex-wrap', 'wrap');
|
| 12 |
+
margin: 0 0 _size(element-margin) 0;
|
| 13 |
+
|
| 14 |
+
article {
|
| 15 |
+
@include padding(1.75em, 1.75em);
|
| 16 |
+
background-color: desaturate(lighten(_palette(bg), 3), 1.5);
|
| 17 |
+
border-radius: _size(border-radius);
|
| 18 |
+
margin: (_size(section-spacing, large) * 0.5) _size(section-spacing, large) (_size(section-spacing, large) * 0.5) 0;
|
| 19 |
+
width: calc(50% - #{_size(section-spacing, large) * 0.5});
|
| 20 |
+
|
| 21 |
+
&:nth-child(2n) {
|
| 22 |
+
margin-right: 0;
|
| 23 |
+
}
|
| 24 |
+
|
| 25 |
+
.image {
|
| 26 |
+
border-radius: _size(border-radius) _size(border-radius) 0 0;
|
| 27 |
+
display: block;
|
| 28 |
+
margin-bottom: 1.75em;
|
| 29 |
+
margin-left: -1.75em;
|
| 30 |
+
margin-top: -1.75em;
|
| 31 |
+
position: relative;
|
| 32 |
+
width: calc(100% + #{3.5em});
|
| 33 |
+
|
| 34 |
+
img {
|
| 35 |
+
border-radius: _size(border-radius) _size(border-radius) 0 0;
|
| 36 |
+
width: 100%;
|
| 37 |
+
}
|
| 38 |
+
}
|
| 39 |
+
}
|
| 40 |
+
|
| 41 |
+
@include breakpoint('<=medium') {
|
| 42 |
+
article {
|
| 43 |
+
margin: (_size(section-spacing, medium) * 0.5) _size(section-spacing, medium) (_size(section-spacing, medium) * 0.5) 0;
|
| 44 |
+
width: calc(50% - #{_size(section-spacing, medium) * 0.5});
|
| 45 |
+
}
|
| 46 |
+
}
|
| 47 |
+
|
| 48 |
+
@include breakpoint('<=small') {
|
| 49 |
+
article {
|
| 50 |
+
@include padding(1.5em, 1.5em);
|
| 51 |
+
margin: (_size(section-spacing, small) * 0.5) _size(section-spacing, small) (_size(section-spacing, small) * 0.5) 0;
|
| 52 |
+
width: calc(50% - #{_size(section-spacing, small) * 0.5} - 1px);
|
| 53 |
+
|
| 54 |
+
.image {
|
| 55 |
+
margin-bottom: 1.5em;
|
| 56 |
+
margin-left: -1.5em;
|
| 57 |
+
margin-top: -1.5em;
|
| 58 |
+
width: calc(100% + #{3em});
|
| 59 |
+
}
|
| 60 |
+
}
|
| 61 |
+
}
|
| 62 |
+
|
| 63 |
+
@include breakpoint('<=xsmall') {
|
| 64 |
+
display: block;
|
| 65 |
+
|
| 66 |
+
article {
|
| 67 |
+
width: 100%;
|
| 68 |
+
margin: 0 0 _size(element-margin) 0 !important;
|
| 69 |
+
}
|
| 70 |
+
}
|
| 71 |
+
}
|
assets/sass/components/_form.scss
ADDED
|
@@ -0,0 +1,236 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
///
|
| 2 |
+
/// Solid State by HTML5 UP
|
| 3 |
+
/// html5up.net | @ajlkn
|
| 4 |
+
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
| 5 |
+
///
|
| 6 |
+
|
| 7 |
+
/* Form */
|
| 8 |
+
|
| 9 |
+
form {
|
| 10 |
+
margin: 0 0 _size(element-margin) 0;
|
| 11 |
+
|
| 12 |
+
> :last-child {
|
| 13 |
+
margin-bottom: 0;
|
| 14 |
+
}
|
| 15 |
+
|
| 16 |
+
> .fields {
|
| 17 |
+
$gutter: (_size(element-margin) * 0.75);
|
| 18 |
+
|
| 19 |
+
@include vendor('display', 'flex');
|
| 20 |
+
@include vendor('flex-wrap', 'wrap');
|
| 21 |
+
width: calc(100% + #{$gutter * 2});
|
| 22 |
+
margin: ($gutter * -1) 0 _size(element-margin) ($gutter * -1);
|
| 23 |
+
|
| 24 |
+
> .field {
|
| 25 |
+
@include vendor('flex-grow', '0');
|
| 26 |
+
@include vendor('flex-shrink', '0');
|
| 27 |
+
padding: $gutter 0 0 $gutter;
|
| 28 |
+
width: calc(100% - #{$gutter * 1});
|
| 29 |
+
|
| 30 |
+
&.half {
|
| 31 |
+
width: calc(50% - #{$gutter * 0.5});
|
| 32 |
+
}
|
| 33 |
+
|
| 34 |
+
&.third {
|
| 35 |
+
width: calc(#{100% / 3} - #{$gutter * (1 / 3)});
|
| 36 |
+
}
|
| 37 |
+
|
| 38 |
+
&.quarter {
|
| 39 |
+
width: calc(25% - #{$gutter * 0.25});
|
| 40 |
+
}
|
| 41 |
+
}
|
| 42 |
+
}
|
| 43 |
+
|
| 44 |
+
@include breakpoint('<=xsmall') {
|
| 45 |
+
> .fields {
|
| 46 |
+
$gutter: (_size(element-margin) * 0.75);
|
| 47 |
+
|
| 48 |
+
width: calc(100% + #{$gutter * 2});
|
| 49 |
+
margin: ($gutter * -1) 0 _size(element-margin) ($gutter * -1);
|
| 50 |
+
|
| 51 |
+
> .field {
|
| 52 |
+
padding: $gutter 0 0 $gutter;
|
| 53 |
+
width: calc(100% - #{$gutter * 1});
|
| 54 |
+
|
| 55 |
+
&.half {
|
| 56 |
+
width: calc(100% - #{$gutter * 1});
|
| 57 |
+
}
|
| 58 |
+
|
| 59 |
+
&.third {
|
| 60 |
+
width: calc(100% - #{$gutter * 1});
|
| 61 |
+
}
|
| 62 |
+
|
| 63 |
+
&.quarter {
|
| 64 |
+
width: calc(100% - #{$gutter * 1});
|
| 65 |
+
}
|
| 66 |
+
}
|
| 67 |
+
}
|
| 68 |
+
}
|
| 69 |
+
}
|
| 70 |
+
|
| 71 |
+
label {
|
| 72 |
+
color: _palette(fg-bold);
|
| 73 |
+
display: block;
|
| 74 |
+
font-family: _font(family-heading);
|
| 75 |
+
font-size: 0.8em;
|
| 76 |
+
font-weight: _font(weight-heading-bold);
|
| 77 |
+
letter-spacing: _font(kern-heading);
|
| 78 |
+
margin: 0 0 (_size(element-margin) * 0.35) 0;
|
| 79 |
+
text-transform: uppercase;
|
| 80 |
+
}
|
| 81 |
+
|
| 82 |
+
input[type="text"],
|
| 83 |
+
input[type="password"],
|
| 84 |
+
input[type="email"],
|
| 85 |
+
input[type="tel"],
|
| 86 |
+
select,
|
| 87 |
+
textarea {
|
| 88 |
+
@include vendor('appearance', 'none');
|
| 89 |
+
background: _palette(border-bg);
|
| 90 |
+
border-radius: _size(border-radius);
|
| 91 |
+
border: none;
|
| 92 |
+
border: solid 2px _palette(border);
|
| 93 |
+
color: inherit;
|
| 94 |
+
display: block;
|
| 95 |
+
outline: 0;
|
| 96 |
+
padding: 0 1em;
|
| 97 |
+
text-decoration: none;
|
| 98 |
+
width: 100%;
|
| 99 |
+
|
| 100 |
+
&:invalid {
|
| 101 |
+
box-shadow: none;
|
| 102 |
+
}
|
| 103 |
+
|
| 104 |
+
&:focus {
|
| 105 |
+
border-color: desaturate(lighten(_palette(accent), 6), 3);
|
| 106 |
+
}
|
| 107 |
+
}
|
| 108 |
+
|
| 109 |
+
select {
|
| 110 |
+
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>");
|
| 111 |
+
background-size: 1.25rem;
|
| 112 |
+
background-repeat: no-repeat;
|
| 113 |
+
background-position: calc(100% - 1rem) center;
|
| 114 |
+
height: _size(element-height);
|
| 115 |
+
padding-right: _size(element-height);
|
| 116 |
+
text-overflow: ellipsis;
|
| 117 |
+
|
| 118 |
+
option {
|
| 119 |
+
color: _palette(fg-bold);
|
| 120 |
+
background: _palette(bg);
|
| 121 |
+
}
|
| 122 |
+
|
| 123 |
+
&:focus {
|
| 124 |
+
&::-ms-value {
|
| 125 |
+
background-color: transparent;
|
| 126 |
+
}
|
| 127 |
+
}
|
| 128 |
+
|
| 129 |
+
&::-ms-expand {
|
| 130 |
+
display: none;
|
| 131 |
+
}
|
| 132 |
+
}
|
| 133 |
+
|
| 134 |
+
input[type="text"],
|
| 135 |
+
input[type="password"],
|
| 136 |
+
input[type="email"],
|
| 137 |
+
select {
|
| 138 |
+
height: _size(element-height);
|
| 139 |
+
}
|
| 140 |
+
|
| 141 |
+
textarea {
|
| 142 |
+
padding: 0.75em 1em;
|
| 143 |
+
}
|
| 144 |
+
|
| 145 |
+
input[type="checkbox"],
|
| 146 |
+
input[type="radio"], {
|
| 147 |
+
@include vendor('appearance', 'none');
|
| 148 |
+
display: block;
|
| 149 |
+
float: left;
|
| 150 |
+
margin-right: -2em;
|
| 151 |
+
opacity: 0;
|
| 152 |
+
width: 1em;
|
| 153 |
+
z-index: -1;
|
| 154 |
+
|
| 155 |
+
& + label {
|
| 156 |
+
@include icon(false, solid);
|
| 157 |
+
color: _palette(fg);
|
| 158 |
+
cursor: pointer;
|
| 159 |
+
display: inline-block;
|
| 160 |
+
font-size: 1em;
|
| 161 |
+
font-family: _font(family);
|
| 162 |
+
text-transform: none;
|
| 163 |
+
letter-spacing: 0;
|
| 164 |
+
font-weight: _font(weight);
|
| 165 |
+
padding-left: (_size(element-height) * 0.6) + 0.75em;
|
| 166 |
+
padding-right: 0.75em;
|
| 167 |
+
position: relative;
|
| 168 |
+
|
| 169 |
+
&:before {
|
| 170 |
+
background: _palette(border-bg);
|
| 171 |
+
border-radius: _size(border-radius);
|
| 172 |
+
border: solid 2px _palette(border);
|
| 173 |
+
content: '';
|
| 174 |
+
display: inline-block;
|
| 175 |
+
font-size: 0.8em;
|
| 176 |
+
height: (_size(element-height) * 0.75);
|
| 177 |
+
left: 0;
|
| 178 |
+
line-height: (_size(element-height) * 0.75);
|
| 179 |
+
position: absolute;
|
| 180 |
+
text-align: center;
|
| 181 |
+
top: 0;
|
| 182 |
+
width: (_size(element-height) * 0.75);
|
| 183 |
+
}
|
| 184 |
+
}
|
| 185 |
+
|
| 186 |
+
&:checked + label {
|
| 187 |
+
&:before {
|
| 188 |
+
background: _palette(fg-bold);
|
| 189 |
+
border-color: _palette(fg-bold);
|
| 190 |
+
content: '\f00c';
|
| 191 |
+
color: _palette(bg);
|
| 192 |
+
}
|
| 193 |
+
}
|
| 194 |
+
|
| 195 |
+
&:focus + label {
|
| 196 |
+
&:before {
|
| 197 |
+
border-color: _palette(accent);
|
| 198 |
+
}
|
| 199 |
+
}
|
| 200 |
+
}
|
| 201 |
+
|
| 202 |
+
input[type="checkbox"] {
|
| 203 |
+
& + label {
|
| 204 |
+
&:before {
|
| 205 |
+
border-radius: _size(border-radius);
|
| 206 |
+
}
|
| 207 |
+
}
|
| 208 |
+
}
|
| 209 |
+
|
| 210 |
+
input[type="radio"] {
|
| 211 |
+
& + label {
|
| 212 |
+
&:before {
|
| 213 |
+
border-radius: 100%;
|
| 214 |
+
}
|
| 215 |
+
}
|
| 216 |
+
}
|
| 217 |
+
|
| 218 |
+
::-webkit-input-placeholder {
|
| 219 |
+
color: _palette(fg-light) !important;
|
| 220 |
+
opacity: 1.0;
|
| 221 |
+
}
|
| 222 |
+
|
| 223 |
+
:-moz-placeholder {
|
| 224 |
+
color: _palette(fg-light) !important;
|
| 225 |
+
opacity: 1.0;
|
| 226 |
+
}
|
| 227 |
+
|
| 228 |
+
::-moz-placeholder {
|
| 229 |
+
color: _palette(fg-light) !important;
|
| 230 |
+
opacity: 1.0;
|
| 231 |
+
}
|
| 232 |
+
|
| 233 |
+
:-ms-input-placeholder {
|
| 234 |
+
color: _palette(fg-light) !important;
|
| 235 |
+
opacity: 1.0;
|
| 236 |
+
}
|
assets/sass/components/_icon.scss
ADDED
|
@@ -0,0 +1,33 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
///
|
| 2 |
+
/// Solid State by HTML5 UP
|
| 3 |
+
/// html5up.net | @ajlkn
|
| 4 |
+
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
| 5 |
+
///
|
| 6 |
+
|
| 7 |
+
/* Icon */
|
| 8 |
+
|
| 9 |
+
.icon {
|
| 10 |
+
@include icon;
|
| 11 |
+
border-bottom: none;
|
| 12 |
+
position: relative;
|
| 13 |
+
|
| 14 |
+
> .label {
|
| 15 |
+
display: none;
|
| 16 |
+
}
|
| 17 |
+
|
| 18 |
+
&:before {
|
| 19 |
+
line-height: inherit;
|
| 20 |
+
}
|
| 21 |
+
|
| 22 |
+
&.solid {
|
| 23 |
+
&:before {
|
| 24 |
+
font-weight: 900;
|
| 25 |
+
}
|
| 26 |
+
}
|
| 27 |
+
|
| 28 |
+
&.brands {
|
| 29 |
+
&:before {
|
| 30 |
+
font-family: 'Font Awesome 5 Brands';
|
| 31 |
+
}
|
| 32 |
+
}
|
| 33 |
+
}
|
assets/sass/components/_icons.scss
ADDED
|
@@ -0,0 +1,28 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
///
|
| 2 |
+
/// Solid State by HTML5 UP
|
| 3 |
+
/// html5up.net | @ajlkn
|
| 4 |
+
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
| 5 |
+
///
|
| 6 |
+
|
| 7 |
+
/* Icons */
|
| 8 |
+
|
| 9 |
+
ul.icons {
|
| 10 |
+
cursor: default;
|
| 11 |
+
list-style: none;
|
| 12 |
+
padding-left: 0;
|
| 13 |
+
|
| 14 |
+
li {
|
| 15 |
+
display: inline-block;
|
| 16 |
+
padding: 0 1em 0 0;
|
| 17 |
+
|
| 18 |
+
&:last-child {
|
| 19 |
+
padding-right: 0;
|
| 20 |
+
}
|
| 21 |
+
|
| 22 |
+
.icon {
|
| 23 |
+
&:before {
|
| 24 |
+
font-size: 1.25em;
|
| 25 |
+
}
|
| 26 |
+
}
|
| 27 |
+
}
|
| 28 |
+
}
|
assets/sass/components/_image.scss
ADDED
|
@@ -0,0 +1,60 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
///
|
| 2 |
+
/// Solid State by HTML5 UP
|
| 3 |
+
/// html5up.net | @ajlkn
|
| 4 |
+
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
| 5 |
+
///
|
| 6 |
+
|
| 7 |
+
/* Image */
|
| 8 |
+
|
| 9 |
+
.image {
|
| 10 |
+
border-radius: _size(border-radius);
|
| 11 |
+
border: 0;
|
| 12 |
+
display: inline-block;
|
| 13 |
+
position: relative;
|
| 14 |
+
|
| 15 |
+
img {
|
| 16 |
+
border-radius: _size(border-radius);
|
| 17 |
+
display: block;
|
| 18 |
+
}
|
| 19 |
+
|
| 20 |
+
&.left,
|
| 21 |
+
&.right {
|
| 22 |
+
max-width: 40%;
|
| 23 |
+
|
| 24 |
+
img {
|
| 25 |
+
width: 100%;
|
| 26 |
+
}
|
| 27 |
+
}
|
| 28 |
+
|
| 29 |
+
&.left {
|
| 30 |
+
float: left;
|
| 31 |
+
padding: 0 1.5em 1em 0;
|
| 32 |
+
top: 0.25em;
|
| 33 |
+
}
|
| 34 |
+
|
| 35 |
+
&.right {
|
| 36 |
+
float: right;
|
| 37 |
+
padding: 0 0 1em 1.5em;
|
| 38 |
+
top: 0.25em;
|
| 39 |
+
}
|
| 40 |
+
|
| 41 |
+
&.fit {
|
| 42 |
+
display: block;
|
| 43 |
+
margin: 0 0 _size(element-margin) 0;
|
| 44 |
+
width: 100%;
|
| 45 |
+
|
| 46 |
+
img {
|
| 47 |
+
width: 100%;
|
| 48 |
+
}
|
| 49 |
+
}
|
| 50 |
+
|
| 51 |
+
&.main {
|
| 52 |
+
display: block;
|
| 53 |
+
margin: 0 0 (_size(element-margin) * 1.5) 0;
|
| 54 |
+
width: 100%;
|
| 55 |
+
|
| 56 |
+
img {
|
| 57 |
+
width: 100%;
|
| 58 |
+
}
|
| 59 |
+
}
|
| 60 |
+
}
|
assets/sass/components/_list.scss
ADDED
|
@@ -0,0 +1,56 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
///
|
| 2 |
+
/// Solid State by HTML5 UP
|
| 3 |
+
/// html5up.net | @ajlkn
|
| 4 |
+
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
| 5 |
+
///
|
| 6 |
+
|
| 7 |
+
/* List */
|
| 8 |
+
|
| 9 |
+
ol {
|
| 10 |
+
list-style: decimal;
|
| 11 |
+
margin: 0 0 _size(element-margin) 0;
|
| 12 |
+
padding-left: 1.25em;
|
| 13 |
+
|
| 14 |
+
li {
|
| 15 |
+
padding-left: 0.25em;
|
| 16 |
+
}
|
| 17 |
+
}
|
| 18 |
+
|
| 19 |
+
ul {
|
| 20 |
+
list-style: disc;
|
| 21 |
+
margin: 0 0 _size(element-margin) 0;
|
| 22 |
+
padding-left: 1em;
|
| 23 |
+
|
| 24 |
+
li {
|
| 25 |
+
padding-left: 0.5em;
|
| 26 |
+
}
|
| 27 |
+
|
| 28 |
+
&.alt {
|
| 29 |
+
list-style: none;
|
| 30 |
+
padding-left: 0;
|
| 31 |
+
|
| 32 |
+
li {
|
| 33 |
+
border-top: solid 1px _palette(border);
|
| 34 |
+
padding: 0.5em 0;
|
| 35 |
+
|
| 36 |
+
&:first-child {
|
| 37 |
+
border-top: 0;
|
| 38 |
+
padding-top: 0;
|
| 39 |
+
}
|
| 40 |
+
}
|
| 41 |
+
}
|
| 42 |
+
}
|
| 43 |
+
|
| 44 |
+
dl {
|
| 45 |
+
margin: 0 0 _size(element-margin) 0;
|
| 46 |
+
|
| 47 |
+
dt {
|
| 48 |
+
display: block;
|
| 49 |
+
font-weight: _font(weight-bold);
|
| 50 |
+
margin: 0 0 (_size(element-margin) * 0.5) 0;
|
| 51 |
+
}
|
| 52 |
+
|
| 53 |
+
dd {
|
| 54 |
+
margin-left: _size(element-margin);
|
| 55 |
+
}
|
| 56 |
+
}
|
assets/sass/components/_pagination.scss
ADDED
|
@@ -0,0 +1,75 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
///
|
| 2 |
+
/// Solid State by HTML5 UP
|
| 3 |
+
/// html5up.net | @ajlkn
|
| 4 |
+
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
| 5 |
+
///
|
| 6 |
+
|
| 7 |
+
/* Pagination */
|
| 8 |
+
|
| 9 |
+
ul.pagination {
|
| 10 |
+
cursor: default;
|
| 11 |
+
list-style: none;
|
| 12 |
+
padding-left: 0;
|
| 13 |
+
|
| 14 |
+
li {
|
| 15 |
+
display: inline-block;
|
| 16 |
+
padding-left: 0;
|
| 17 |
+
vertical-align: middle;
|
| 18 |
+
|
| 19 |
+
> .page {
|
| 20 |
+
@include vendor('transition', (
|
| 21 |
+
'background-color #{_duration(transition)} ease-in-out',
|
| 22 |
+
'color #{_duration(transition)} ease-in-out'
|
| 23 |
+
));
|
| 24 |
+
border-bottom: 0;
|
| 25 |
+
border-radius: _size(border-radius);
|
| 26 |
+
display: inline-block;
|
| 27 |
+
height: 1.5em;
|
| 28 |
+
line-height: 1.5em;
|
| 29 |
+
margin: 0 0.125em;
|
| 30 |
+
min-width: 1.5em;
|
| 31 |
+
padding: 0 0.5em;
|
| 32 |
+
text-align: center;
|
| 33 |
+
|
| 34 |
+
&:hover {
|
| 35 |
+
background-color: _palette(border-bg);
|
| 36 |
+
}
|
| 37 |
+
|
| 38 |
+
&.active {
|
| 39 |
+
background-color: _palette(accent);
|
| 40 |
+
}
|
| 41 |
+
}
|
| 42 |
+
|
| 43 |
+
&:first-child {
|
| 44 |
+
padding-right: 0.75em;
|
| 45 |
+
}
|
| 46 |
+
|
| 47 |
+
&:last-child {
|
| 48 |
+
padding-left: 0.75em;
|
| 49 |
+
}
|
| 50 |
+
}
|
| 51 |
+
|
| 52 |
+
@include breakpoint('<=xsmall') {
|
| 53 |
+
li {
|
| 54 |
+
&:nth-child(n+2):nth-last-child(n+2) {
|
| 55 |
+
display: none;
|
| 56 |
+
}
|
| 57 |
+
|
| 58 |
+
.button {
|
| 59 |
+
width: 100%;
|
| 60 |
+
}
|
| 61 |
+
|
| 62 |
+
&:first-child {
|
| 63 |
+
width: calc(50% - 2px);
|
| 64 |
+
text-align: left;
|
| 65 |
+
padding-right: 0.325em;
|
| 66 |
+
}
|
| 67 |
+
|
| 68 |
+
&:last-child {
|
| 69 |
+
width: calc(50% - 2px);
|
| 70 |
+
text-align: right;
|
| 71 |
+
padding-left: 0.325em;
|
| 72 |
+
}
|
| 73 |
+
}
|
| 74 |
+
}
|
| 75 |
+
}
|
assets/sass/components/_row.scss
ADDED
|
@@ -0,0 +1,35 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
///
|
| 2 |
+
/// Solid State by HTML5 UP
|
| 3 |
+
/// html5up.net | @ajlkn
|
| 4 |
+
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
| 5 |
+
///
|
| 6 |
+
|
| 7 |
+
/* Row */
|
| 8 |
+
|
| 9 |
+
.row {
|
| 10 |
+
@include html-grid(1.75em);
|
| 11 |
+
|
| 12 |
+
@include breakpoint('<=xlarge') {
|
| 13 |
+
@include html-grid(1.75em, xlarge);
|
| 14 |
+
}
|
| 15 |
+
|
| 16 |
+
@include breakpoint('<=large') {
|
| 17 |
+
@include html-grid(1.75em, large);
|
| 18 |
+
}
|
| 19 |
+
|
| 20 |
+
@include breakpoint('<=medium') {
|
| 21 |
+
@include html-grid(1.75em, medium);
|
| 22 |
+
}
|
| 23 |
+
|
| 24 |
+
@include breakpoint('<=small') {
|
| 25 |
+
@include html-grid(1.25em, small);
|
| 26 |
+
}
|
| 27 |
+
|
| 28 |
+
@include breakpoint('<=xsmall') {
|
| 29 |
+
@include html-grid(1.25em, xsmall);
|
| 30 |
+
}
|
| 31 |
+
|
| 32 |
+
@include breakpoint('<=xxsmall') {
|
| 33 |
+
@include html-grid(1.25em, xxsmall);
|
| 34 |
+
}
|
| 35 |
+
}
|
assets/sass/components/_section.scss
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
///
|
| 2 |
+
/// Solid State by HTML5 UP
|
| 3 |
+
/// html5up.net | @ajlkn
|
| 4 |
+
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
| 5 |
+
///
|
| 6 |
+
|
| 7 |
+
/* Section/Article */
|
| 8 |
+
|
| 9 |
+
section, article {
|
| 10 |
+
&.special {
|
| 11 |
+
text-align: center;
|
| 12 |
+
}
|
| 13 |
+
}
|
assets/sass/components/_table.scss
ADDED
|
@@ -0,0 +1,81 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
///
|
| 2 |
+
/// Solid State by HTML5 UP
|
| 3 |
+
/// html5up.net | @ajlkn
|
| 4 |
+
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
| 5 |
+
///
|
| 6 |
+
|
| 7 |
+
/* Table */
|
| 8 |
+
|
| 9 |
+
.table-wrapper {
|
| 10 |
+
-webkit-overflow-scrolling: touch;
|
| 11 |
+
overflow-x: auto;
|
| 12 |
+
}
|
| 13 |
+
|
| 14 |
+
table {
|
| 15 |
+
margin: 0 0 _size(element-margin) 0;
|
| 16 |
+
width: 100%;
|
| 17 |
+
|
| 18 |
+
tbody {
|
| 19 |
+
tr {
|
| 20 |
+
border: solid 1px _palette(border);
|
| 21 |
+
border-left: 0;
|
| 22 |
+
border-right: 0;
|
| 23 |
+
|
| 24 |
+
&:nth-child(2n + 1) {
|
| 25 |
+
background-color: _palette(border-bg);
|
| 26 |
+
}
|
| 27 |
+
}
|
| 28 |
+
}
|
| 29 |
+
|
| 30 |
+
td {
|
| 31 |
+
padding: 0.75em 0.75em;
|
| 32 |
+
}
|
| 33 |
+
|
| 34 |
+
th {
|
| 35 |
+
color: _palette(fg-bold);
|
| 36 |
+
font-size: 0.9em;
|
| 37 |
+
font-weight: _font(weight-bold);
|
| 38 |
+
padding: 0 0.75em 0.75em 0.75em;
|
| 39 |
+
text-align: left;
|
| 40 |
+
}
|
| 41 |
+
|
| 42 |
+
thead {
|
| 43 |
+
border-bottom: solid 2px _palette(border);
|
| 44 |
+
}
|
| 45 |
+
|
| 46 |
+
tfoot {
|
| 47 |
+
border-top: solid 2px _palette(border);
|
| 48 |
+
}
|
| 49 |
+
|
| 50 |
+
&.alt {
|
| 51 |
+
border-collapse: separate;
|
| 52 |
+
|
| 53 |
+
tbody {
|
| 54 |
+
tr {
|
| 55 |
+
td {
|
| 56 |
+
border: solid 1px _palette(border);
|
| 57 |
+
border-left-width: 0;
|
| 58 |
+
border-top-width: 0;
|
| 59 |
+
|
| 60 |
+
&:first-child {
|
| 61 |
+
border-left-width: 1px;
|
| 62 |
+
}
|
| 63 |
+
}
|
| 64 |
+
|
| 65 |
+
&:first-child {
|
| 66 |
+
td {
|
| 67 |
+
border-top-width: 1px;
|
| 68 |
+
}
|
| 69 |
+
}
|
| 70 |
+
}
|
| 71 |
+
}
|
| 72 |
+
|
| 73 |
+
thead {
|
| 74 |
+
border-bottom: 0;
|
| 75 |
+
}
|
| 76 |
+
|
| 77 |
+
tfoot {
|
| 78 |
+
border-top: 0;
|
| 79 |
+
}
|
| 80 |
+
}
|
| 81 |
+
}
|