yanas преди 8 години
родител
ревизия
ee4ddd5446
променени са 2 файла, в които са добавени 121 реда и са изтрити 121 реда
  1. 103
    103
      css/_mixins.scss
  2. 18
    18
      css/components/_input-slider.scss

+ 103
- 103
css/_mixins.scss Целия файл

@@ -2,52 +2,52 @@
2 2
  * Animation mixin.
3 3
  */
4 4
 @mixin animation($animate...) {
5
-  $max: length($animate);
6
-  $animations: '';
5
+    $max: length($animate);
6
+    $animations: '';
7 7
 
8
-  @for $i from 1 through $max {
9
-    $animations: #{$animations + nth($animate, $i)};
8
+    @for $i from 1 through $max {
9
+        $animations: #{$animations + nth($animate, $i)};
10 10
 
11
-    @if $i < $max {
12
-      $animations: #{$animations + ", "};
11
+        @if $i < $max {
12
+            $animations: #{$animations + ", "};
13
+        }
13 14
     }
14
-  }
15
-  -webkit-animation: $animations;
16
-  -moz-animation:    $animations;
17
-  -o-animation:      $animations;
18
-  animation:         $animations;
15
+    -webkit-animation: $animations;
16
+    -moz-animation:    $animations;
17
+    -o-animation:      $animations;
18
+    animation:         $animations;
19 19
 }
20 20
 
21 21
 @mixin flex() {
22
-  display: -webkit-box;
23
-  display: -moz-box;
24
-  display: -ms-flexbox;
25
-  display: -webkit-flex;
26
-  display: flex;
22
+    display: -webkit-box;
23
+    display: -moz-box;
24
+    display: -ms-flexbox;
25
+    display: -webkit-flex;
26
+    display: flex;
27 27
 }
28 28
 
29 29
 /**
30 30
  * Keyframes mixin.
31 31
  */
32 32
 @mixin keyframes($animationName) {
33
-  @-webkit-keyframes #{$animationName} {
34
-    @content;
35
-  }
36
-  @-moz-keyframes #{$animationName} {
37
-    @content;
38
-  }
39
-  @-o-keyframes #{$animationName} {
40
-    @content;
41
-  }
42
-  @keyframes #{$animationName} {
43
-    @content;
44
-  }
33
+    @-webkit-keyframes #{$animationName} {
34
+        @content;
35
+    }
36
+    @-moz-keyframes #{$animationName} {
37
+        @content;
38
+    }
39
+    @-o-keyframes #{$animationName} {
40
+        @content;
41
+    }
42
+    @keyframes #{$animationName} {
43
+        @content;
44
+    }
45 45
 }
46 46
 
47 47
 @mixin circle($diameter) {
48
-  width: $diameter;
49
-  height: $diameter;
50
-  border-radius: 50%;
48
+    width: $diameter;
49
+    height: $diameter;
50
+    border-radius: 50%;
51 51
 }
52 52
 
53 53
 /**
@@ -60,10 +60,10 @@
60 60
 }
61 61
 
62 62
 @mixin absoluteAligning() {
63
-  top: 50%;
64
-  left: 50%;
65
-  position: absolute;
66
-  @include transform(translate(-50%, -50%));
63
+    top: 50%;
64
+    left: 50%;
65
+    position: absolute;
66
+    @include transform(translate(-50%, -50%));
67 67
 }
68 68
 
69 69
 /**
@@ -75,52 +75,52 @@
75 75
 }
76 76
 
77 77
 @mixin transform($func) {
78
-  -moz-transform: $func;
79
-  -ms-transform: $func;
80
-  -webkit-transform: $func;
81
-  -o-transform: $func;
82
-  transform: $func;
78
+    -moz-transform: $func;
79
+    -ms-transform: $func;
80
+    -webkit-transform: $func;
81
+    -o-transform: $func;
82
+    transform: $func;
83 83
 }
84 84
 
85 85
 @mixin transition($transition...) {
86
-  -moz-transition:    $transition;
87
-  -o-transition:      $transition;
88
-  -webkit-transition: $transition;
89
-  transition:         $transition;
86
+    -moz-transition:    $transition;
87
+    -o-transition:      $transition;
88
+    -webkit-transition: $transition;
89
+    transition:         $transition;
90 90
 }
91 91
 
92 92
 /**
93 93
  * Mixin styling a placeholder.
94 94
  **/
