Skip to content

Commit 799b4c5

Browse files
FerieFerie
committed
main styles components
1 parent 68d2781 commit 799b4c5

File tree

4 files changed

+268
-0
lines changed

4 files changed

+268
-0
lines changed

‎assets/sass/components/_errors.scss‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
// Errors
2+
// - Error bars
3+
// - Http requests error boxes
4+
5+
.httpRequestError,
6+
.internetConnectionStatusBar {
7+
position: fixed;
8+
top: 0;
9+
left: 0;
10+
right: 0;
11+
margin: 0 auto;
12+
padding: rem(16);
13+
text-align: center;
14+
z-index: 100;
15+
16+
/* Angular-Animation classes and Animate.css animations */
17+
&.ng-leave {
18+
animation: .2s slideOutUp;
19+
}
20+
21+
&.ng-enter {
22+
animation: .5s slideInDown;
23+
}
24+
}
25+
26+
.httpRequestError {
27+
background-color: $yellow;
28+
color: $off-black;
29+
}
30+
31+
.internetConnectionStatusBar {
32+
background-color: $pink;
33+
color: $white;
34+
}
35+
36+
.httpError {
37+
margin: rem(128) auto;
38+
max-width: rem(1024);
39+
}
40+
41+
.httpErrorMessage {
42+
width: 100%;
43+
44+
> .reloadPage {
45+
background-color: $off-black;
46+
}
47+
}
48+
49+
@include grid-media-query("xsmall-outwards") {
50+
.httpErrorMessage {
51+
margin: 0;
52+
}
53+
}
54+
55+
@include grid-media-query("small-outwards") {
56+
.httpErrorMessage {
57+
width: rem(520);
58+
}
59+
}
60+
61+
@include grid-media-query("medium-outwards") {
62+
.httpError {
63+
@include svg-icons(spilt_milk_error_img);
64+
background-position: right;
65+
padding: rem(160) 0;
66+
}
67+
}

