tungsten 0.1.3 → 0.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/assets/javascripts/tungsten/enhancements/clipboard.js +57 -0
- data/app/assets/javascripts/tungsten/tungsten.js +9 -6
- data/app/assets/stylesheets/tungsten/core/_buttons.scss +3 -3
- data/app/assets/stylesheets/tungsten/core/_cards.scss +19 -12
- data/app/assets/stylesheets/tungsten/core/_layout.scss +1 -3
- data/app/assets/stylesheets/tungsten/core/_sections.scss +6 -0
- data/app/assets/stylesheets/tungsten/core/_tables.scss +15 -0
- data/app/assets/stylesheets/tungsten/form/_base.scss +47 -6
- data/app/assets/stylesheets/tungsten/form/_check-radio.scss +43 -44
- data/app/assets/stylesheets/tungsten/form/_check-switch.scss +33 -66
- data/app/assets/stylesheets/tungsten/form/_label-placeholder.scss +3 -12
- data/app/assets/stylesheets/tungsten/form/_validation.scss +7 -9
- data/app/helpers/tungsten/form_helper.rb +11 -2
- data/app/helpers/tungsten/section_helper.rb +2 -1
- data/app/views/layouts/tungsten/default.html.slim +1 -0
- data/lib/tungsten/version.rb +1 -1
- data/public/{code-0.1.3.js → code-0.1.4.js} +8 -8
- data/public/code-0.1.4.js.gz +0 -0
- data/public/code-0.1.4.map.json +1 -0
- data/public/{tungsten-0.1.3.css → tungsten-0.1.4.css} +141 -99
- data/public/tungsten-0.1.4.css.gz +0 -0
- data/public/{tungsten-0.1.3.js → tungsten-0.1.4.js} +41 -39
- data/public/tungsten-0.1.4.js.gz +0 -0
- data/public/tungsten-0.1.4.map.json +1 -0
- metadata +11 -10
- data/public/code-0.1.3.js.gz +0 -0
- data/public/code-0.1.3.map.json +0 -1
- data/public/tungsten-0.1.3.css.gz +0 -0
- data/public/tungsten-0.1.3.js.gz +0 -0
- data/public/tungsten-0.1.3.map.json +0 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 07bfda293e824feb27c190817e7d60cfdf1fd609
|
|
4
|
+
data.tar.gz: 840878d34d7b88813ec69594d9507257abb1c88f
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: e076c8150b263124efadde7d9f99c8703c15e31a9c71a198fea3af4ad13a6fb79310163fbc4b96aa497333558a277a863da4c646bac0b20a1ea5c4cf3b8394b3
|
|
7
|
+
data.tar.gz: 252fd49f940be51a1ae30362dc63a0f4a90509f6d8cea20edb10a968d1f57f6b3998269aac18d63280edc982b2cb18251f64b07adc4e9a6a78b5fed7dd49fd42
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
var event = require( 'compose-toolbox' ).event
|
|
2
|
+
|
|
3
|
+
// Public API function
|
|
4
|
+
var clipboard = function() {
|
|
5
|
+
|
|
6
|
+
// Listen for click events
|
|
7
|
+
event.on( document, 'click', '[data-copy-target]', copy )
|
|
8
|
+
|
|
9
|
+
// Copy to clipboard handler
|
|
10
|
+
function copy( event ) {
|
|
11
|
+
|
|
12
|
+
console.log( event )
|
|
13
|
+
|
|
14
|
+
// Assignment
|
|
15
|
+
var copyTrigger = event.currentTarget,
|
|
16
|
+
copyElement = document.querySelector( copyTrigger.dataset.copyTarget )
|
|
17
|
+
|
|
18
|
+
// Prevent default behavior
|
|
19
|
+
event.preventDefault()
|
|
20
|
+
|
|
21
|
+
// Is the element selectable?
|
|
22
|
+
if ( copyElement && copyElement.select ) {
|
|
23
|
+
|
|
24
|
+
// Select text
|
|
25
|
+
copyElement.select();
|
|
26
|
+
|
|
27
|
+
// Give it a try
|
|
28
|
+
try {
|
|
29
|
+
|
|
30
|
+
// Copy text
|
|
31
|
+
document.execCommand( 'copy' )
|
|
32
|
+
|
|
33
|
+
// Blur the element
|
|
34
|
+
copyElement.blur()
|
|
35
|
+
|
|
36
|
+
// Trigger copied state
|
|
37
|
+
copyTrigger.classList.add( 'copied' )
|
|
38
|
+
|
|
39
|
+
// Remove copied state after a couple seconds
|
|
40
|
+
setTimeout( function() {
|
|
41
|
+
copyTrigger.classList.remove( 'copied' )
|
|
42
|
+
}, 2000 )
|
|
43
|
+
|
|
44
|
+
// If it borks
|
|
45
|
+
} catch ( err ) {
|
|
46
|
+
|
|
47
|
+
// Go nuclear
|
|
48
|
+
alert( 'please press Ctrl/Cmd+C to copy' )
|
|
49
|
+
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
module.exports = clipboard
|
|
@@ -1,10 +1,12 @@
|
|
|
1
|
-
var toggler
|
|
2
|
-
var formUp
|
|
3
|
-
var toolbox
|
|
4
|
-
var ajax
|
|
5
|
-
var event
|
|
1
|
+
var toggler = require( 'compose-toggler' )
|
|
2
|
+
var formUp = require( 'compose-form-up' )
|
|
3
|
+
var toolbox = require( 'compose-toolbox' )
|
|
4
|
+
var ajax = require( 'superagent' )
|
|
5
|
+
var event = toolbox.event
|
|
6
|
+
var clipboard = require( './enhancements/clipboard' )
|
|
6
7
|
|
|
7
8
|
event.scroll.disablePointer() // disable pointer events on scroll for performance (to avoid extra repaints)
|
|
9
|
+
clipboard();
|
|
8
10
|
|
|
9
11
|
require( 'compose-slider' ) // Our slider (range input) component
|
|
10
12
|
require( './_icons' ) // Import svg icons (from Esvg)
|
|
@@ -14,5 +16,6 @@ require( './_form_helpers' )
|
|
|
14
16
|
window.Tungsten = module.exports = toolbox.merge( {
|
|
15
17
|
ajax : ajax,
|
|
16
18
|
form : formUp,
|
|
17
|
-
toggler : toggler
|
|
19
|
+
toggler : toggler,
|
|
20
|
+
clipboard : clipboard
|
|
18
21
|
}, toolbox )
|
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
* -------------------------------------------------------------------------- */
|
|
4
4
|
|
|
5
5
|
@mixin card {
|
|
6
|
-
background: $white;
|
|
7
6
|
border-radius: $radius;
|
|
8
7
|
box-shadow:
|
|
9
8
|
0 0 0 1px rgba($gray-11, .05),
|
|
@@ -11,31 +10,27 @@
|
|
|
11
10
|
}
|
|
12
11
|
|
|
13
12
|
.card {
|
|
13
|
+
background: $white;
|
|
14
|
+
display: flex;
|
|
15
|
+
flex-direction: column;
|
|
14
16
|
position: relative;
|
|
15
17
|
padding: $card-padding;
|
|
16
18
|
@include collapse-bottom;
|
|
17
19
|
|
|
20
|
+
// Card actions panel
|
|
18
21
|
&-actions {
|
|
19
22
|
display: flex;
|
|
20
23
|
align-items: baseline;
|
|
21
24
|
margin-bottom: $card-padding;
|
|
22
25
|
flex-direction: row-reverse;
|
|
23
26
|
|
|
24
|
-
> *:last-child {
|
|
25
|
-
margin: 0;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
27
|
&.centered {
|
|
29
28
|
justify-content: center;
|
|
30
29
|
}
|
|
31
30
|
|
|
32
31
|
a,
|
|
33
|
-
button {
|
|
34
|
-
margin-
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
a {
|
|
38
|
-
@include inline-link($gray-08, $gray-09);
|
|
32
|
+
.button {
|
|
33
|
+
margin-left: 10px;
|
|
39
34
|
}
|
|
40
35
|
}
|
|
41
36
|
|
|
@@ -93,7 +88,15 @@
|
|
|
93
88
|
border-radius: 0 0 $radius $radius;
|
|
94
89
|
box-shadow: 0 1px rgba($gray-11, .1) inset;
|
|
95
90
|
background-clip: padding-box;
|
|
96
|
-
|
|
91
|
+
|
|
92
|
+
#{$block-elements} {
|
|
93
|
+
margin-bottom: 0;
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
& > &-footer:last-child,
|
|
98
|
+
& > *:last-child > &-footer:last-child,
|
|
99
|
+
& > *:last-child > *:last-child > &-footer:last-child {
|
|
97
100
|
margin: auto $card-padding * -1 $card-padding * -1 $card-padding * -1;
|
|
98
101
|
}
|
|
99
102
|
}
|
|
@@ -101,3 +104,7 @@
|
|
|
101
104
|
table.card {
|
|
102
105
|
display: table;
|
|
103
106
|
}
|
|
107
|
+
|
|
108
|
+
.demo-card {
|
|
109
|
+
background: rgba($gray-01, .5);
|
|
110
|
+
}
|
|
@@ -33,14 +33,12 @@ textarea {
|
|
|
33
33
|
margin-bottom: $vertical-margin;
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
-
|
|
37
36
|
/* ===================================== *
|
|
38
37
|
* Application
|
|
39
38
|
* ------------------------------------- */
|
|
40
39
|
|
|
41
40
|
.application-content {
|
|
42
41
|
padding: $content-padding;
|
|
43
|
-
background: $gray-02;
|
|
44
42
|
}
|
|
45
43
|
|
|
46
44
|
/* ===================================== *
|
|
@@ -50,4 +48,4 @@ textarea {
|
|
|
50
48
|
.hidden {
|
|
51
49
|
display: none;
|
|
52
50
|
visibility: hidden;
|
|
53
|
-
}
|
|
51
|
+
}
|
|
@@ -63,4 +63,19 @@ table.striped {
|
|
|
63
63
|
table.stretched {
|
|
64
64
|
table-layout: fixed;
|
|
65
65
|
min-width: 100%;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
// Last column fills remaining horizontal space
|
|
69
|
+
table.filled {
|
|
70
|
+
width: 100%;
|
|
71
|
+
|
|
72
|
+
th:not(:last-child),
|
|
73
|
+
td:not(:last-child) {
|
|
74
|
+
white-space: nowrap;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
th:last-child,
|
|
78
|
+
td:last-child {
|
|
79
|
+
width: 99%;
|
|
80
|
+
}
|
|
66
81
|
}
|
|
@@ -1,3 +1,28 @@
|
|
|
1
|
+
$text-inputs: 'textarea, input[type=url], input[type=tel], input[type=text], input[type=email], input[type=number], input[type=password], input[type=search]';
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
@mixin input-active {
|
|
5
|
+
&:focus,
|
|
6
|
+
&:hover:not([disabled]),
|
|
7
|
+
&:active {
|
|
8
|
+
@content;
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
$input-weight-shadow: 0 1px 3px rgba($gray-11, .3);
|
|
13
|
+
$empty-shadow: 0 0 0 transparent;
|
|
14
|
+
|
|
15
|
+
@function input-shadow($color: rgba($gray-11, .2), $size: 1px) {
|
|
16
|
+
@return 0 0 0 $size $color inset, $empty-shadow;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
@function input-focus-shadow($color: rgba($gray-11, .3), $size: 1px) {
|
|
20
|
+
@return 0 0 0 $size $color inset, $input-weight-shadow
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
$focus-shadow: input-focus-shadow();
|
|
24
|
+
$input-shadow: input-shadow();
|
|
25
|
+
|
|
1
26
|
.switch-label,
|
|
2
27
|
.tick-label {
|
|
3
28
|
pointer-events: none;
|
|
@@ -34,23 +59,30 @@ textarea,
|
|
|
34
59
|
padding: 9px 12px;
|
|
35
60
|
border-radius: $radius;
|
|
36
61
|
transition: box-shadow $duration;
|
|
62
|
+
line-height: 2em;
|
|
37
63
|
|
|
38
64
|
// Normal state
|
|
39
|
-
|
|
40
|
-
box-shadow: 0 0 0 1px rgba($gray-11, .1);
|
|
41
|
-
}
|
|
65
|
+
box-shadow: $input-shadow;
|
|
42
66
|
|
|
43
67
|
// Active state
|
|
44
68
|
@include active {
|
|
45
|
-
box-shadow:
|
|
46
|
-
0 0 0 1px rgba($gray-11, .2),
|
|
47
|
-
0 1px 3px rgba($gray-11, .25);
|
|
69
|
+
box-shadow: $focus-shadow;
|
|
48
70
|
}
|
|
49
71
|
|
|
50
72
|
&:disabled:not([type="submit"]) {
|
|
51
73
|
color: $gray-05;
|
|
52
74
|
cursor: default;
|
|
53
75
|
}
|
|
76
|
+
|
|
77
|
+
&::-moz-focus-inner {
|
|
78
|
+
border: none;
|
|
79
|
+
padding: 0;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.input-wrapper {
|
|
85
|
+
position: relative;
|
|
54
86
|
}
|
|
55
87
|
|
|
56
88
|
// Override default search styling
|
|
@@ -91,7 +123,16 @@ label {
|
|
|
91
123
|
flex-direction: column;
|
|
92
124
|
position: relative;
|
|
93
125
|
flex: 1 0 auto;
|
|
126
|
+
|
|
127
|
+
.label-text {
|
|
128
|
+
transition-property: box-shadow, color;
|
|
129
|
+
padding-bottom: .2em;
|
|
130
|
+
}
|
|
94
131
|
}
|
|
132
|
+
label { *, *:before, *:after {
|
|
133
|
+
transition-duration: $duration;
|
|
134
|
+
transition-timing-function: $timing;
|
|
135
|
+
}}
|
|
95
136
|
|
|
96
137
|
form.button_to {
|
|
97
138
|
width: auto;
|
|
@@ -17,14 +17,14 @@ label.tick-box {
|
|
|
17
17
|
margin: 0 8px 0 0;
|
|
18
18
|
background: $white;
|
|
19
19
|
transition-property: box-shadow;
|
|
20
|
-
|
|
20
|
+
box-shadow: input-shadow(), $empty-shadow inset;
|
|
21
21
|
}
|
|
22
22
|
|
|
23
|
-
|
|
24
|
-
|
|
23
|
+
@include input-active {
|
|
24
|
+
border: none;
|
|
25
25
|
|
|
26
|
-
|
|
27
|
-
|
|
26
|
+
+ .tick { box-shadow: input-shadow( $gray-08 ), $empty-shadow inset; }
|
|
27
|
+
}
|
|
28
28
|
|
|
29
29
|
&:disabled {
|
|
30
30
|
pointer-events: none;
|
|
@@ -63,7 +63,7 @@ label.tick-box {
|
|
|
63
63
|
|
|
64
64
|
// Checked
|
|
65
65
|
&:checked + .tick {
|
|
66
|
-
|
|
66
|
+
box-shadow: input-shadow( darken($blue-03, 3) ), 0 0 0 8px $blue-03 inset;
|
|
67
67
|
|
|
68
68
|
&:after {
|
|
69
69
|
box-shadow: 0 1px 0 2px darken($blue-03, 15);
|
|
@@ -72,22 +72,22 @@ label.tick-box {
|
|
|
72
72
|
}
|
|
73
73
|
|
|
74
74
|
// Hover, focus, active
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
75
|
+
@include input-active {
|
|
76
|
+
|
|
77
|
+
// Active Unchecked
|
|
78
|
+
+ .tick {
|
|
79
|
+
&:before { transform: scale(.35); }
|
|
80
|
+
&:after { transform: scale(0); }
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
// Active Checked
|
|
84
|
+
&:checked + .tick {
|
|
85
|
+
box-shadow: input-shadow( darken($blue-03, 15) ), 0 0 0 8px darken( $blue-03, 5 ) inset;
|
|
86
|
+
|
|
87
|
+
&:before { transform: scale(0); }
|
|
88
|
+
&:after { transform: scale(.35); }
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
91
|
}
|
|
92
92
|
|
|
93
93
|
// Checkboxes
|
|
@@ -115,7 +115,7 @@ label.tick-box {
|
|
|
115
115
|
|
|
116
116
|
// Checked
|
|
117
117
|
&:checked + .tick {
|
|
118
|
-
|
|
118
|
+
box-shadow: input-shadow( darken($blue-03, 3) ), 0 0 0 10px $blue-03 inset;
|
|
119
119
|
|
|
120
120
|
&:after, &:before {
|
|
121
121
|
transform: scale(.5) rotate(-50deg);
|
|
@@ -129,26 +129,25 @@ label.tick-box {
|
|
|
129
129
|
}
|
|
130
130
|
|
|
131
131
|
// Hover, focus, active
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
132
|
+
@include input-active {
|
|
133
|
+
|
|
134
|
+
// Active Uncheked
|
|
135
|
+
+ .tick:before {
|
|
136
|
+
border-color: $gray-06;
|
|
137
|
+
transform: scale(.4) rotate(-50deg);
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
// Active Checked
|
|
141
|
+
&:checked + .tick {
|
|
142
|
+
box-shadow: input-shadow( darken($blue-03, 15) ), 0 0 0 10px darken( $blue-03, 5 ) inset;
|
|
143
|
+
|
|
144
|
+
&:before {
|
|
145
|
+
top: 1px;
|
|
146
|
+
opacity: 1;
|
|
147
|
+
transform: scale(.5) rotate(-50deg);
|
|
148
|
+
border-color: darken( $blue-03, 10 );
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
152
|
}
|
|
153
153
|
}
|
|
154
|
-
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
.check-switch {
|
|
2
|
-
$width:
|
|
2
|
+
$width: 44px;
|
|
3
3
|
$height: 24px;
|
|
4
|
-
$tick-width: $width/2 -
|
|
4
|
+
$tick-width: $width/2 - 4;
|
|
5
5
|
cursor: pointer;
|
|
6
6
|
flex-direction: row; align-items: center;
|
|
7
7
|
|
|
@@ -11,95 +11,62 @@
|
|
|
11
11
|
line-height: 1.5em;
|
|
12
12
|
}
|
|
13
13
|
|
|
14
|
-
input {
|
|
15
|
-
opacity: 0;
|
|
16
|
-
position: absolute;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
14
|
&-label {
|
|
20
15
|
position: absolute;
|
|
21
16
|
color: transparent;
|
|
22
17
|
font-size: 0;
|
|
23
18
|
}
|
|
24
19
|
|
|
25
|
-
&-panel {
|
|
20
|
+
&-panel {
|
|
26
21
|
width: $width;
|
|
27
22
|
height: $height;
|
|
28
|
-
background: $
|
|
23
|
+
background: rgba( $gray-11, .1 );
|
|
29
24
|
position: relative;
|
|
30
25
|
|
|
31
|
-
border-radius: $
|
|
32
|
-
transition-property: box-shadow, border-color;
|
|
33
|
-
|
|
26
|
+
border-radius: $height;
|
|
27
|
+
transition-property: background, box-shadow, border-color;
|
|
28
|
+
box-shadow: input-shadow( rgba( $gray-11, .1 ) );
|
|
34
29
|
}
|
|
35
30
|
|
|
36
31
|
&-tick {
|
|
37
32
|
width: $tick-width;
|
|
38
|
-
height: $height -
|
|
39
|
-
background:
|
|
33
|
+
height: $height - 6;
|
|
34
|
+
background: $white;
|
|
40
35
|
position: absolute;
|
|
41
|
-
bottom:
|
|
42
|
-
left:
|
|
43
|
-
border-radius: $
|
|
44
|
-
transition-property:
|
|
36
|
+
bottom: 3px;
|
|
37
|
+
left: 4px;
|
|
38
|
+
border-radius: $height;
|
|
39
|
+
transition-property: transform;
|
|
45
40
|
transform: translate3d( 0, 0, 0 );
|
|
46
|
-
|
|
41
|
+
box-shadow: 0 1px 4px rgba($gray-11, .4);
|
|
47
42
|
font-weight: 500;
|
|
48
|
-
|
|
49
|
-
&:before {
|
|
50
|
-
content: "ON";
|
|
51
|
-
left: 0;
|
|
52
|
-
opacity: 0;
|
|
53
|
-
color: $blue-04;
|
|
54
|
-
}
|
|
55
|
-
&:after {
|
|
56
|
-
content: "OFF";
|
|
57
|
-
right: -100%;
|
|
58
|
-
opacity: 1;
|
|
59
|
-
color: $gray-08;
|
|
60
|
-
}
|
|
61
|
-
&:before, &:after {
|
|
62
|
-
display: block;
|
|
63
|
-
font-size: 12px;
|
|
64
|
-
line-height: $height - 2;
|
|
65
|
-
position: absolute;
|
|
66
|
-
width: 100%;
|
|
67
|
-
text-align: center;
|
|
68
|
-
}
|
|
69
43
|
}
|
|
70
44
|
|
|
71
45
|
input {
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
// }
|
|
46
|
+
opacity: 0;
|
|
47
|
+
position: absolute;
|
|
48
|
+
|
|
49
|
+
@include input-active {
|
|
50
|
+
~ .check-switch-panel {
|
|
51
|
+
background: rgba( $gray-11, .2 );
|
|
52
|
+
}
|
|
53
|
+
}
|
|
81
54
|
}
|
|
82
55
|
|
|
56
|
+
|
|
83
57
|
input:checked + &-panel &-tick {
|
|
84
|
-
background-color: $blue-04;
|
|
85
|
-
// box-shadow: input-shadow( darken($blue-04, 10) );
|
|
86
58
|
transform: translate3d( $tick-width , 0, 0 );
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
59
|
+
}
|
|
60
|
+
input:checked + &-panel {
|
|
61
|
+
background: $blue-03;
|
|
62
|
+
}
|
|
63
|
+
input:checked {
|
|
64
|
+
@include input-active {
|
|
65
|
+
~ .check-switch-panel {
|
|
66
|
+
background: darken( $blue-03, 2 );
|
|
67
|
+
box-shadow: input-shadow( $blue-04 );
|
|
68
|
+
}
|
|
91
69
|
}
|
|
92
|
-
|
|
93
|
-
&:before { opacity: 1; }
|
|
94
|
-
&:after { opacity: 0; }
|
|
95
70
|
}
|
|
96
71
|
|
|
97
|
-
input:checked {
|
|
98
|
-
// @include input-active {
|
|
99
|
-
// + .check-switch-panel .check-switch-tick {
|
|
100
|
-
// box-shadow: input-shadow( darken($blue-04, 10) );
|
|
101
|
-
// background-color: lighten($blue-04, 5);
|
|
102
|
-
// }
|
|
103
|
-
// }
|
|
104
|
-
}
|
|
105
72
|
}
|