95 95
 @mixin placeholder() {
96
-  $selectors: (
97
-          "::-webkit-input-placeholder",
98
-          "::-moz-placeholder",
99
-          ":-moz-placeholder",
100
-          ":-ms-input-placeholder"
101
-  );
102
-
103
-  @each $selector in $selectors {
104
-    #{$selector} {
105
-      @content;
96
+    $selectors: (
97
+        "::-webkit-input-placeholder",
98
+        "::-moz-placeholder",
99
+        ":-moz-placeholder",
100
+        ":-ms-input-placeholder"
101
+    );
102
+
103
+    @each $selector in $selectors {
104
+        #{$selector} {
105
+            @content;
106
+        }
106 107
     }
107
-  }
108 108
 }
109 109
 
110 110
 /**
111 111
  * Mixin styling a slider track for different browsers.
112 112
  **/
113 113
 @mixin slider() {
114
-  $selectors: (
115
-          "input[type=range]::-webkit-slider-runnable-track",
116
-          "input[type=range]::-moz-range-track",
117
-          "input[type=range]::-ms-track"
118
-  );
119
-
120
-  @each $selector in $selectors {
121
-    #{$selector} {
122
-      @content;
123
-    }
114
+    $selectors: (
115
+        "input[type=range]::-webkit-slider-runnable-track",
116
+        "input[type=range]::-moz-range-track",
117
+        "input[type=range]::-ms-track"
118
+    );
119
+
120
+    @each $selector in $selectors {
121
+        #{$selector} {
122
+            @content;
123
+        }
124 124
   }
125 125
 }
126 126
 
@@ -128,62 +128,62 @@
128 128
  * Mixin styling a slider thumb for different browsers.
129 129
  **/
130 130
 @mixin slider-thumb() {
131
-  $selectors: (
132
-          "input[type=range]::-webkit-slider-thumb",
133
-          "input[type=range]::-moz-range-thumb",
134
-          "input[type=range]::-ms-thumb"
135
-  );
136
-
137
-  @each $selector in $selectors {
138
-    #{$selector} {
139
-      @content;
131
+    $selectors: (
132
+        "input[type=range]::-webkit-slider-thumb",
133
+        "input[type=range]::-moz-range-thumb",
134
+        "input[type=range]::-ms-thumb"
135
+    );
136
+
137
+    @each $selector in $selectors {
138
+        #{$selector} {
139
+            @content;
140
+        }
140 141
     }
141
-  }
142 142
 }
143 143
 
144 144
 @mixin box-shadow($h, $y, $blur, $color, $inset: false) {
145
-  @if $inset {
146
-    -webkit-box-shadow: inset $h $y $blur $color;
147
-    -moz-box-shadow: inset $h $y $blur $color;
148
-    box-shadow: inset $h $y $blur $color;
149
-  } @else {
150
-    -webkit-box-shadow: $h $y $blur $color;
151
-    -moz-box-shadow: $h $y $blur $color;
152
-    box-shadow: $h $y $blur $color;
153
-  }
145
+    @if $inset {
146
+        -webkit-box-shadow: inset $h $y $blur $color;
147
+        -moz-box-shadow: inset $h $y $blur $color;
148
+        box-shadow: inset $h $y $blur $color;
149
+    } @else {
150
+        -webkit-box-shadow: $h $y $blur $color;
151
+        -moz-box-shadow: $h $y $blur $color;
152
+        box-shadow: $h $y $blur $color;
153
+    }
154 154
 }
155 155
 
156 156
 @mixin no-box-shadow {
157
-  -webkit-box-shadow: none;
158
-  -moz-box-shadow: none;
159
-  box-shadow: none;
157
+    -webkit-box-shadow: none;
158
+    -moz-box-shadow: none;
159
+    box-shadow: none;
160 160
 }
161 161
 
