titon-toolkit 1.1.0 → 1.2.0
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/changelog.md +105 -67
- data/license.md +1 -1
- data/readme.md +5 -8
- data/roadmap.md +13 -11
- data/scss/toolkit/_common.scss +19 -10
- data/scss/toolkit/components/accordion.scss +0 -7
- data/scss/toolkit/components/breadcrumb.scss +0 -2
- data/scss/toolkit/components/button-group.scss +3 -19
- data/scss/toolkit/components/button.scss +2 -2
- data/scss/toolkit/components/drop.scss +5 -8
- data/scss/toolkit/components/flyout.scss +1 -5
- data/scss/toolkit/components/grid.scss +35 -17
- data/scss/toolkit/components/icon.scss +1 -14
- data/scss/toolkit/components/input-group.scss +7 -16
- data/scss/toolkit/components/input.scss +1 -7
- data/scss/toolkit/components/label.scss +0 -5
- data/scss/toolkit/components/lazy-load.scss +1 -1
- data/scss/toolkit/components/loader.scss +1 -1
- data/scss/toolkit/components/matrix.scss +7 -13
- data/scss/toolkit/components/modal.scss +123 -131
- data/scss/toolkit/components/notice.scss +5 -2
- data/scss/toolkit/components/pagination.scss +0 -1
- data/scss/toolkit/components/popover.scss +13 -16
- data/scss/toolkit/components/progress.scss +2 -17
- data/scss/toolkit/components/showcase.scss +5 -2
- data/scss/toolkit/components/table.scss +10 -8
- data/scss/toolkit/components/tabs.scss +1 -0
- data/scss/toolkit/components/tooltip.scss +38 -42
- data/scss/toolkit/components/type-ahead.scss +2 -6
- data/scss/toolkit/effects/oval.scss +3 -1
- data/scss/toolkit/effects/pill.scss +8 -12
- data/scss/toolkit/effects/skew.scss +9 -15
- data/scss/toolkit/layout/base.scss +4 -18
- data/scss/toolkit/layout/code.scss +1 -1
- data/scss/toolkit/layout/form.scss +11 -10
- data/scss/toolkit/layout/responsive.scss +4 -2
- data/scss/toolkit/layout/typography.scss +9 -3
- data/scss/toolkit/mixins/_components.scss +16 -0
- data/scss/toolkit/mixins/_helper.scss +15 -0
- data/scss/toolkit/mixins/_layout.scss +0 -9
- data/scss/toolkit/themes/{titon.scss → demo.scss} +39 -15
- data/version.md +1 -1
- metadata +6 -5
@@ -10,18 +10,18 @@
|
|
10
10
|
.#{$vendor-prefix}drop--up,
|
11
11
|
.#{$vendor-prefix}drop--left,
|
12
12
|
.#{$vendor-prefix}drop--right {
|
13
|
+
@include reset-list;
|
13
14
|
display: none;
|
14
15
|
text-align: left;
|
15
16
|
position: absolute;
|
16
17
|
top: 100%;
|
17
18
|
left: 0;
|
18
19
|
width: 200px;
|
19
|
-
background: $gray;
|
20
20
|
line-height: 100%;
|
21
21
|
z-index: 500;
|
22
22
|
opacity: 0;
|
23
23
|
visibility: hidden;
|
24
|
-
@include transition(opacity
|
24
|
+
@include transition(opacity $drop-transition);
|
25
25
|
|
26
26
|
// Nested
|
27
27
|
.#{$vendor-prefix}drop--down,
|
@@ -30,12 +30,12 @@
|
|
30
30
|
top: 0;
|
31
31
|
left: 90%;
|
32
32
|
z-index: 510;
|
33
|
-
@include transition(left
|
33
|
+
@include transition(left $drop-transition, opacity $drop-transition);
|
34
34
|
}
|
35
35
|
|
36
36
|
// Apply to self
|
37
|
-
|
38
|
-
|
37
|
+
ul,
|
38
|
+
ol {
|
39
39
|
@include reset-list;
|
40
40
|
}
|
41
41
|
|
@@ -58,8 +58,6 @@
|
|
58
58
|
|
59
59
|
// Show nested dropdown
|
60
60
|
&:hover {
|
61
|
-
> a { background: $gray-lightest; }
|
62
|
-
|
63
61
|
.#{$vendor-prefix}drop--down,
|
64
62
|
.#{$vendor-prefix}drop--up {
|
65
63
|
visibility: visible;
|
@@ -82,7 +80,6 @@
|
|
82
80
|
|
83
81
|
.#{$vendor-prefix}drop-heading {
|
84
82
|
padding: $small-padding;
|
85
|
-
background-color: $gray-dark;
|
86
83
|
}
|
87
84
|
|
88
85
|
//-------------------- Modifiers --------------------//
|
@@ -13,7 +13,6 @@
|
|
13
13
|
z-index: 500;
|
14
14
|
opacity: 0;
|
15
15
|
visibility: hidden;
|
16
|
-
background: $gray;
|
17
16
|
@include box-sizing(content-box); // required by MooTools for multi columns
|
18
17
|
@include transition(opacity $flyout-transition);
|
19
18
|
|
@@ -37,9 +36,7 @@
|
|
37
36
|
|
38
37
|
// Hover states
|
39
38
|
> a:hover,
|
40
|
-
&.#{$state-is-prefix}open > a {
|
41
|
-
background: $gray-lightest;
|
42
|
-
}
|
39
|
+
&.#{$state-is-prefix}open > a {}
|
43
40
|
|
44
41
|
// Display caret arrow
|
45
42
|
&.#{$state-has-prefix}children > a .caret-right {
|
@@ -81,5 +78,4 @@
|
|
81
78
|
line-height: 100%;
|
82
79
|
display: block;
|
83
80
|
text-decoration: none;
|
84
|
-
background: $gray-dark;
|
85
81
|
}
|
@@ -11,11 +11,6 @@
|
|
11
11
|
@include grid-row;
|
12
12
|
}
|
13
13
|
|
14
|
-
.col.end {
|
15
|
-
margin-right: 0 !important;
|
16
|
-
float: right !important;
|
17
|
-
}
|
18
|
-
|
19
14
|
// These should be the same for all sizes
|
20
15
|
.col[class*="span-"] {
|
21
16
|
@include grid-column;
|
@@ -42,8 +37,11 @@
|
|
42
37
|
$span: grid-span($i, $grid-columns-mobile);
|
43
38
|
|
44
39
|
.col.mobile-#{$i} { width: $span; }
|
45
|
-
|
46
|
-
|
40
|
+
|
41
|
+
@if $grid-push-pull {
|
42
|
+
.col.mobile-push-#{$i} { left: $span; }
|
43
|
+
.col.mobile-pull-#{$i} { right: $span; }
|
44
|
+
}
|
47
45
|
}
|
48
46
|
}
|
49
47
|
|
@@ -57,8 +55,11 @@
|
|
57
55
|
$span: grid-span($i, $grid-columns-tablet);
|
58
56
|
|
59
57
|
.col.tablet-#{$i} { width: $span; }
|
60
|
-
|
61
|
-
|
58
|
+
|
59
|
+
@if $grid-push-pull {
|
60
|
+
.col.tablet-push-#{$i} { left: $span; }
|
61
|
+
.col.tablet-pull-#{$i} { right: $span; }
|
62
|
+
}
|
62
63
|
}
|
63
64
|
}
|
64
65
|
|
@@ -72,8 +73,11 @@
|
|
72
73
|
$span: grid-span($i, $grid-columns-desktop);
|
73
74
|
|
74
75
|
.col.desktop-#{$i} { width: $span; }
|
75
|
-
|
76
|
-
|
76
|
+
|
77
|
+
@if $grid-push-pull {
|
78
|
+
.col.desktop-push-#{$i} { left: $span; }
|
79
|
+
.col.desktop-pull-#{$i} { right: $span; }
|
80
|
+
}
|
77
81
|
}
|
78
82
|
}
|
79
83
|
|
@@ -91,8 +95,11 @@
|
|
91
95
|
$span: grid-span($i, $grid-columns-small);
|
92
96
|
|
93
97
|
.col.small-#{$i} { width: $span; }
|
94
|
-
|
95
|
-
|
98
|
+
|
99
|
+
@if $grid-push-pull {
|
100
|
+
.col.small-push-#{$i} { left: $span; }
|
101
|
+
.col.small-pull-#{$i} { right: $span; }
|
102
|
+
}
|
96
103
|
}
|
97
104
|
}
|
98
105
|
|
@@ -106,8 +113,11 @@
|
|
106
113
|
$span: grid-span($i, $grid-columns-medium);
|
107
114
|
|
108
115
|
.col.medium-#{$i} { width: $span; }
|
109
|
-
|
110
|
-
|
116
|
+
|
117
|
+
@if $grid-push-pull {
|
118
|
+
.col.medium-push-#{$i} { left: $span; }
|
119
|
+
.col.medium-pull-#{$i} { right: $span; }
|
120
|
+
}
|
111
121
|
}
|
112
122
|
}
|
113
123
|
|
@@ -121,9 +131,17 @@
|
|
121
131
|
$span: grid-span($i, $grid-columns-large);
|
122
132
|
|
123
133
|
.col.large-#{$i} { width: $span; }
|
124
|
-
|
125
|
-
|
134
|
+
|
135
|
+
@if $grid-push-pull {
|
136
|
+
.col.large-push-#{$i} { left: $span; }
|
137
|
+
.col.large-pull-#{$i} { right: $span; }
|
138
|
+
}
|
126
139
|
}
|
127
140
|
}
|
128
141
|
|
142
|
+
}
|
143
|
+
|
144
|
+
.col.end {
|
145
|
+
margin-right: 0 !important;
|
146
|
+
float: right !important;
|
129
147
|
}
|
@@ -19,23 +19,10 @@
|
|
19
19
|
[class*="icon-32"] { width: 32px; height: 32px; }
|
20
20
|
[class*="icon-64"] { width: 64px; height: 64px; }
|
21
21
|
|
22
|
-
.#{$vendor-prefix}button {
|
23
|
-
[class*="icon-"] { margin-top: -1px; }
|
24
|
-
}
|
25
|
-
|
26
22
|
//-------------------- Modifiers --------------------//
|
27
23
|
|
28
24
|
.icon--90deg { @include transform(rotate(90deg)); }
|
29
25
|
.icon--180deg { @include transform(rotate(180deg)); }
|
30
26
|
.icon--270deg { @include transform(rotate(270deg)); }
|
31
27
|
.icon--flip { @include transform(rotateY(180deg)); }
|
32
|
-
.icon--flip-vert { @include transform(rotateX(180deg)); }
|
33
|
-
|
34
|
-
@include keyframes(rotate) {
|
35
|
-
from { @include transform(rotate(0deg)); }
|
36
|
-
to { @include transform(rotate(360deg)); }
|
37
|
-
}
|
38
|
-
|
39
|
-
.icon--rotate {
|
40
|
-
@include animation(rotate $icon-animation infinite linear);
|
41
|
-
}
|
28
|
+
.icon--flip-vert { @include transform(rotateX(180deg)); }
|
@@ -11,10 +11,7 @@
|
|
11
11
|
vertical-align: middle;
|
12
12
|
white-space: nowrap;
|
13
13
|
|
14
|
-
>
|
15
|
-
> .#{$vendor-prefix}input-addon,
|
16
|
-
> .#{$vendor-prefix}button,
|
17
|
-
> .#{$vendor-prefix}button-group {
|
14
|
+
> * {
|
18
15
|
float: left;
|
19
16
|
display: inline-block;
|
20
17
|
position: relative;
|
@@ -33,29 +30,23 @@
|
|
33
30
|
}
|
34
31
|
|
35
32
|
.#{$vendor-prefix}input-addon {
|
36
|
-
border: 1px solid $gray-dark;
|
37
|
-
background: $gray;
|
38
33
|
vertical-align: middle;
|
39
|
-
padding: $medium-padding;
|
40
34
|
line-height: normal;
|
41
|
-
|
35
|
+
@include size-medium;
|
36
|
+
|
37
|
+
@include is-small(false, true) { @include size-small; }
|
38
|
+
@include is-large(false, true) { @include size-large; }
|
42
39
|
}
|
43
40
|
|
44
41
|
//-------------------- Modifiers --------------------//
|
45
42
|
|
46
43
|
.#{$vendor-prefix}input-group.#{$shape-round-class} {
|
47
|
-
>
|
48
|
-
> .#{$vendor-prefix}input-addon:first-child,
|
49
|
-
> .#{$vendor-prefix}button:first-child,
|
50
|
-
> .#{$vendor-prefix}button-group:first-child .#{$vendor-prefix}button {
|
44
|
+
> *:first-child {
|
51
45
|
border-top-left-radius: $round;
|
52
46
|
border-bottom-left-radius: $round;
|
53
47
|
}
|
54
48
|
|
55
|
-
>
|
56
|
-
> .#{$vendor-prefix}input-addon:last-child,
|
57
|
-
> .#{$vendor-prefix}button:last-child,
|
58
|
-
> .#{$vendor-prefix}button-group:last-child .#{$vendor-prefix}button {
|
49
|
+
> *:last-child {
|
59
50
|
border-top-right-radius: $round;
|
60
51
|
border-bottom-right-radius: $round;
|
61
52
|
}
|
@@ -31,17 +31,11 @@
|
|
31
31
|
input {
|
32
32
|
display: none;
|
33
33
|
|
34
|
-
// Style when the associated label is being hovered
|
35
|
-
&:hover + .#{$vendor-prefix}checkbox,
|
36
|
-
&:hover + .#{$vendor-prefix}radio {
|
37
|
-
border-color: $gray-darkest;
|
38
|
-
}
|
39
|
-
|
40
34
|
// Style when the checkbox is checked
|
41
35
|
&:checked + .#{$vendor-prefix}checkbox,
|
42
36
|
&:checked + .#{$vendor-prefix}radio {
|
43
37
|
border-color: $info;
|
44
|
-
background
|
38
|
+
background: $info-light;
|
45
39
|
}
|
46
40
|
|
47
41
|
// Style when input is disabled
|
@@ -11,20 +11,14 @@
|
|
11
11
|
position: relative;
|
12
12
|
@include clear-fix;
|
13
13
|
|
14
|
-
|
15
|
-
|
14
|
+
> li {
|
15
|
+
float: left;
|
16
|
+
margin: 0;
|
17
|
+
padding: 0;
|
18
|
+
@include transition(top $matrix-transition, left $matrix-transition, bottom $matrix-transition, right $matrix-transition, opacity $matrix-transition);
|
16
19
|
}
|
17
|
-
}
|
18
|
-
|
19
|
-
.#{$vendor-prefix}matrix-item {
|
20
|
-
margin: 0;
|
21
|
-
padding: 0;
|
22
|
-
@include transition(top $matrix-transition, left $matrix-transition, bottom $matrix-transition, right $matrix-transition, opacity $matrix-transition);
|
23
20
|
|
24
|
-
|
25
|
-
|
26
|
-
width: 100%;
|
27
|
-
height: auto;
|
28
|
-
display: block;
|
21
|
+
&.#{$state-has-prefix}no-columns > li {
|
22
|
+
position: relative !important;
|
29
23
|
}
|
30
24
|
}
|
@@ -8,18 +8,15 @@
|
|
8
8
|
|
9
9
|
.#{$vendor-prefix}modal {
|
10
10
|
position: fixed;
|
11
|
-
top:
|
12
|
-
left:
|
13
|
-
width:
|
14
|
-
height:
|
15
|
-
margin: 0;
|
16
|
-
padding: 0;
|
11
|
+
top: 0;
|
12
|
+
left: 0;
|
13
|
+
width: 100%;
|
14
|
+
height: 100%;
|
17
15
|
z-index: 610; // higher than blackout
|
18
|
-
|
19
|
-
|
16
|
+
overflow: auto;
|
17
|
+
-webkit-overflow-scrolling: touch;
|
20
18
|
visibility: hidden;
|
21
|
-
|
22
|
-
@include transform(translateX(-50%) translateY(-50%));
|
19
|
+
pointer-events: none; // fall through to blackout
|
23
20
|
|
24
21
|
&.#{$state-is-prefix}loading {
|
25
22
|
.#{$vendor-prefix}modal-close { display: none; }
|
@@ -33,6 +30,8 @@
|
|
33
30
|
|
34
31
|
.#{$vendor-prefix}modal-close {
|
35
32
|
position: absolute;
|
33
|
+
background: none;
|
34
|
+
border: 0;
|
36
35
|
top: $padding;
|
37
36
|
right: $padding;
|
38
37
|
line-height: 1rem;
|
@@ -42,28 +41,31 @@
|
|
42
41
|
&:hover { opacity: 1; }
|
43
42
|
}
|
44
43
|
|
44
|
+
.#{$vendor-prefix}modal-outer {
|
45
|
+
position: absolute;
|
46
|
+
top: 0;
|
47
|
+
left: 50%;
|
48
|
+
width: 50%;
|
49
|
+
height: auto;
|
50
|
+
margin: $margin;
|
51
|
+
pointer-events: auto; // allow within modal
|
52
|
+
@include transform(translateX(-50%));
|
53
|
+
}
|
54
|
+
|
45
55
|
.#{$vendor-prefix}modal-inner {
|
46
56
|
position: relative;
|
47
57
|
margin: 0 auto;
|
48
|
-
background: $gray;
|
49
58
|
}
|
50
59
|
|
51
60
|
.#{$vendor-prefix}modal-head,
|
52
61
|
.#{$vendor-prefix}modal-body,
|
53
|
-
.#{$vendor-prefix}modal-foot
|
54
|
-
.#{$vendor-prefix}modal-loading,
|
55
|
-
.#{$vendor-prefix}modal-error {
|
62
|
+
.#{$vendor-prefix}modal-foot {
|
56
63
|
padding: $padding;
|
57
64
|
}
|
58
65
|
|
59
|
-
// Remove margins from text elements
|
60
|
-
.#{$vendor-prefix}modal-body {
|
61
|
-
@include content-spacing;
|
62
|
-
}
|
63
|
-
|
64
66
|
//-------------------- Modifiers --------------------//
|
65
67
|
|
66
|
-
.#{$vendor-prefix}modal.#{$state-is-prefix}fullscreen {
|
68
|
+
.#{$vendor-prefix}modal.#{$state-is-prefix}fullscreen .#{$vendor-prefix}modal-outer {
|
67
69
|
top: 0;
|
68
70
|
left: 0;
|
69
71
|
margin: 0;
|
@@ -77,14 +79,7 @@
|
|
77
79
|
//-------------------- Animations --------------------//
|
78
80
|
|
79
81
|
.#{$vendor-prefix}modal {
|
80
|
-
|
81
|
-
&.from-below,
|
82
|
-
&.slide-in-top,
|
83
|
-
&.slide-in-bottom,
|
84
|
-
&.slide-in-left,
|
85
|
-
&.slide-in-right,
|
86
|
-
&.flip,
|
87
|
-
&.flip-vert {
|
82
|
+
#{join-classes($modal-animation)} {
|
88
83
|
.#{$vendor-prefix}modal-handle {
|
89
84
|
opacity: 0;
|
90
85
|
@include transition(all $modal-transition);
|
@@ -95,146 +90,143 @@
|
|
95
90
|
}
|
96
91
|
}
|
97
92
|
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
&.from-above {
|
104
|
-
.#{$vendor-prefix}modal-handle {
|
105
|
-
@include transform(scale(1.3));
|
106
|
-
}
|
107
|
-
|
108
|
-
&.show .#{$vendor-prefix}modal-handle {
|
109
|
-
@include transform(scale(1));
|
110
|
-
}
|
111
|
-
}
|
112
|
-
|
113
|
-
&.from-below {
|
114
|
-
.#{$vendor-prefix}modal-handle {
|
115
|
-
@include transform(scale(0.7));
|
116
|
-
}
|
117
|
-
|
118
|
-
&.show .#{$vendor-prefix}modal-handle {
|
119
|
-
@include transform(scale(1));
|
120
|
-
}
|
121
|
-
}
|
122
|
-
|
123
|
-
&.slide-in-top {
|
124
|
-
.#{$vendor-prefix}modal-handle {
|
125
|
-
@include transform(translateY(-50%));
|
126
|
-
}
|
93
|
+
@if index($modal-animation, "from-above") {
|
94
|
+
&.from-above {
|
95
|
+
.#{$vendor-prefix}modal-handle {
|
96
|
+
@include transform(scale(1.3));
|
97
|
+
}
|
127
98
|
|
128
|
-
|
129
|
-
|
99
|
+
&.show .#{$vendor-prefix}modal-handle {
|
100
|
+
@include transform(scale(1));
|
101
|
+
}
|
130
102
|
}
|
131
103
|
}
|
132
104
|
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
105
|
+
@if index($modal-animation, "from-below") {
|
106
|
+
&.from-below {
|
107
|
+
.#{$vendor-prefix}modal-handle {
|
108
|
+
@include transform(scale(0.7));
|
109
|
+
}
|
137
110
|
|
138
|
-
|
139
|
-
|
111
|
+
&.show .#{$vendor-prefix}modal-handle {
|
112
|
+
@include transform(scale(1));
|
113
|
+
}
|
140
114
|
}
|
141
115
|
}
|
142
116
|
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
117
|
+
@if index($modal-animation, "slide-in-top") {
|
118
|
+
&.slide-in-top {
|
119
|
+
.#{$vendor-prefix}modal-handle {
|
120
|
+
@include transform(translateY(-50%));
|
121
|
+
}
|
148
122
|
|
149
|
-
|
150
|
-
|
123
|
+
&.show .#{$vendor-prefix}modal-handle {
|
124
|
+
@include transform(translateY(0));
|
125
|
+
}
|
151
126
|
}
|
152
127
|
}
|
153
128
|
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
129
|
+
@if index($modal-animation, "slide-in-bottom") {
|
130
|
+
&.slide-in-bottom {
|
131
|
+
.#{$vendor-prefix}modal-handle {
|
132
|
+
@include transform(translateY(50%));
|
133
|
+
}
|
159
134
|
|
160
|
-
|
161
|
-
|
135
|
+
&.show .#{$vendor-prefix}modal-handle {
|
136
|
+
@include transform(translateY(0));
|
137
|
+
}
|
162
138
|
}
|
163
139
|
}
|
164
140
|
|
165
|
-
|
166
|
-
|
167
|
-
|
168
|
-
|
169
|
-
|
141
|
+
@if index($modal-animation, "slide-in-left") {
|
142
|
+
&.slide-in-left {
|
143
|
+
.#{$vendor-prefix}modal-handle {
|
144
|
+
@include transition(all $modal-transition cubic-bezier(0.25, 0.5, 0.5, 0.9));
|
145
|
+
@include transform(translateX(-50%));
|
146
|
+
}
|
170
147
|
|
171
|
-
|
172
|
-
|
173
|
-
|
148
|
+
&.show .#{$vendor-prefix}modal-handle {
|
149
|
+
@include transform(translateX(0));
|
150
|
+
}
|
174
151
|
}
|
175
152
|
}
|
176
153
|
|
177
|
-
|
178
|
-
|
179
|
-
|
180
|
-
|
181
|
-
|
182
|
-
|
154
|
+
@if index($modal-animation, "slide-in-right") {
|
155
|
+
&.slide-in-right {
|
156
|
+
.#{$vendor-prefix}modal-handle {
|
157
|
+
@include transition(all $modal-transition cubic-bezier(0.25, 0.5, 0.5, 0.9));
|
158
|
+
@include transform(translateX(50%));
|
159
|
+
}
|
183
160
|
|
184
|
-
|
185
|
-
|
186
|
-
|
161
|
+
&.show .#{$vendor-prefix}modal-handle {
|
162
|
+
@include transform(translateX(0));
|
163
|
+
}
|
187
164
|
}
|
188
165
|
}
|
189
166
|
|
190
|
-
|
191
|
-
|
192
|
-
|
193
|
-
|
194
|
-
|
167
|
+
@if index($modal-animation, "sticky-top") {
|
168
|
+
&.sticky-top {
|
169
|
+
.#{$vendor-prefix}modal-outer {
|
170
|
+
top: -100%;
|
171
|
+
opacity: 0;
|
172
|
+
@include transition(all $modal-transition);
|
173
|
+
}
|
195
174
|
|
196
|
-
|
197
|
-
|
198
|
-
|
175
|
+
&.show .#{$vendor-prefix}modal-outer {
|
176
|
+
top: 0;
|
177
|
+
opacity: 1;
|
178
|
+
}
|
199
179
|
}
|
200
180
|
}
|
201
181
|
|
202
|
-
|
203
|
-
|
204
|
-
|
205
|
-
|
206
|
-
|
207
|
-
|
182
|
+
@if index($modal-animation, "sticky-bottom") {
|
183
|
+
&.sticky-bottom {
|
184
|
+
.#{$vendor-prefix}modal-outer {
|
185
|
+
top: auto;
|
186
|
+
bottom: -100%;
|
187
|
+
opacity: 0;
|
188
|
+
@include transition(all $modal-transition);
|
189
|
+
}
|
208
190
|
|
209
|
-
|
210
|
-
|
211
|
-
|
191
|
+
&.show .#{$vendor-prefix}modal-outer {
|
192
|
+
bottom: 0;
|
193
|
+
opacity: 1;
|
194
|
+
}
|
212
195
|
}
|
213
196
|
}
|
214
197
|
|
215
|
-
|
216
|
-
|
217
|
-
|
218
|
-
|
219
|
-
|
220
|
-
|
221
|
-
|
198
|
+
@if index($modal-animation, "sticky-left") {
|
199
|
+
&.sticky-left {
|
200
|
+
.#{$vendor-prefix}modal-outer {
|
201
|
+
left: -100%;
|
202
|
+
opacity: 0;
|
203
|
+
top: 50%;
|
204
|
+
@include transition(all $modal-transition);
|
205
|
+
@include transform(translate(0, -50%));
|
206
|
+
}
|
222
207
|
|
223
|
-
|
224
|
-
|
208
|
+
&.show .#{$vendor-prefix}modal-outer {
|
209
|
+
left: 0;
|
210
|
+
opacity: 1;
|
211
|
+
}
|
225
212
|
}
|
226
213
|
}
|
227
214
|
|
228
|
-
|
229
|
-
|
215
|
+
@if index($modal-animation, "sticky-right") {
|
216
|
+
&.sticky-right {
|
217
|
+
.#{$vendor-prefix}modal-outer {
|
218
|
+
left: auto;
|
219
|
+
right: -100%;
|
220
|
+
top: 50%;
|
221
|
+
opacity: 0;
|
222
|
+
@include transition(all $modal-transition);
|
223
|
+
@include transform(translate(0, -50%));
|
224
|
+
}
|
230
225
|
|
231
|
-
|
232
|
-
|
233
|
-
|
234
|
-
|
235
|
-
|
236
|
-
&.show .#{$vendor-prefix}modal-handle {
|
237
|
-
@include transform(rotateX(0deg));
|
226
|
+
&.show .#{$vendor-prefix}modal-outer {
|
227
|
+
right: 0;
|
228
|
+
opacity: 1;
|
229
|
+
}
|
238
230
|
}
|
239
231
|
}
|
240
232
|
}
|