forked from Brightspace/valence-ui-input
-
Notifications
You must be signed in to change notification settings - Fork 0
/
input.scss
78 lines (70 loc) · 1.5 KB
/
input.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
@import 'bower_components/d2l-colors/d2l-colors.scss';
@import 'bower_components/vui-focus/focus.scss';
@mixin vui-input(
$background-color: $d2l-color-white,
$background-color-hover: null,
$border-radius: 0.3rem,
$box-shadow: inset 0 2px 0 0 rgba(185, 194, 208, .2),
$has-text: true,
$height: auto,
$line-height: 1.2rem,
$padding: 0.4rem 1rem,
$padding-focus: calc(0.4rem - 1px) calc(1rem - 1px),
$width : 100%
) {
border-radius: $border-radius;
border-style: solid;
box-sizing: border-box;
display: inline-block;
height: $height;
margin: 0;
vertical-align: middle;
width: $width;
transition: {
duration: 0.5s;
timing-function: ease;
property: background-color, border-color;
}
@if $has-text {
color: $d2l-color-ferrite;
font-family: inherit;
font-size: 1rem;
font-weight: 300;
letter-spacing: 0.015rem;
line-height: $line-height;
&::placeholder {
color: $d2l-color-titanius;
}
}
&,
&:hover:disabled {
background-color: $background-color;
border-color: $d2l-color-titanius;
border-width: 1px;
box-shadow: $box-shadow;
padding: $padding;
}
&:hover,
&:focus,
&.vui-input-focus {
background-color: $background-color-hover;
border-color: $d2l-color-celestine;
border-width: 2px;
outline-width: 0;
padding: $padding-focus;
}
&[aria-invalid='true'] {
border-color: $d2l-color-cinnabar;
}
&:disabled {
opacity: 0.5;
}
&::-webkit-search-cancel-button {
display: none;
}
&::-ms-clear {
display: none;
width: 0;
height: 0;
}
}