CLLLEANED the forms, inputs, buttons, labels and form/button groups
This commit is contained in:
@ -1,26 +0,0 @@
|
||||
/*
|
||||
* Background
|
||||
* Styles for the background of the site.
|
||||
*
|
||||
* Dependencies:
|
||||
* styles/settings/z.scss
|
||||
* styles/tools/_absolute-centering.scss
|
||||
*
|
||||
* Version:
|
||||
* 1.0.0 - 2018/05/17
|
||||
*/
|
||||
.o-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: $s-z--background;
|
||||
overflow: hidden;
|
||||
|
||||
&__inner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
@ -1,11 +0,0 @@
|
||||
/*
|
||||
* Box Sizer
|
||||
* Simple box that acts like a ratio sizer
|
||||
*
|
||||
* Version:
|
||||
* 1.0.0 - 2018/08/10
|
||||
*/
|
||||
.o-box-sizer {
|
||||
width: 100%;
|
||||
/* padding-bottom will be set my JS */
|
||||
}
|
||||
@ -1,46 +0,0 @@
|
||||
/*
|
||||
* Button
|
||||
* Clicky Tappy Touchy Buttons!
|
||||
*
|
||||
* Dependencies:
|
||||
* styles/settings/animation.scss
|
||||
* styles/settings/colors.scss
|
||||
* styles/tools/_box-shadow.scss
|
||||
*
|
||||
*
|
||||
* Version:
|
||||
* 1.0.1 - 2018/05/14
|
||||
*/
|
||||
|
||||
//Default Button (applies to all styles)
|
||||
.o-btn {
|
||||
cursor: pointer;
|
||||
@include t-input--style-dp();
|
||||
|
||||
&__inner {
|
||||
padding: ( $t-input--style-dp__padding / 2 ) $t-input--style-dp__padding;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;/* Override Standard Link Underline */
|
||||
}
|
||||
}
|
||||
|
||||
//Button Group
|
||||
.o-btn-group {
|
||||
.o-btn + .o-btn {
|
||||
margin-left: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
/*** Custom Button Styles ***/
|
||||
@mixin o-basic-button-design($top, $bottom) {
|
||||
&::before,
|
||||
&:active &__inner {
|
||||
background: $bottom;
|
||||
}
|
||||
|
||||
&__inner {
|
||||
background: $top;
|
||||
}
|
||||
}
|
||||
@ -1,20 +0,0 @@
|
||||
/*
|
||||
* Form
|
||||
* Forms
|
||||
*
|
||||
* Dependencies:
|
||||
*
|
||||
*
|
||||
* Version:
|
||||
* 1.0.0 - 2018/05/13
|
||||
*/
|
||||
.o-form {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.o-form__group {
|
||||
+ .o-btn-group,
|
||||
+ .o-form__group {
|
||||
margin-top: 1em;
|
||||
}
|
||||
}
|
||||
@ -1,28 +0,0 @@
|
||||
/*
|
||||
* Input
|
||||
* Contains styles for input and input elements.
|
||||
*
|
||||
* Dependencies:
|
||||
* styles/tools/_input.scss
|
||||
*
|
||||
*
|
||||
* Version:
|
||||
* 1.0.0 - 2018/05/13
|
||||
*/
|
||||
|
||||
.o-input {
|
||||
@include t-input--style-dp();
|
||||
width: 100%;
|
||||
|
||||
&__inner {
|
||||
//Textarea
|
||||
margin: 0;//For some reason textareas have a 1px margin
|
||||
max-width: 100%;
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.o-label {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
@ -1,58 +0,0 @@
|
||||
/*
|
||||
* Loader
|
||||
* Styles for the animated loader.
|
||||
*
|
||||
* Dependencies:
|
||||
* styles/settings/animation.scss
|
||||
* styles/tools/_animation.scss
|
||||
* styles/tools/_transform.scss
|
||||
*
|
||||
* Version:
|
||||
* 1.0.0 - 2018/05/08
|
||||
*/
|
||||
|
||||
@include t-keyframes(o-loader--spin) {
|
||||
0% {
|
||||
@include t-rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
@include t-rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.o-loader {
|
||||
display: block;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
@include t-translate(-50%, -50%);
|
||||
|
||||
&__image {
|
||||
@include t-animation-name(o-loader--spin);
|
||||
@include t-animation-iteration-count(infinite);
|
||||
@include t-animation-timing-function($s-animation--ease-in-out);
|
||||
@include t-animation-duration(0.75s);
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
> * {
|
||||
stroke: $s-color--loader;
|
||||
}
|
||||
}
|
||||
|
||||
&__backdrop {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
}
|
||||
@ -1,110 +0,0 @@
|
||||
/*
|
||||
* Modal
|
||||
* Popup box designed to alert, or offer a unique interaction method.
|
||||
*
|
||||
* Dependencies:
|
||||
* styles/tools/_absolute-centering.scss
|
||||
* styles/tools/_shadow.scss
|
||||
* styles/settings/z.scss
|
||||
*
|
||||
* Version:
|
||||
* 1.0.0 - 2018/07/05
|
||||
*/
|
||||
$o-modal--backdrop: rgba(0, 0, 0, 0.7);
|
||||
$o-modal--background: white;
|
||||
|
||||
$o-modal--transition: 0.2s $s-animation--ease-out;
|
||||
|
||||
.o-modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: $s-z--modal;
|
||||
|
||||
&__inner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
&__backdrop {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: $o-modal--backdrop;
|
||||
|
||||
//Transition Properties
|
||||
transition: opacity #{$o-modal--transition};
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&__box {
|
||||
@extend %t-dp--shadow;
|
||||
background: $o-modal--background;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin: 5em auto;
|
||||
|
||||
//Transition properties
|
||||
transition: all #{$o-modal--transition};
|
||||
@include t-scale(0.4);
|
||||
opacity: 0;
|
||||
|
||||
&-heading,
|
||||
&-body,
|
||||
&-footer {
|
||||
padding: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin: 1em 0 0.5em;
|
||||
}
|
||||
|
||||
|
||||
//Media Queries
|
||||
@include t-media-query($s-xsmall-up) {
|
||||
&__box {
|
||||
max-width: 600px;
|
||||
|
||||
&.is-large {
|
||||
max-width: 900px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//Transition related
|
||||
&__transition {
|
||||
&-container {}//Top level container
|
||||
|
||||
//Entry animation
|
||||
&-enter {
|
||||
&-active {}
|
||||
&-done {}
|
||||
|
||||
&-active,&-done {
|
||||
.o-modal__backdrop {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.o-modal__box {
|
||||
@include t-scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Exit animation
|
||||
&-exit {
|
||||
&-active {}
|
||||
&-done {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,42 +0,0 @@
|
||||
/*
|
||||
* Title
|
||||
* Title Headings
|
||||
*
|
||||
* Dependencies:
|
||||
* styles/settings/responsive.scss
|
||||
* styles/tools/_responsive.scss
|
||||
*
|
||||
* Version:
|
||||
* 1.0.1 - 2018/06/05
|
||||
*/
|
||||
|
||||
//Font Sizes will scale according to
|
||||
.o-title {
|
||||
font-size: 1.75em;
|
||||
margin: 0.25em 0;
|
||||
}
|
||||
|
||||
.o-subtitle {
|
||||
font-size: 1em;
|
||||
margin: 0 0 0.5em 0;
|
||||
}
|
||||
|
||||
@include t-media-query($s-small-up) {
|
||||
.o-title {
|
||||
font-size: 2.5em;
|
||||
}
|
||||
|
||||
.o-subtitle {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
}
|
||||
|
||||
@include t-media-query($s-medium-up) {
|
||||
.o-title {
|
||||
font-size: 3em;
|
||||
}
|
||||
|
||||
.o-subtitle {
|
||||
font-size: 1.75em;
|
||||
}
|
||||
}
|
||||
@ -1,49 +0,0 @@
|
||||
/*
|
||||
* Video
|
||||
* Video Object, with general fallbacks and smarter controls for better
|
||||
* cross-browser compatibility.
|
||||
*
|
||||
* Also allows for better and more styled controls.
|
||||
*
|
||||
* Dependencies:
|
||||
*
|
||||
* Version:
|
||||
* 1.0.0 - 2018/05/07
|
||||
*/
|
||||
%o-video__media-cover {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit:cover;
|
||||
}
|
||||
|
||||
$o-video__fallback-z: 0;
|
||||
$o-video__video-z: 1;
|
||||
$o-video__loader-z: 2;
|
||||
|
||||
.o-video {
|
||||
position: relative;
|
||||
|
||||
&__video {
|
||||
width: 100%;
|
||||
display: block;
|
||||
position: relative;//Needed by some browser to allow the Z-Index to apply
|
||||
z-index: $o-video__video-z;
|
||||
|
||||
&.is-full {
|
||||
@extend %o-video__media-cover;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&__image {
|
||||
@extend %o-video__media-cover;
|
||||
z-index: $o-video__fallback-z;
|
||||
}
|
||||
|
||||
&__loader {
|
||||
z-index: $o-video__loader-z;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user