spectre_scss 0.3.2.0 → 0.4.0.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +11 -9
- data/Rakefile +4 -5
- data/lib/spectre_scss/version.rb +1 -1
- data/spectre_scss.gemspec +1 -2
- data/vendor/assets/stylesheets/spectre/{src/_accordions.scss → _accordions.scss} +1 -1
- data/vendor/assets/stylesheets/spectre/{src/_animations.scss → _animations.scss} +0 -0
- data/vendor/assets/stylesheets/spectre/{src/_asian.scss → _asian.scss} +0 -0
- data/vendor/assets/stylesheets/spectre/{src/_autocomplete.scss → _autocomplete.scss} +1 -6
- data/vendor/assets/stylesheets/spectre/{src/_avatars.scss → _avatars.scss} +0 -0
- data/vendor/assets/stylesheets/spectre/{src/_badges.scss → _badges.scss} +0 -0
- data/vendor/assets/stylesheets/spectre/{src/_bars.scss → _bars.scss} +0 -0
- data/vendor/assets/stylesheets/spectre/{src/_base.scss → _base.scss} +0 -0
- data/vendor/assets/stylesheets/spectre/{src/_breadcrumbs.scss → _breadcrumbs.scss} +0 -0
- data/vendor/assets/stylesheets/spectre/{src/_buttons.scss → _buttons.scss} +1 -1
- data/vendor/assets/stylesheets/spectre/{src/_calendars.scss → _calendars.scss} +1 -2
- data/vendor/assets/stylesheets/spectre/{src/_cards.scss → _cards.scss} +1 -1
- data/vendor/assets/stylesheets/spectre/{src/_carousels.scss → _carousels.scss} +0 -0
- data/vendor/assets/stylesheets/spectre/{src/_chips.scss → _chips.scss} +1 -1
- data/vendor/assets/stylesheets/spectre/{src/_codes.scss → _codes.scss} +1 -1
- data/vendor/assets/stylesheets/spectre/{src/_comparison-sliders.scss → _comparison-sliders.scss} +0 -0
- data/vendor/assets/stylesheets/spectre/{src/_dropdowns.scss → _dropdowns.scss} +0 -0
- data/vendor/assets/stylesheets/spectre/{src/_empty.scss → _empty.scss} +0 -0
- data/vendor/assets/stylesheets/spectre/{src/_filters.scss → _filters.scss} +0 -0
- data/vendor/assets/stylesheets/spectre/{src/_forms.scss → _forms.scss} +12 -12
- data/vendor/assets/stylesheets/spectre/{src/_icons.scss → _icons.scss} +0 -0
- data/vendor/assets/stylesheets/spectre/{src/_labels.scss → _labels.scss} +1 -2
- data/vendor/assets/stylesheets/spectre/{src/_layout.scss → _layout.scss} +12 -10
- data/vendor/assets/stylesheets/spectre/{src/_media.scss → _media.scss} +1 -1
- data/vendor/assets/stylesheets/spectre/{src/_menus.scss → _menus.scss} +1 -1
- data/vendor/assets/stylesheets/spectre/{src/_meters.scss → _meters.scss} +0 -0
- data/vendor/assets/stylesheets/spectre/{src/_mixins.scss → _mixins.scss} +19 -18
- data/vendor/assets/stylesheets/spectre/{src/_modals.scss → _modals.scss} +1 -1
- data/vendor/assets/stylesheets/spectre/{src/_navbar.scss → _navbar.scss} +0 -0
- data/vendor/assets/stylesheets/spectre/{src/_navs.scss → _navs.scss} +0 -0
- data/vendor/assets/stylesheets/spectre/{src/_normalize.scss → _normalize.scss} +0 -0
- data/vendor/assets/stylesheets/spectre/{src/_pagination.scss → _pagination.scss} +0 -0
- data/vendor/assets/stylesheets/spectre/{src/_panels.scss → _panels.scss} +0 -0
- data/vendor/assets/stylesheets/spectre/{src/_parallax.scss → _parallax.scss} +18 -20
- data/vendor/assets/stylesheets/spectre/{src/_popovers.scss → _popovers.scss} +1 -1
- data/vendor/assets/stylesheets/spectre/{src/_progress.scss → _progress.scss} +0 -0
- data/vendor/assets/stylesheets/spectre/{src/_sliders.scss → _sliders.scss} +1 -1
- data/vendor/assets/stylesheets/spectre/{src/_steps.scss → _steps.scss} +1 -1
- data/vendor/assets/stylesheets/spectre/{src/_tables.scss → _tables.scss} +0 -0
- data/vendor/assets/stylesheets/spectre/{src/_tabs.scss → _tabs.scss} +1 -1
- data/vendor/assets/stylesheets/spectre/{src/_tiles.scss → _tiles.scss} +1 -1
- data/vendor/assets/stylesheets/spectre/{src/_timelines.scss → _timelines.scss} +0 -0
- data/vendor/assets/stylesheets/spectre/{src/_toasts.scss → _toasts.scss} +2 -1
- data/vendor/assets/stylesheets/spectre/{src/_tooltips.scss → _tooltips.scss} +2 -0
- data/vendor/assets/stylesheets/spectre/{src/_typography.scss → _typography.scss} +3 -1
- data/vendor/assets/stylesheets/spectre/_utilities.scss +8 -0
- data/vendor/assets/stylesheets/spectre/{src/_variables.scss → _variables.scss} +37 -39
- data/vendor/assets/stylesheets/spectre/spectre-exp.scss +11 -11
- data/vendor/assets/stylesheets/spectre/spectre-icons.scss +3 -3
- data/vendor/assets/stylesheets/spectre/spectre.scss +37 -38
- data/vendor/assets/stylesheets/spectre/utilities/_colors.scss +29 -0
- data/vendor/assets/stylesheets/spectre/utilities/_cursors.scss +24 -0
- data/vendor/assets/stylesheets/spectre/{src/utilities → utilities}/_display.scss +1 -4
- data/vendor/assets/stylesheets/spectre/{src/utilities → utilities}/_divider.scss +0 -0
- data/vendor/assets/stylesheets/spectre/{src/utilities → utilities}/_loading.scss +2 -2
- data/vendor/assets/stylesheets/spectre/{src/utilities → utilities}/_position.scss +10 -1
- data/vendor/assets/stylesheets/spectre/{src/utilities → utilities}/_shapes.scss +1 -0
- data/vendor/assets/stylesheets/spectre/{src/utilities → utilities}/_text.scss +15 -3
- metadata +59 -59
- data/vendor/assets/stylesheets/spectre/src/_navigation.scss +0 -13
- data/vendor/assets/stylesheets/spectre/src/_utilities.scss +0 -7
- data/vendor/assets/stylesheets/spectre/src/utilities/_colors.scss +0 -45
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: f2a78e15389ee42072c759ea1d8282a5b50f7827
|
4
|
+
data.tar.gz: 1f0a6e0518cbd41d4c24b8245e2288cc57e78292
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 395d9259c9d37a0a812822376ec1c85c30748c13d1635b0b6a677121ca0267bf7a85da7049cdbc81854b1faf791f427e93dda4299d06493c06b120574891eaae
|
7
|
+
data.tar.gz: 41b5b168dbb02479b83787b5f7cd450b78d764b0f7a21a4c409f8bddce76112ae6b1cc206e02c9bf9c6c3332fa0e56dd6b6e94b8da206b5cf49ab3ae4f7a0388
|
data/README.md
CHANGED
@@ -1,6 +1,8 @@
|
|
1
1
|
# Spectre.scss
|
2
2
|
|
3
|
-
[
|
3
|
+
[![Gem Version](https://badge.fury.io/rb/spectre_scss.svg)](https://badge.fury.io/rb/spectre_scss)
|
4
|
+
|
5
|
+
[Spectre](https://picturepan2.github.io/spectre/) is a lightweight, responsive and modern CSS framework. This gem packages the Sass version of Spectre's assets for drop-in use in Rails applications.
|
4
6
|
|
5
7
|
## Installation
|
6
8
|
|
@@ -30,17 +32,17 @@ Or, import components as needed:
|
|
30
32
|
|
31
33
|
```scss
|
32
34
|
// Core variables and mixins
|
33
|
-
@import 'spectre/
|
34
|
-
@import 'spectre/
|
35
|
-
@import 'spectre/
|
35
|
+
@import 'spectre/variables';
|
36
|
+
@import 'spectre/mixins';
|
37
|
+
@import 'spectre/utilities';
|
36
38
|
|
37
39
|
// Reset and dependencies
|
38
|
-
@import 'spectre/
|
39
|
-
@import 'spectre/
|
40
|
+
@import 'spectre/normalize';
|
41
|
+
@import 'spectre/base';
|
40
42
|
|
41
|
-
@import 'spectre/
|
42
|
-
@import 'spectre/
|
43
|
-
@import 'spectre/
|
43
|
+
@import 'spectre/buttons';
|
44
|
+
@import 'spectre/navbar';
|
45
|
+
@import 'spectre/tables';
|
44
46
|
```
|
45
47
|
|
46
48
|
## License
|
data/Rakefile
CHANGED
@@ -10,12 +10,11 @@ namespace :spectre_scss do
|
|
10
10
|
namespace :assets do
|
11
11
|
desc 'Update Spectre\'s assets.'
|
12
12
|
task update: :clean do
|
13
|
-
|
14
|
-
commit = ARGV[1] || 'HEAD'
|
13
|
+
version = ARGV[1] || "v#{SpectreScss::VERSION.sub(/.\d+$/, '')}"
|
15
14
|
|
16
|
-
sh 'git clone git@github.com:
|
17
|
-
sh "cd spectre_source && git checkout
|
18
|
-
sh 'cp -R spectre_source/
|
15
|
+
sh 'git clone git@github.com:picturepan2/spectre.git spectre_source'
|
16
|
+
sh "cd spectre_source && git checkout tags/#{version}"
|
17
|
+
sh 'cp -R spectre_source/src/ vendor/assets/stylesheets/spectre/'
|
19
18
|
|
20
19
|
File.open('vendor/assets/stylesheets/spectre.scss', 'w') do |f|
|
21
20
|
f.write('@import "spectre/spectre.scss";')
|
data/lib/spectre_scss/version.rb
CHANGED
data/spectre_scss.gemspec
CHANGED
@@ -8,8 +8,7 @@ Gem::Specification.new do |spec|
|
|
8
8
|
spec.version = SpectreScss::VERSION
|
9
9
|
spec.authors = ['Zoran']
|
10
10
|
|
11
|
-
spec.summary = '
|
12
|
-
spec.description = 'Spectre is a lightweight, responsive and modern CSS framework'
|
11
|
+
spec.summary = 'Spectre is a lightweight, responsive and modern CSS framework.'
|
13
12
|
spec.homepage = 'https://github.com/zokioki/spectre_scss'
|
14
13
|
spec.license = 'MIT'
|
15
14
|
|
File without changes
|
File without changes
|
@@ -11,8 +11,8 @@
|
|
11
11
|
padding: $unit-h;
|
12
12
|
|
13
13
|
&.is-focused {
|
14
|
-
border-color: $primary-color;
|
15
14
|
@include control-shadow();
|
15
|
+
border-color: $primary-color;
|
16
16
|
}
|
17
17
|
|
18
18
|
.form-input {
|
@@ -27,11 +27,6 @@
|
|
27
27
|
}
|
28
28
|
}
|
29
29
|
|
30
|
-
mark {
|
31
|
-
font-size: 1;
|
32
|
-
padding: .1em 0;
|
33
|
-
}
|
34
|
-
|
35
30
|
.menu {
|
36
31
|
left: 0;
|
37
32
|
position: absolute;
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
@@ -1,11 +1,11 @@
|
|
1
1
|
// Buttons
|
2
2
|
.btn {
|
3
|
+
@include control-transition();
|
3
4
|
appearance: none;
|
4
5
|
background: $bg-color-light;
|
5
6
|
border: $border-width solid $primary-color;
|
6
7
|
border-radius: $border-radius;
|
7
8
|
color: $primary-color;
|
8
|
-
@include control-transition();
|
9
9
|
cursor: pointer;
|
10
10
|
display: inline-block;
|
11
11
|
font-size: $font-size;
|
@@ -45,12 +45,12 @@
|
|
45
45
|
padding: $unit-1;
|
46
46
|
|
47
47
|
.date-item {
|
48
|
+
@include control-transition();
|
48
49
|
appearance: none;
|
49
50
|
background: transparent;
|
50
51
|
border: $border-width solid transparent;
|
51
52
|
border-radius: 50%;
|
52
53
|
color: $gray-color-dark;
|
53
|
-
@include control-transition();
|
54
54
|
cursor: pointer;
|
55
55
|
height: $unit-7;
|
56
56
|
line-height: $unit-5;
|
@@ -199,7 +199,6 @@
|
|
199
199
|
padding: 3px 4px;
|
200
200
|
text-align: left;
|
201
201
|
text-overflow: ellipsis;
|
202
|
-
vertical-align: baseline;
|
203
202
|
white-space: nowrap;
|
204
203
|
}
|
205
204
|
}
|
File without changes
|
data/vendor/assets/stylesheets/spectre/{src/_comparison-sliders.scss → _comparison-sliders.scss}
RENAMED
File without changes
|
File without changes
|
File without changes
|
File without changes
|
@@ -31,13 +31,13 @@ legend {
|
|
31
31
|
|
32
32
|
// Form element: Input
|
33
33
|
.form-input {
|
34
|
+
@include control-transition();
|
34
35
|
appearance: none;
|
35
36
|
background: $bg-color-light;
|
36
37
|
background-image: none;
|
37
38
|
border: $border-width solid $border-color-dark;
|
38
39
|
border-radius: $border-radius;
|
39
40
|
color: $body-font-color;
|
40
|
-
@include control-transition();
|
41
41
|
display: block;
|
42
42
|
font-size: $font-size;
|
43
43
|
height: $control-size;
|
@@ -48,8 +48,8 @@ legend {
|
|
48
48
|
position: relative;
|
49
49
|
width: 100%;
|
50
50
|
&:focus {
|
51
|
-
border-color: $primary-color;
|
52
51
|
@include control-shadow();
|
52
|
+
border-color: $primary-color;
|
53
53
|
}
|
54
54
|
&::placeholder {
|
55
55
|
color: $gray-color;
|
@@ -74,17 +74,17 @@ legend {
|
|
74
74
|
width: auto;
|
75
75
|
}
|
76
76
|
|
77
|
-
// Textarea
|
78
|
-
@at-root textarea.form-input {
|
79
|
-
height: auto;
|
80
|
-
}
|
81
|
-
|
82
77
|
// Input types
|
83
78
|
&[type="file"] {
|
84
79
|
height: auto;
|
85
80
|
}
|
86
81
|
}
|
87
82
|
|
83
|
+
// Form element: Textarea
|
84
|
+
textarea.form-input {
|
85
|
+
height: auto;
|
86
|
+
}
|
87
|
+
|
88
88
|
// Form element: Input hint
|
89
89
|
.form-input-hint {
|
90
90
|
color: $gray-color;
|
@@ -129,8 +129,8 @@ legend {
|
|
129
129
|
padding-right: $control-icon-size + $control-padding-h;
|
130
130
|
}
|
131
131
|
&:focus {
|
132
|
-
border-color: $primary-color;
|
133
132
|
@include control-shadow();
|
133
|
+
border-color: $primary-color;
|
134
134
|
}
|
135
135
|
&::-ms-expand {
|
136
136
|
display: none;
|
@@ -202,8 +202,8 @@ legend {
|
|
202
202
|
position: absolute;
|
203
203
|
width: 1px;
|
204
204
|
&:focus + .form-icon {
|
205
|
-
border-color: $primary-color;
|
206
205
|
@include control-shadow();
|
206
|
+
border-color: $primary-color;
|
207
207
|
}
|
208
208
|
&:checked + .form-icon {
|
209
209
|
background: $primary-color;
|
@@ -212,8 +212,8 @@ legend {
|
|
212
212
|
}
|
213
213
|
|
214
214
|
.form-icon {
|
215
|
-
border: $border-width solid $border-color-dark;
|
216
215
|
@include control-transition();
|
216
|
+
border: $border-width solid $border-color-dark;
|
217
217
|
cursor: pointer;
|
218
218
|
display: inline-block;
|
219
219
|
position: absolute;
|
@@ -312,6 +312,7 @@ legend {
|
|
312
312
|
top: ($control-size-sm - $unit-4) / 2 - $border-width;
|
313
313
|
width: $unit-8;
|
314
314
|
&::before {
|
315
|
+
@include control-transition();
|
315
316
|
background: $bg-color-light;
|
316
317
|
border-radius: $unit-2;
|
317
318
|
content: "";
|
@@ -320,7 +321,6 @@ legend {
|
|
320
321
|
left: 0;
|
321
322
|
position: absolute;
|
322
323
|
top: 0;
|
323
|
-
@include control-transition();
|
324
324
|
width: $unit-4;
|
325
325
|
}
|
326
326
|
}
|
@@ -436,8 +436,8 @@ legend {
|
|
436
436
|
}
|
437
437
|
|
438
438
|
&:focus + .form-icon {
|
439
|
-
border-color: $error-color;
|
440
439
|
@include control-shadow($error-color);
|
440
|
+
border-color: $error-color;
|
441
441
|
}
|
442
442
|
}
|
443
443
|
}
|
File without changes
|
@@ -7,24 +7,26 @@
|
|
7
7
|
width: 100%;
|
8
8
|
@extend .clearfix;
|
9
9
|
|
10
|
+
$grid-spacing: ($layout-spacing / ($layout-spacing * 0 + 1)) * $html-font-size;
|
11
|
+
|
10
12
|
&.grid-xl {
|
11
|
-
max-width: $
|
13
|
+
max-width: $grid-spacing * 2 + $size-xl;
|
12
14
|
}
|
13
15
|
|
14
16
|
&.grid-lg {
|
15
|
-
max-width: $
|
17
|
+
max-width: $grid-spacing * 2 + $size-lg;
|
16
18
|
}
|
17
19
|
|
18
20
|
&.grid-md {
|
19
|
-
max-width: $
|
21
|
+
max-width: $grid-spacing * 2 + $size-md;
|
20
22
|
}
|
21
23
|
|
22
24
|
&.grid-sm {
|
23
|
-
max-width: $
|
25
|
+
max-width: $grid-spacing * 2 + $size-sm;
|
24
26
|
}
|
25
27
|
|
26
28
|
&.grid-xs {
|
27
|
-
max-width: $
|
29
|
+
max-width: $grid-spacing * 2 + $size-xs;
|
28
30
|
}
|
29
31
|
}
|
30
32
|
|
@@ -130,7 +132,7 @@
|
|
130
132
|
.col-mr-auto {
|
131
133
|
margin-right: auto;
|
132
134
|
}
|
133
|
-
@media
|
135
|
+
@media (max-width: $size-xl) {
|
134
136
|
.col-xl-12,
|
135
137
|
.col-xl-11,
|
136
138
|
.col-xl-10,
|
@@ -188,7 +190,7 @@
|
|
188
190
|
display: block !important;
|
189
191
|
}
|
190
192
|
}
|
191
|
-
@media
|
193
|
+
@media (max-width: $size-lg) {
|
192
194
|
.col-lg-12,
|
193
195
|
.col-lg-11,
|
194
196
|
.col-lg-10,
|
@@ -246,7 +248,7 @@
|
|
246
248
|
display: block !important;
|
247
249
|
}
|
248
250
|
}
|
249
|
-
@media
|
251
|
+
@media (max-width: $size-md) {
|
250
252
|
.col-md-12,
|
251
253
|
.col-md-11,
|
252
254
|
.col-md-10,
|
@@ -304,7 +306,7 @@
|
|
304
306
|
display: block !important;
|
305
307
|
}
|
306
308
|
}
|
307
|
-
@media
|
309
|
+
@media (max-width: $size-sm) {
|
308
310
|
.col-sm-12,
|
309
311
|
.col-sm-11,
|
310
312
|
.col-sm-10,
|
@@ -362,7 +364,7 @@
|
|
362
364
|
display: block !important;
|
363
365
|
}
|
364
366
|
}
|
365
|
-
@media
|
367
|
+
@media (max-width: $size-xs) {
|
366
368
|
.col-xs-12,
|
367
369
|
.col-xs-11,
|
368
370
|
.col-xs-10,
|
@@ -1,12 +1,12 @@
|
|
1
1
|
// Menus
|
2
2
|
.menu {
|
3
|
+
@include shadow-variant(.05rem);
|
3
4
|
background: $bg-color-light;
|
4
5
|
border-radius: $border-radius;
|
5
6
|
list-style: none;
|
6
7
|
margin: 0;
|
7
8
|
min-width: $control-min-width;
|
8
9
|
padding: $unit-2;
|
9
|
-
@include shadow-variant(.05rem);
|
10
10
|
transform: translateY($layout-spacing-sm);
|
11
11
|
z-index: $zindex-1;
|
12
12
|
|
File without changes
|
@@ -1,14 +1,4 @@
|
|
1
1
|
// Mixins
|
2
|
-
|
3
|
-
// Strip Units
|
4
|
-
@function strip-unit($number) {
|
5
|
-
@if type-of($number) == 'number' and not unitless($number) {
|
6
|
-
@return $number / ($number * 0 + 1);
|
7
|
-
}
|
8
|
-
|
9
|
-
@return $number;
|
10
|
-
}
|
11
|
-
|
12
2
|
// Avatar mixin
|
13
3
|
@mixin avatar-base($size: $unit-8) {
|
14
4
|
font-size: $size / 2;
|
@@ -17,8 +7,10 @@
|
|
17
7
|
}
|
18
8
|
|
19
9
|
// Background color utility mixin
|
20
|
-
@mixin bg-color-variant($color: $primary-color) {
|
21
|
-
|
10
|
+
@mixin bg-color-variant($name: ".bg-primary", $color: $primary-color) {
|
11
|
+
#{$name} {
|
12
|
+
background: $color;
|
13
|
+
}
|
22
14
|
}
|
23
15
|
|
24
16
|
// Button variant mixin
|
@@ -99,7 +91,7 @@
|
|
99
91
|
@mixin label-base() {
|
100
92
|
border-radius: $border-radius;
|
101
93
|
line-height: 1;
|
102
|
-
padding: .15rem
|
94
|
+
padding: .15rem;
|
103
95
|
}
|
104
96
|
|
105
97
|
@mixin label-variant($color: $light-color, $bg-color: $primary-color) {
|
@@ -108,7 +100,7 @@
|
|
108
100
|
}
|
109
101
|
|
110
102
|
// Margin utility mixin
|
111
|
-
@mixin margin-variant($id: 1, $size: 1) {
|
103
|
+
@mixin margin-variant($id: 1, $size: $unit-1) {
|
112
104
|
.m-#{$id} {
|
113
105
|
margin: $size;
|
114
106
|
}
|
@@ -135,7 +127,7 @@
|
|
135
127
|
}
|
136
128
|
|
137
129
|
// Padding utility mixin
|
138
|
-
@mixin padding-variant($id: 1, $size: 1) {
|
130
|
+
@mixin padding-variant($id: 1, $size: $unit-1) {
|
139
131
|
.p-#{$id} {
|
140
132
|
padding: $size;
|
141
133
|
}
|
@@ -167,10 +159,12 @@
|
|
167
159
|
}
|
168
160
|
|
169
161
|
// Text color utility mixin
|
170
|
-
@mixin text-color-variant($color: $primary-color) {
|
171
|
-
|
162
|
+
@mixin text-color-variant($name: ".text-primary", $color: $primary-color) {
|
163
|
+
#{$name} {
|
164
|
+
color: $color;
|
165
|
+
}
|
172
166
|
|
173
|
-
a#{
|
167
|
+
a#{$name} {
|
174
168
|
&:focus,
|
175
169
|
&:hover {
|
176
170
|
color: darken($color, 5%);
|
@@ -178,6 +172,13 @@
|
|
178
172
|
}
|
179
173
|
}
|
180
174
|
|
175
|
+
// Text Ellipsis
|
176
|
+
@mixin text-ellipsis() {
|
177
|
+
overflow: hidden;
|
178
|
+
text-overflow: ellipsis;
|
179
|
+
white-space: nowrap;
|
180
|
+
}
|
181
|
+
|
181
182
|
// Toast variant mixin
|
182
183
|
@mixin toast-variant($color: $dark-color) {
|
183
184
|
background: rgba($color, .9);
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
@@ -1,16 +1,16 @@
|
|
1
1
|
// Parallax
|
2
2
|
$parallax-deg: 3deg;
|
3
|
-
$parallax-offset:
|
4
|
-
$parallax-offset-z:
|
3
|
+
$parallax-offset: 4.5px;
|
4
|
+
$parallax-offset-z: 50px;
|
5
5
|
$parallax-perspective: 1000px;
|
6
|
-
$parallax-scale:
|
6
|
+
$parallax-scale: .95;
|
7
7
|
|
8
8
|
// Mixin: Parallax direction
|
9
9
|
@mixin parallax-dir() {
|
10
10
|
height: 50%;
|
11
11
|
position: absolute;
|
12
12
|
width: 50%;
|
13
|
-
z-index: $zindex-
|
13
|
+
z-index: $zindex-1;
|
14
14
|
}
|
15
15
|
|
16
16
|
.parallax {
|
@@ -20,8 +20,8 @@ $parallax-scale: 1 - unit-less($parallax-offset-z / $parallax-perspective);
|
|
20
20
|
width: auto;
|
21
21
|
|
22
22
|
.parallax-content {
|
23
|
-
height: auto;
|
24
23
|
@include shadow-variant(1rem);
|
24
|
+
height: auto;
|
25
25
|
transform: perspective($parallax-perspective);
|
26
26
|
transform-style: preserve-3d;
|
27
27
|
transition: all .4s ease;
|
@@ -47,7 +47,7 @@ $parallax-scale: 1 - unit-less($parallax-offset-z / $parallax-perspective);
|
|
47
47
|
left: 0;
|
48
48
|
position: absolute;
|
49
49
|
text-align: center;
|
50
|
-
text-shadow: 0 0 20px rgba($dark-color, .
|
50
|
+
text-shadow: 0 0 20px rgba($dark-color, .75);
|
51
51
|
top: 0;
|
52
52
|
transform: translateZ($parallax-offset-z) scale($parallax-scale);
|
53
53
|
transition: all .4s ease;
|
@@ -61,14 +61,14 @@ $parallax-scale: 1 - unit-less($parallax-offset-z / $parallax-perspective);
|
|
61
61
|
top: 0;
|
62
62
|
|
63
63
|
&:hover ~ .parallax-content {
|
64
|
-
transform: perspective($parallax-perspective) rotateX(
|
64
|
+
transform: perspective($parallax-perspective) rotateX($parallax-deg) rotateY(-$parallax-deg);
|
65
65
|
|
66
66
|
&::before {
|
67
|
-
background: linear-gradient(135deg, rgba(255, 255, 255,
|
67
|
+
background: linear-gradient(135deg, rgba(255, 255, 255, .35) 0%, transparent 50%);
|
68
68
|
}
|
69
69
|
|
70
70
|
.parallax-front {
|
71
|
-
transform: translate3d(
|
71
|
+
transform: translate3d($parallax-offset, $parallax-offset, $parallax-offset-z) scale($parallax-scale);
|
72
72
|
}
|
73
73
|
}
|
74
74
|
}
|
@@ -79,14 +79,14 @@ $parallax-scale: 1 - unit-less($parallax-offset-z / $parallax-perspective);
|
|
79
79
|
top: 0;
|
80
80
|
|
81
81
|
&:hover ~ .parallax-content {
|
82
|
-
transform: perspective($parallax-perspective) rotateX(
|
82
|
+
transform: perspective($parallax-perspective) rotateX($parallax-deg) rotateY($parallax-deg);
|
83
83
|
|
84
84
|
&::before {
|
85
|
-
background: linear-gradient(-135deg, rgba(255, 255, 255,
|
85
|
+
background: linear-gradient(-135deg, rgba(255, 255, 255, .35) 0%, transparent 50%);
|
86
86
|
}
|
87
87
|
|
88
88
|
.parallax-front {
|
89
|
-
transform: translate3d(
|
89
|
+
transform: translate3d(-$parallax-offset, $parallax-offset, $parallax-offset-z) scale($parallax-scale);
|
90
90
|
}
|
91
91
|
}
|
92
92
|
}
|
@@ -97,14 +97,14 @@ $parallax-scale: 1 - unit-less($parallax-offset-z / $parallax-perspective);
|
|
97
97
|
left: 0;
|
98
98
|
|
99
99
|
&:hover ~ .parallax-content {
|
100
|
-
transform: perspective($parallax-perspective) rotateX(
|
100
|
+
transform: perspective($parallax-perspective) rotateX(-$parallax-deg) rotateY(-$parallax-deg);
|
101
101
|
|
102
102
|
&::before {
|
103
|
-
background: linear-gradient(45deg, rgba(255, 255, 255,
|
103
|
+
background: linear-gradient(45deg, rgba(255, 255, 255, .35) 0%, transparent 50%);
|
104
104
|
}
|
105
105
|
|
106
106
|
.parallax-front {
|
107
|
-
transform: translate3d(
|
107
|
+
transform: translate3d($parallax-offset, -$parallax-offset, $parallax-offset-z) scale($parallax-scale);
|
108
108
|
}
|
109
109
|
}
|
110
110
|
}
|
@@ -115,17 +115,15 @@ $parallax-scale: 1 - unit-less($parallax-offset-z / $parallax-perspective);
|
|
115
115
|
right: 0;
|
116
116
|
|
117
117
|
&:hover ~ .parallax-content {
|
118
|
-
transform: perspective($parallax-perspective) rotateX(
|
118
|
+
transform: perspective($parallax-perspective) rotateX(-$parallax-deg) rotateY($parallax-deg);
|
119
119
|
|
120
120
|
&::before {
|
121
|
-
background: linear-gradient(-45deg, rgba(255, 255, 255,
|
121
|
+
background: linear-gradient(-45deg, rgba(255, 255, 255, .35) 0%, transparent 50%);
|
122
122
|
}
|
123
123
|
|
124
124
|
.parallax-front {
|
125
|
-
transform: translate3d(
|
125
|
+
transform: translate3d(-$parallax-offset, -$parallax-offset, $parallax-offset-z) scale($parallax-scale);
|
126
126
|
}
|
127
127
|
}
|
128
128
|
}
|
129
129
|
}
|
130
|
-
|
131
|
-
|