162 162
 @mixin box-sizing($box-model) {
163
-  -webkit-box-sizing: $box-model; // Safari <= 5
164
-     -moz-box-sizing: $box-model; // Firefox <= 19
165
-          box-sizing: $box-model;
163
+    -webkit-box-sizing: $box-model; // Safari <= 5
164
+    -moz-box-sizing: $box-model; // Firefox <= 19
165
+    box-sizing: $box-model;
166 166
 }
167 167
 
168 168
 @mixin border-radius($radius) {
169
-  -webkit-border-radius: $radius;
170
-  border-radius: $radius;
171
-  /* stops bg color from leaking outside the border: */
172
-  background-clip: padding-box;
169
+    -webkit-border-radius: $radius;
170
+    border-radius: $radius;
171
+    /* stops bg color from leaking outside the border: */
172
+    background-clip: padding-box;
173 173
 }
174 174
 
175 175
 @mixin opacity($opacity) {
176
-  opacity: $opacity;
177
-  $opacity-ie: $opacity * 100;
178
-  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=$opacity-ie);
179
-  filter: alpha(opacity=$opacity-ie); //IE8
176
+    opacity: $opacity;
177
+    $opacity-ie: $opacity * 100;
178
+    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=$opacity-ie);
179
+    filter: alpha(opacity=$opacity-ie); //IE8
180 180
 }
181 181
 
182 182
 @mixin text-truncate {
183
-  display: block;
184
-  overflow: hidden;
185
-  text-overflow: ellipsis;
186
-  white-space: nowrap;
183
+    display: block;
184
+    overflow: hidden;
185
+    text-overflow: ellipsis;
186
+    white-space: nowrap;
187 187
 }
188 188
 
189 189
 /**
@@ -191,5 +191,5 @@
191 191
  * (opacity) value.
192 192
  */
193 193
 @mixin transparentBg($color, $alpha) {
194
-  background-color: rgba(red($color), green($color), blue($color), $alpha);
194
+    background-color: rgba(red($color), green($color), blue($color), $alpha);
195 195
 }

+ 18
- 18
css/components/_input-slider.scss Целия файл

@@ -2,40 +2,40 @@
2 2
  * Disable the default webkit styles for range inputs (sliders).
3 3
  */
4 4
 input[type=range]{
5
-  -webkit-appearance: none;
6
-  background: none;
5
+    -webkit-appearance: none;
6
+    background: none;
7 7
 }
8 8
 
9 9
 /**
10 10
  * Disable the default focus styles for webkit range inputs (sliders).
11 11
  */
12 12
 input[type=range]:focus {
13
-  outline: none;
13
+    outline: none;
14 14
 }
15 15
 
16 16
 /**
17 17
  * Include the mixin for a range input style.
18 18
  */
19 19
 @include slider {
20
-  background: $sliderTrackBackground;
21
-  border: none;
22
-  border-radius: 3px;
23
-  cursor: pointer;
24
-  height: 6px;
25
-  width: 100%;
20
+    background: $sliderTrackBackground;
21
+    border: none;
22
+    border-radius: 3px;
23
+    cursor: pointer;
24
+    height: 6px;
25
+    width: 100%;
26 26
 }
27 27
 
28 28
 /**
29 29
  * Include the mixin for a range input thumb style.
30 30
  */
31 31
 @include slider-thumb {
32
-  -webkit-appearance: none;
33
-  background: white;
34
-  border: 1px solid $sliderThumbBackground;
35
-  border-radius: 50%;
36
-  box-shadow: 0px 0px 1px $sliderThumbBackground;
37
-  cursor: pointer;
38
-  height: 14px;
39
-  margin-top: -4px;
40
-  width: 14px;
32
+    -webkit-appearance: none;
33
+    background: white;
34
+    border: 1px solid $sliderThumbBackground;
35
+    border-radius: 50%;
36
+    box-shadow: 0px 0px 1px $sliderThumbBackground;
37
+    cursor: pointer;
38
+    height: 14px;
39
+    margin-top: -4px;
40
+    width: 14px;
41 41
 }

Loading…
Отказ
Запис