149 lines
3.0 KiB
SCSS
149 lines
3.0 KiB
SCSS
/*
|
|
* Input
|
|
* Tools for various input types
|
|
*
|
|
* Dependencies:
|
|
* styles/settings/colors.scss
|
|
* styles/settings/animation.scss
|
|
* styles/tools/_box-shadow.scss
|
|
* styles/tools/_transform.scss
|
|
*
|
|
* Version:
|
|
* 1.0.0 - 2018/02/07
|
|
*/
|
|
@mixin t-placeholder() {
|
|
&:moz-placeholder {@content;}
|
|
&:ms-input-placeholder {@content;}
|
|
&::placeholder {@content;}
|
|
&::moz-placeholder {@content;}
|
|
&::-webkit-input-placeholder {@content;}
|
|
}
|
|
|
|
|
|
$t-input--style-dp__padding: 1em;
|
|
//Basic Design
|
|
@mixin t-input--style($top, $bottom) {
|
|
&::before,
|
|
&:active &__inner {
|
|
background: $bottom;
|
|
}
|
|
|
|
&__inner {
|
|
background: $top;
|
|
}
|
|
}
|
|
|
|
//I really hate that this has to be a mixin...
|
|
@mixin t-input--style-dp() {
|
|
//Custom DomsPlace Input & Button Styling
|
|
position: relative;
|
|
display: inline-block;
|
|
padding-bottom: $t-input--style-dp__padding / 2;
|
|
|
|
//"Bottom" (Background)
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
height: 50%;
|
|
width: 100%;
|
|
display: block;
|
|
z-index: 0;
|
|
|
|
background: $s-color--input-default__bottom;
|
|
border: $s-color--input-default__border;
|
|
border-radius: $t-input--style-dp__padding / 3;
|
|
|
|
//Background Shadow (3D effect)
|
|
@include t-box-shadow(
|
|
0,
|
|
$t-input--style-dp__padding/16,
|
|
$t-input--style-dp__padding / 8,
|
|
0,
|
|
rgba(0, 0, 0, 0.1),
|
|
true
|
|
);
|
|
}
|
|
|
|
//Inner (either the text of the button or the input element itself)
|
|
&__inner {
|
|
position: relative;
|
|
display: block;
|
|
width: 100%;
|
|
padding: $t-input--style-dp__padding / 2;
|
|
|
|
background: $s-color--input-default__top;
|
|
border: $s-color--input-default__border;
|
|
transition: all 0.1s $s-animation--ease-out;
|
|
border-radius: $t-input--style-dp__padding / 3;
|
|
|
|
//Shine effect
|
|
@include t-box-shadow(
|
|
0,
|
|
$t-input--style-dp__padding/8,
|
|
$t-input--style-dp__padding/8,
|
|
0,
|
|
rgba(255,255,255, 0.4),
|
|
true
|
|
);
|
|
}
|
|
|
|
//Pseudo elements
|
|
&:hover &__inner {
|
|
@include t-translate-y($t-input--style-dp__padding / 8);
|
|
}
|
|
|
|
&:active &__inner {
|
|
@include t-translate-y($t-input--style-dp__padding / 4);
|
|
}
|
|
|
|
&:focus::before,
|
|
&__inner:focus {
|
|
@include t-box-shadow(
|
|
0,
|
|
0,
|
|
$t-input--style-dp__padding/8,
|
|
$t-input--style-dp__padding/8,
|
|
$s-color--input-focus__outline
|
|
);
|
|
}
|
|
|
|
&::-moz-focus-inner,
|
|
&__inner::-moz-focus-inner {
|
|
border: 0;
|
|
}
|
|
|
|
//Styles
|
|
&--style-primary {
|
|
@include t-input--style(
|
|
$s-color--input-primary__top,
|
|
$s-color--input-primary__bottom
|
|
);
|
|
}
|
|
|
|
//Secondary (Light Blue)
|
|
&--style-secondary {
|
|
@include t-input--style(
|
|
$s-color--input-secondary__top,
|
|
$s-color--input-secondary__bottom
|
|
);
|
|
}
|
|
|
|
//Danger
|
|
&--style-danger {
|
|
@include t-input--style(
|
|
$s-color--input-danger__top,
|
|
$s-color--input-danger__bottom
|
|
);
|
|
}
|
|
|
|
//Warning
|
|
&--style-warning {
|
|
@include t-input--style(
|
|
$s-color--input-warning__top,
|
|
$s-color--input-warning__bottom
|
|
);
|
|
}
|
|
}
|