‎assets/sass/components/_inputs.scss‎

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
// Form fields
2+
3+
$field-background-colour: $whiteF8;
4+
$field-border-colour: $greyD8;
5+
$field-text-colour: $off-black;
6+
$field-text-focus-colour: $off-black;
7+
$invalid-field-colour: $yellow;
8+
$invalid-text-field-colour: $darker-yellow;
9+
$field-placeholder-colour: $grey9B;
10+
11+
.formField {
12+
margin: 0 0 em(40) 0;
13+
padding: 0;
14+
}
15+
16+
%focusStyling {
17+
border-color: $field-text-focus-colour;
18+
color: $field-text-focus-colour;
19+
}
20+
21+
input[type="text"],
22+
input[type="tel"],
23+
input[type="email"],
24+
input[type="password"],
25+
input[type="search"],
26+
input[type="number"],
27+
input[type="tel"],
28+
select,
29+
textarea {
30+
@extend %base-font;
31+
@include box-sizing;
32+
display: inline-block;
33+
background-color: $field-background-colour;
34+
border: 1px solid $field-border-colour;
35+
border-radius: $border-radius;
36+
font-size: $base-font-size;
37+
color: $field-text-colour;
38+
outline: none;
39+
padding: em(8);
40+
width: 100%;
41+
}
42+
43+
input[type="text"].inline,
44+
input[type="tel"].inline,
45+
input[type="email"].inline,
46+
input[type="password"].inline,
47+
input[type="search"].inline,
48+
input[type="number"].inline,
49+
input[type="tel"].inline,
50+
select.inline,
51+
textarea.inline {
52+
width: auto;
53+
}
54+
55+
select {
56+
padding: em(7) em(24) em(7) em(12);
57+
-webkit-appearance: none;
58+
}
59+
60+
input[type="text"]:focus,
61+
input[type="tel"]:focus,
62+
input[type="email"]:focus,
63+
input[type="search"]:focus,
64+
input[type="password"]:focus,
65+
input[type="number"]:focus,
66+
input[type="tel"]:focus,
67+
select:focus,
68+
textarea:focus {
69+
@extend %focusStyling;
70+
background-color: $field-background-colour;
71+
}
72+
73+
input.ng-invalid.ng-touched,
74+
select.ng-invalid.ng-touched,
75+
textarea.ng-invalid.ng-touched {
76+
border-bottom: 1px solid $invalid-field-colour;
77+
}
78+
79+
.input-errors-container {
80+
position: relative;
81+
}
82+
83+
.input-error {
84+
position: absolute;
85+
top: em(5);
86+
color: $invalid-text-field-colour;
87+
}
88+
89+
:-webkit-autofill {
90+
-webkit-text-fill-color: $field-text-colour;
91+
-webkit-box-shadow: 0 0 0 1000px $white inset;
92+
93+
&:focus {
94+
-webkit-text-fill-color: $field-text-focus-colour;
95+
}
96+
}
97+
98+
:-moz-autofill {
99+
-moz-text-fill-color: $field-text-colour;
100+
-moz-box-shadow: 0 0 0 1000px $white inset;
101+
102+
&:focus {
103+
-webkit-text-fill-color: $field-text-focus-colour;
104+
}
105+
}
106+
107+
:-o-autofill {
108+
-o-text-fill-color: $field-text-colour;
109+
-o-box-shadow: 0 0 0 1000px $white inset;
110+
111+
&:focus {
112+
-webkit-text-fill-color: $field-text-focus-colour;
113+
}
114+
}
115+
116+
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
117+
color: $field-placeholder-colour;
118+
}
119+
120+
:-moz-placeholder { /* Firefox 4-18 */
121+
color: $field-placeholder-colour;
122+
opacity: 1;
123+
}
124+
125+
::-moz-placeholder { /* Firefox 19+ */
126+
color: $field-placeholder-colour;
127+
opacity: 1;
128+
}
129+
130+
:-ms-input-placeholder { /* Internet Explorer 10-11 */
131+
color: $field-placeholder-colour;
132+
}
133+
134+
::-ms-input-placeholder { /* Microsoft Edge */
135+
color: $field-placeholder-colour;
136+
}
137+
138+
/*** Custom arrow on HTML tag select only for IE8, IE9 ***/
139+
/*** display none for this following element is for all the other browsers ***/
140+
.selectTagWrapper:before {
141+
display: none;
142+
}
143+
144+
.lt-ie9 .selectTagWrapper,
145+
.ie9 .selectTagWrapper {
146+
position: relative;
147+
border: 1px solid $field-border-colour;
148+
overflow: hidden;
149+
width: 100%;
150+
}
151+
152+
.lt-ie9 .selectTagWrapper:before,
153+
.ie9 .selectTagWrapper:before {
154+
display: block;
155+
position: absolute;
156+
top: 40%;
157+
left: 95%;
158+
font-size: em(5);
159+
width: 100%;
160+
}
161+
162+
.lt-ie9 .selectTagWrapper > select,
163+
.ie9 .selectTagWrapper > select {
164+
border: none;
165+
width: 125%;
166+
}

‎assets/sass/components/_links.scss‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
// Links
2+
3+
$link-colour: $lightBlue;
4+
5+
.link,
6+
.link:visited {
7+
color: $link-colour;
8+
cursor: pointer;
9+
text-decoration: none;
10+
11+
&:active {
12+
color: scale-color($link-colour, $lightness: -15%);
13+
}
14+
15+
&:hover {
16+
color: scale-color($link-colour, $lightness: 15%);
17+
text-decoration: underline;
18+
}
19+
}

‎assets/sass/components/_overlay.scss‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
// Overlays
2+
3+
.overlay {
4+
@include opacity(0.8);
5+
position: fixed;
6+
top: 0;
7+
left: 0;
8+
right: 0;
9+
bottom: 0;
10+
background-image: url('../../assets/images/spinning-loader.gif');
11+
background-repeat: no-repeat;
12+
background-position: center;
13+
background-size: rem(80);
14+
background-color: $white;
15+
z-index: 50;
16+
}

0 commit comments

Comments
 (0)