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.
Files changed (44) hide show
  1. checksums.yaml +4 -4
  2. data/changelog.md +105 -67
  3. data/license.md +1 -1
  4. data/readme.md +5 -8
  5. data/roadmap.md +13 -11
  6. data/scss/toolkit/_common.scss +19 -10
  7. data/scss/toolkit/components/accordion.scss +0 -7
  8. data/scss/toolkit/components/breadcrumb.scss +0 -2
  9. data/scss/toolkit/components/button-group.scss +3 -19
  10. data/scss/toolkit/components/button.scss +2 -2
  11. data/scss/toolkit/components/drop.scss +5 -8
  12. data/scss/toolkit/components/flyout.scss +1 -5
  13. data/scss/toolkit/components/grid.scss +35 -17
  14. data/scss/toolkit/components/icon.scss +1 -14
  15. data/scss/toolkit/components/input-group.scss +7 -16
  16. data/scss/toolkit/components/input.scss +1 -7
  17. data/scss/toolkit/components/label.scss +0 -5
  18. data/scss/toolkit/components/lazy-load.scss +1 -1
  19. data/scss/toolkit/components/loader.scss +1 -1
  20. data/scss/toolkit/components/matrix.scss +7 -13
  21. data/scss/toolkit/components/modal.scss +123 -131
  22. data/scss/toolkit/components/notice.scss +5 -2
  23. data/scss/toolkit/components/pagination.scss +0 -1
  24. data/scss/toolkit/components/popover.scss +13 -16
  25. data/scss/toolkit/components/progress.scss +2 -17
  26. data/scss/toolkit/components/showcase.scss +5 -2
  27. data/scss/toolkit/components/table.scss +10 -8
  28. data/scss/toolkit/components/tabs.scss +1 -0
  29. data/scss/toolkit/components/tooltip.scss +38 -42
  30. data/scss/toolkit/components/type-ahead.scss +2 -6
  31. data/scss/toolkit/effects/oval.scss +3 -1
  32. data/scss/toolkit/effects/pill.scss +8 -12
  33. data/scss/toolkit/effects/skew.scss +9 -15
  34. data/scss/toolkit/layout/base.scss +4 -18
  35. data/scss/toolkit/layout/code.scss +1 -1
  36. data/scss/toolkit/layout/form.scss +11 -10
  37. data/scss/toolkit/layout/responsive.scss +4 -2
  38. data/scss/toolkit/layout/typography.scss +9 -3
  39. data/scss/toolkit/mixins/_components.scss +16 -0
  40. data/scss/toolkit/mixins/_helper.scss +15 -0
  41. data/scss/toolkit/mixins/_layout.scss +0 -9
  42. data/scss/toolkit/themes/{titon.scss → demo.scss} +39 -15
  43. data/version.md +1 -1
  44. 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 .3s);
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 .3s, opacity .3s);
33
+ @include transition(left $drop-transition, opacity $drop-transition);
34
34
  }
35
35
 
36
36
  // Apply to self
37
- &,
38
- ul {
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
- .col.mobile-push-#{$i} { left: $span; }
46
- .col.mobile-pull-#{$i} { right: $span; }
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
- .col.tablet-push-#{$i} { left: $span; }
61
- .col.tablet-pull-#{$i} { right: $span; }
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
- .col.desktop-push-#{$i} { left: $span; }
76
- .col.desktop-pull-#{$i} { right: $span; }
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
- .col.small-push-#{$i} { left: $span; }
95
- .col.small-pull-#{$i} { right: $span; }
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
- .col.medium-push-#{$i} { left: $span; }
110
- .col.medium-pull-#{$i} { right: $span; }
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
- .col.large-push-#{$i} { left: $span; }
125
- .col.large-pull-#{$i} { right: $span; }
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
- > .#{$vendor-prefix}input,
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
- font-size: inherit;
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
- > .#{$vendor-prefix}input:first-child,
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
- > .#{$vendor-prefix}input:last-child,
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-color: $info-light;
38
+ background: $info-light;
45
39
  }
46
40
 
47
41
  // Style when input is disabled
@@ -23,11 +23,6 @@
23
23
  padding: .2rem .35rem;
24
24
  }
25
25
 
26
- @include is-medium() {
27
- font-size: .7rem;
28
- padding: .275rem .425rem;
29
- }
30
-
31
26
  @include is-large {
32
27
  font-size: .8rem;
33
28
  padding: .35rem .5rem;
@@ -8,5 +8,5 @@
8
8
 
9
9
  .#{$vendor-prefix}lazy-load {
10
10
  background-image: none !important;
11
- @include transition(background $lazyLoad-transition);
11
+ @include transition(background-image $lazyLoad-transition);
12
12
  }
@@ -95,7 +95,7 @@
95
95
  }
96
96
 
97
97
  .#{$vendor-prefix}loader.bubble-spinner {
98
- .spinner {
98
+ .#{$vendor-prefix}loader-spinner {
99
99
  width: 100px;
100
100
  height: 100px;
101
101
  position: relative;
@@ -11,20 +11,14 @@
11
11
  position: relative;
12
12
  @include clear-fix;
13
13
 
14
- &.#{$state-has-prefix}no-columns .#{$vendor-prefix}matrix-item {
15
- position: relative !important;
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
- img {
25
- max-width: 100%;
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: 50%;
12
- left: 50%;
13
- width: 50%;
14
- height: auto;
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
- max-width: 700px;
19
- min-width: 350px;
16
+ overflow: auto;
17
+ -webkit-overflow-scrolling: touch;
20
18
  visibility: hidden;
21
- backface-visibility: hidden;
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
- &.from-above,
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
- &.fade {
99
- opacity: 0;
100
- @include transition(opacity $modal-transition, visibility $modal-transition);
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
- &.show .#{$vendor-prefix}modal-handle {
129
- @include transform(translateY(0));
99
+ &.show .#{$vendor-prefix}modal-handle {
100
+ @include transform(scale(1));
101
+ }
130
102
  }
131
103
  }
132
104
 
133
- &.slide-in-bottom {
134
- .#{$vendor-prefix}modal-handle {
135
- @include transform(translateY(50%));
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
- &.show .#{$vendor-prefix}modal-handle {
139
- @include transform(translateY(0));
111
+ &.show .#{$vendor-prefix}modal-handle {
112
+ @include transform(scale(1));
113
+ }
140
114
  }
141
115
  }
142
116
 
143
- &.slide-in-left {
144
- .#{$vendor-prefix}modal-handle {
145
- @include transition(all $modal-transition cubic-bezier(0.25, 0.5, 0.5, 0.9));
146
- @include transform(translateX(-50%));
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
- &.show .#{$vendor-prefix}modal-handle {
150
- @include transform(translateX(0));
123
+ &.show .#{$vendor-prefix}modal-handle {
124
+ @include transform(translateY(0));
125
+ }
151
126
  }
152
127
  }
153
128
 
154
- &.slide-in-right {
155
- .#{$vendor-prefix}modal-handle {
156
- @include transition(all $modal-transition cubic-bezier(0.25, 0.5, 0.5, 0.9));
157
- @include transform(translateX(50%));
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
- &.show .#{$vendor-prefix}modal-handle {
161
- @include transform(translateX(0));
135
+ &.show .#{$vendor-prefix}modal-handle {
136
+ @include transform(translateY(0));
137
+ }
162
138
  }
163
139
  }
164
140
 
165
- &.sticky-top {
166
- top: -100%;
167
- opacity: 0;
168
- @include transition(all $modal-transition);
169
- @include transform(translateX(-50%)); // reset to x
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
- &.show {
172
- top: 0;
173
- opacity: 1;
148
+ &.show .#{$vendor-prefix}modal-handle {
149
+ @include transform(translateX(0));
150
+ }
174
151
  }
175
152
  }
176
153
 
177
- &.sticky-bottom {
178
- top: auto;
179
- bottom: -100%;
180
- opacity: 0;
181
- @include transition(all $modal-transition);
182
- @include transform(translateX(-50%)); // reset to x
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
- &.show {
185
- bottom: 0;
186
- opacity: 1;
161
+ &.show .#{$vendor-prefix}modal-handle {
162
+ @include transform(translateX(0));
163
+ }
187
164
  }
188
165
  }
189
166
 
190
- &.sticky-left {
191
- left: -100%;
192
- opacity: 0;
193
- @include transition(all $modal-transition);
194
- @include transform(translate(0, -50%));
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
- &.show {
197
- left: 0;
198
- opacity: 1;
175
+ &.show .#{$vendor-prefix}modal-outer {
176
+ top: 0;
177
+ opacity: 1;
178
+ }
199
179
  }
200
180
  }
201
181
 
202
- &.sticky-right {
203
- left: auto;
204
- right: -100%;
205
- opacity: 0;
206
- @include transition(all $modal-transition);
207
- @include transform(translate(0, -50%));
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
- &.show {
210
- right: 0;
211
- opacity: 1;
191
+ &.show .#{$vendor-prefix}modal-outer {
192
+ bottom: 0;
193
+ opacity: 1;
194
+ }
212
195
  }
213
196
  }
214
197
 
215
- &.flip {
216
- @include perspective(1300px);
217
-
218
- .#{$vendor-prefix}modal-handle {
219
- @include transform-style(preserve-3d);
220
- @include transform(rotateY(-70deg));
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
- &.show .#{$vendor-prefix}modal-handle {
224
- @include transform(rotateY(0deg));
208
+ &.show .#{$vendor-prefix}modal-outer {
209
+ left: 0;
210
+ opacity: 1;
211
+ }
225
212
  }
226
213
  }
227
214
 
228
- &.flip-vert {
229
- @include perspective(1300px);
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
- .#{$vendor-prefix}modal-handle {
232
- @include transform-style(preserve-3d);
233
- @include transform(rotateX(-70deg));
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
  }