ellipsis-compass 1.0.6 → 1.0.7

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 (34) hide show
  1. checksums.yaml +8 -8
  2. data/stylesheets/ellipsis/animation/_transitions.scss +0 -318
  3. data/stylesheets/ellipsis/base/_breakpoints.scss +1 -1
  4. data/stylesheets/ellipsis/base/_document.scss +21 -1
  5. data/stylesheets/ellipsis/base/_global.scss +9 -8
  6. data/stylesheets/ellipsis/component/_element.scss +81 -0
  7. data/stylesheets/ellipsis/component/_ui.scss +94 -22
  8. data/stylesheets/ellipsis/font/_icons.scss +229 -8
  9. data/stylesheets/ellipsis/form/_form.scss +284 -184
  10. data/stylesheets/ellipsis/grid/_grid.scss +21 -1
  11. data/stylesheets/ellipsis/helpers/_component.scss +9 -1
  12. data/stylesheets/ellipsis/helpers/_mixins.scss +13 -194
  13. data/stylesheets/ellipsis/helpers/_visibility.scss +3 -3
  14. data/stylesheets/ellipsis/touch/ui/_topbar.scss +11 -0
  15. data/stylesheets/ellipsis/typography/_typography.scss +1 -1
  16. data/stylesheets/ellipsis/ui/_carousel.scss +275 -132
  17. data/stylesheets/ellipsis/ui/_collapse.scss +174 -0
  18. data/stylesheets/ellipsis/ui/_container.scss +317 -1
  19. data/stylesheets/ellipsis/ui/_drawer.scss +29 -5
  20. data/stylesheets/ellipsis/ui/_dropdown.scss +103 -52
  21. data/stylesheets/ellipsis/ui/_gallery.scss +85 -81
  22. data/stylesheets/ellipsis/ui/_menu.scss +130 -82
  23. data/stylesheets/ellipsis/ui/_navbar.scss +82 -30
  24. data/stylesheets/ellipsis/ui/_pagination.scss +12 -9
  25. data/stylesheets/ellipsis/ui/_screentab.scss +109 -0
  26. data/stylesheets/ellipsis/ui/_slidingpanel.scss +1 -1
  27. data/stylesheets/ellipsis/ui/_social.scss +51 -49
  28. data/stylesheets/ellipsis/ui/_stepprogress.scss +219 -0
  29. data/stylesheets/ellipsis/ui/_toggle.scss +5 -2
  30. data/stylesheets/ellipsis/ui/_tooltip.scss +5 -3
  31. data/stylesheets/ellipsis/ui/_topbar.scss +90 -16
  32. data/stylesheets/ellipsis/ui/_window.scss +13 -8
  33. metadata +6 -3
  34. data/stylesheets/ellipsis/ui/_collapsible.scss +0 -61
@@ -106,7 +106,11 @@ $total-columns: $grid-columns) {
106
106
  @mixin grid($row-width: null,
107
107
  $column-gutter: null,
108
108
  $total-columns: null,
109
- $touch-horizontal-constrain: true) {
109
+ $touch-horizontal-constrain: true,
110
+ $margin-top:null,
111
+ $margin-bottom:null,
112
+ $touch-margin-top:null,
113
+ $touch-margin-bottom:null) {
110
114
 
111
115
  $grid-width: 1200px !default;
112
116
  $grid-column-gutter: 30px !default;
@@ -294,6 +298,16 @@ $touch-horizontal-constrain: true) {
294
298
 
295
299
  }
296
300
 
301
+ @if($margin-top !=null){
302
+ .row,grid-row{
303
+ margin-top:$margin-top;
304
+ }
305
+ }
306
+ @if($margin-bottom !=null){
307
+ .row,grid-row{
308
+ margin-bottom:$margin-bottom;
309
+ }
310
+ }
297
311
  /* enforce no screen horizontal scrolling */
298
312
  @if $touch-horizontal-constrain {
299
313
  @media #{$breakpoint-touch}{
@@ -303,6 +317,12 @@ $touch-horizontal-constrain: true) {
303
317
  /* re-enable on per row basis, if needed */
304
318
  overflow-x: visible;
305
319
  }
320
+ @if($touch-margin-top !=null){
321
+ margin-top:$touch-margin-top;
322
+ }
323
+ @if($touch-margin-bottom !=null){
324
+ margin-bottom:$touch-margin-bottom;
325
+ }
306
326
  }
307
327
  }
308
328
  }
@@ -23,6 +23,14 @@
23
23
  }
24
24
  }
25
25
 
26
+ ui-container[name=base]{
27
+ position:relative;
28
+ }
29
+
30
+ [data-role=container]{
31
+ position:relative;
32
+ }
33
+
26
34
  //toggle-container
27
35
  .ui-fixed-toggle-container {
28
36
  z-index: $global-z-index + 9999;
@@ -30,7 +38,7 @@
30
38
  bottom: 0;
31
39
  width: 100%;
32
40
  background:$global-background;
33
- position: fixed;
41
+ position: fixed !important;
34
42
  overflow: hidden;
35
43
  *{
36
44
  &:focus{
@@ -1,15 +1,3 @@
1
- @mixin clearfix() { *zoom:1;
2
- &:before, &:after { content: " "; display: table; }
3
- &:after { clear: both; }
4
- }
5
-
6
- @mixin mobile-clearfix() {
7
- @include respondTo(smallScreen) { &:before, &:after { content: " "; display: table; }
8
- &:after { clear: both; }
9
- &:last-child { float: none; }
10
- }
11
- }
12
-
13
1
  @mixin gutter-bleed(){
14
2
  margin-right: - $grid-column-gutter/2 !important;
15
3
  margin-left: - $grid-column-gutter/2 !important;
@@ -22,193 +10,24 @@
22
10
  padding-left: $grid-column-gutter/2 !important;
23
11
  }
24
12
 
25
- @mixin dotted-border-bottom(){
26
- background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABBAAAAAAZp70QAAAABGdBTUEAALGPC%2FxhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAJ0Uk5TAA%2FmLNCpAAAAAmJLR0QADzoyPqMAAAAJcEhZcwAAAEgAAABIAEbJaz4AAAALSURBVAjXY5j%2FHwACQAGfMSJZswAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxMy0wMS0xMlQxNjozMToyMi0wODowMBl4csUAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTMtMDEtMTJUMTY6MzE6MjItMDg6MDBoJcp5AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAABJRU5ErkJggg%3D%3D) left bottom repeat-x;
27
-
28
- }
29
-
30
- @mixin dotted-border-top(){
31
- background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABBAAAAAAZp70QAAAABGdBTUEAALGPC%2FxhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAJ0Uk5TAA%2FmLNCpAAAAAmJLR0QADzoyPqMAAAAJcEhZcwAAAEgAAABIAEbJaz4AAAALSURBVAjXY5j%2FHwACQAGfMSJZswAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxMy0wMS0xMlQxNjozMToyMi0wODowMBl4csUAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTMtMDEtMTJUMTY6MzE6MjItMDg6MDBoJcp5AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAABJRU5ErkJggg%3D%3D) left top repeat-x;
32
-
33
- }
34
-
35
- @mixin constrain-to-grid(){
36
- margin:0 auto;
37
- max-width:$grid-width - $grid-column-gutter;
38
- }
39
-
40
- @mixin nav-index($index:1){
41
- -webkit-nav-index:$index;
42
- -moz-nav-index:$index;
43
- -o-nav-index:$index;
44
- -ms-nav-index:$index;
45
- nav-index:$index;
46
- }
47
-
48
- //modified background-image mixin that supports IE 10/11
49
- @mixin mod-background-image($image){
50
- @include background-image($image); // Compass default version, for everything but IE.
51
- background-image: -ms-#{$image}; // Vendor prefixes for IE
52
- }
53
-
54
- @mixin linear-gradient($list){
55
- @include background-image(linear-gradient(top, $list));
56
- }
57
-
58
- @mixin touch-content(){
59
- @media #{$breakpoint-touch}{
60
- @content;
61
- }
62
- }
63
-
64
- @mixin tablet-content(){
65
- @media #{$breakpoint-tablet}{
66
- @content;
67
- }
68
- }
69
-
70
- @mixin tablet-portrait-content(){
71
- @media #{$breakpoint-tablet-portrait}{
72
- @content;
73
- }
74
- }
75
-
76
- @mixin tablet-landscape-content(){
77
- @media #{$breakpoint-tablet-landscape}{
78
- @content;
79
- }
80
- }
81
-
82
- @mixin phone-content(){
83
- @media #{$breakpoint-phone}{
84
- @content;
85
- }
86
- }
87
-
88
- @mixin phone-portrait-content(){
89
- @media #{$breakpoint-phone-portrait}{
90
- @content;
91
- }
92
- }
93
-
94
- @mixin phone-landscape-content(){
95
- @media #{$breakpoint-phone-landscape}{
96
- @content;
97
- }
98
- }
99
-
100
- @mixin desktop-content(){
101
- @media #{$breakpoint-desktop}{
102
- @content;
103
- }
104
- }
105
-
106
- @mixin tablet-up-content(){
107
- @media #{$breakpoint-grid-tablet}{
108
- @content;
109
- }
110
- }
111
-
112
- @mixin tablet-small-content(){
113
- @media #{$breakpoint-small-tablet}{
114
- @content;
115
- }
116
- }
117
-
118
-
119
- @mixin grid-contain-content(){
120
- @media #{$breakpoint-grid-contain}{
121
- @content;
122
- }
123
- }
124
-
125
- @mixin portrait-content(){
126
- @media #{$breakpoint-portrait}{
127
- @content;
128
- }
129
- }
130
-
131
- @mixin landscape-content(){
132
- @media #{$breakpoint-landscape}{
133
- @content;
134
- }
135
- }
136
-
137
- @mixin media-breakpoint($width:null){
138
- @media only screen and (max-width: #{$width}){
139
- @content;
140
- }
141
- }
142
-
143
- @mixin tab-focus(){
144
- outline: $global-outline !important;
145
- @include touch-content(){
146
- outline: $global-touch-outline !important;
147
- }
148
- }
149
-
150
- @mixin disable-focus(){
151
- outline:0;
152
- -moz-user-focus: ignore;
13
+ @mixin gutter-collapse(){
14
+ padding-left:0;
15
+ padding-right:0;
153
16
  }
154
17
 
155
- @mixin expand-panel($label:null){
156
- margin-top:30px;
157
- @include gutter-bleed();
158
- min-height:30px;
159
- @include dotted-border-bottom();
160
- position:relative;
161
- height:auto;
162
- &:before{
163
- position:absolute;
164
- content:'#{$label}';
165
- font-size:20px;
166
- font-family: inherit;
167
- color:#333;
168
- top:-10px;
169
- left:5px + $grid-column-gutter/2;
170
-
171
- }
172
- &:after{
173
- font-family:bounc3;
174
- position:absolute;
175
- right:20px;
176
- top:-10px;
177
- content:'\e0df';
178
- font-size:16px;
179
- color:#333;
18
+ @mixin touch-gutter-bleed(){
19
+ .gutter-bleed{
20
+ @include touch-content(){
21
+ @include gutter-bleed();
22
+ }
180
23
  }
181
24
  }
182
25
 
183
- /* icon shortcut */
184
- @mixin span-icon(){
185
- span[class*='icon-'] {
186
- @content;
26
+ @mixin touch-gutter-collapse(){
27
+ .gutter-collapse{
28
+ @include touch-content(){
29
+ @include gutter-collapse();
30
+ }
187
31
  }
188
32
  }
189
33
 
190
- /* flexbox shortcut mixins */
191
- @mixin flexbox($alignment:flex-start,$justification:flex-start){
192
- @include display-flex();
193
- @include justify-content($justification);
194
- @include align-items($alignment);
195
- @content;
196
- }
197
-
198
- @mixin flexbox-column($alignment:flex-start,$justification:flex-start){
199
- @include display-flex();
200
- @include flex-direction(column);
201
- @include justify-content($justification);
202
- @include align-items($alignment);
203
- @content;
204
- }
205
-
206
- /* supports not for flex-wrap */
207
- @mixin flex-wrap-not-supported(){
208
- @supports not (flex-wrap: wrap) {
209
- @content;
210
- }
211
- }
212
-
213
-
214
-
@@ -74,15 +74,15 @@
74
74
 
75
75
  @media #{$breakpoint-tablet}{
76
76
  .show-for-phone,
77
- .show-for-small,
78
- .show-for-tablet-down,
79
- .show-for-medium-down{
77
+ .show-for-small{
80
78
  display:none !important;
81
79
  }
82
80
 
83
81
  .hide-for-phone,
84
82
  .hide-for-small,
85
83
  .show-for-tablet,
84
+ .show-for-tablet-down,
85
+ .show-for-medium-down,
86
86
  .show-for-medium,
87
87
  .show-for-tablet-up,
88
88
  .show-for-medium-up{
@@ -39,6 +39,17 @@ $brand-font-size:null
39
39
  @include flexbox($justification: center, $alignment:center);
40
40
  }
41
41
  }
42
+ .touch-right,touch-icons{
43
+ list-style: none;
44
+ position:absolute;
45
+ top:0;
46
+ right:5px;
47
+ @include flexbox($justification: center, $alignment:center);
48
+ height:100%;
49
+ &>touch-icon{
50
+ display:list-item;
51
+ }
52
+ }
42
53
  &>section{
43
54
  display:none !important;
44
55
  }
@@ -33,7 +33,7 @@ $cite-font-size: null,
33
33
  $cite-font-color: null,
34
34
  $cite-font-style: null) {
35
35
 
36
- $typography-paragraph-line-height: 1.6 !default;
36
+ $typography-paragraph-line-height: 1.5 !default;
37
37
  $typography-paragraph-margin: 0 0 1em 0 !default;
38
38
  $typography-paragraph-lead-font-size: $global-font-size * 1.5 !default;
39
39
  $typography-paragraph-header-sibling-margin: 2em 0 1em 0 !default;
@@ -2,92 +2,120 @@
2
2
 
3
3
  /* private -----------------------------------------------------------------------------------------------------------*/
4
4
 
5
- @mixin _ui-carousel($component:null,
6
- $padding: null,
7
- $margin: null,
8
- $container-width: null,
9
- $container-margin: null,
10
- $li-width: null,
11
- $height: null,
12
- $button-width: null,
13
- $button-top-position: null,
14
- $button-left-position: null,
15
- $button-right-position: null,
16
- $button-prev-icon-left-position: null,
17
- $button-next-icon-left-position: null,
18
- $icon-size: null,
19
- $icon-top-position: null,
20
- $z-index: null,
21
- $slide-margin-right: null,
22
- $constrain-image-to-width: null,
23
- $image-border:null,
24
- $image-border-active:null,
25
- $nav-control-top-position:null,
26
- $nav-control-position:null,
27
- $nav-control-next-icon:null,
28
- $nav-control-prev-icon:null,
29
- $nav-control-font-size:null,
30
- $nav-control-color:null,
31
- $nav-control-focus-opacity:null,
32
- $nav-animation:null,
33
- $max-height:null,
34
- $image-top-position:null
35
- ) {
36
-
5
+ @mixin _ui-carousel($component:null,$tag:null,
6
+ $outer-container-height:null,
7
+ $outer-container-width:null,
8
+ $outer-container-margin:null,
9
+ $inner-container-width:null,
10
+ $item-width: null,
11
+ $item-max-height:null,
12
+ $item-justification:null,
13
+ $item-alignment:null,
14
+ $item-margin-right:null,
15
+ $item-border:null,
16
+ $item-border-active:null,
17
+ $item-padding:null,
18
+ $button-padding:null,
19
+ $button-width:null,
20
+ $button-top-position:null,
21
+ $button-left-position:null,
22
+ $button-right-position:null,
23
+ $button-prev-icon-left-position:null,
24
+ $button-next-icon-left-position:null,
25
+ $icon-size:null,
26
+ $icon-top-position:null,
27
+ $z-index:null,
28
+ $constrain-image-to-width:null,
29
+ $image-top-position:null,
30
+ $navigation-top-position:null,
31
+ $navigation-position:null,
32
+ $navigation-next-icon:null,
33
+ $navigation-prev-icon:null,
34
+ $navigation-font-size:null,
35
+ $navigation-color:null,
36
+ $navigation-hover-opacity:null,
37
+ $navigation-hover:null,
38
+ $include-touch-media-queries:null
39
+ )
40
+ {
37
41
 
38
- height: $height;
39
- position: relative;
40
- overflow: hidden;
41
- &:hover,&:focus{
42
- .navigation{
43
- opacity:1;
44
- }
42
+ $carousel-selector:'.ui-carousel';
43
+ $navigation-selector:'.navigation';
44
+ $inner-selector:'[data-role=carousel-inner-container]';
45
+ $item-selector:li;
46
+ $element-selector:'[data-role=carousel-outer-container]';
47
+ @if $component-custom-tags==true{
48
+ $navigation-selector:carousel-navigation;
49
+ $carousel-selector:ui-carousel;
50
+ $inner-selector:carousel-inner-container;
51
+ $item-selector:carousel-item;
52
+ $element-selector:carousel-outer-container;
53
+ @if $tag != null{
54
+ $carousel-selector:$tag;
45
55
  }
56
+ }
46
57
 
47
- &.margin,&[data-margin]{
48
- margin: $container-margin;
49
- }
50
- &.hidden{
51
- visibility: hidden;
58
+
59
+
60
+ position: relative;
61
+ @include flexbox($justification:center,$alignment:center);
62
+ width:$outer-container-width;
63
+ @if $outer-container-height !=null{
64
+ height: $outer-container-height;
65
+ }
66
+ @if $outer-container-margin !=null{
67
+ margin: $outer-container-margin;
68
+ }
69
+ &:hover,&:focus{
70
+ #{$navigation-selector}{
71
+ opacity:1;
52
72
  }
53
- .navigation{
73
+ }
74
+
75
+ &.hidden{
76
+ visibility: hidden;
77
+ }
78
+ &>#{$navigation-selector}{
54
79
  position: absolute;
55
- top: $nav-control-top-position;
80
+ top: $navigation-top-position;
56
81
  z-index: $z-index;
57
- height:$nav-control-font-size;
58
- width:$nav-control-font-size;
59
- opacity:0;
60
- @if $nav-animation==true{
82
+ height:$navigation-font-size;
83
+ width:$navigation-font-size;
84
+
85
+ @if $navigation-hover==true{
86
+ opacity:0;
61
87
  @include transition(all 0.25s linear);
88
+ }@else{
89
+ opacity:1;
62
90
  }
63
91
 
64
92
  &.disabled,[disabled]{
65
93
  display:none !important;
66
94
  }
67
- &.visible{
95
+ &.nav-visible{
68
96
  visibility: visible;
97
+
69
98
  }
70
99
  &:hover,&:focus{
71
100
  cursor:pointer;
72
- opacity:$nav-control-focus-opacity;
101
+ opacity:$navigation-hover-opacity;
73
102
 
74
103
  }
75
-
76
104
  &.next{
77
- right: $nav-control-position;
105
+ right: $navigation-position;
78
106
  &:after{
79
- content:'#{$nav-control-next-icon}';
107
+ content:'#{$navigation-next-icon}';
80
108
  font-family:$global-icon-font-family;
81
- font-size:$nav-control-font-size;
109
+ font-size:$navigation-font-size;
82
110
  @extend %#{$component}-font;
83
111
  }
84
112
  }
85
113
  &.prev{
86
- left: $nav-control-position;
114
+ left: $navigation-position;
87
115
  &:after{
88
- content:'#{$nav-control-prev-icon}';
116
+ content:'#{$navigation-prev-icon}';
89
117
  font-family:$global-icon-font-family;
90
- font-size:$nav-control-font-size;
118
+ font-size:$navigation-font-size;
91
119
  @extend %#{$component}-font;
92
120
  }
93
121
  }
@@ -97,7 +125,7 @@ $image-top-position:null
97
125
  position: absolute;
98
126
  top: $button-top-position;
99
127
  z-index: $z-index;
100
- padding: $padding;
128
+ padding: $button-padding;
101
129
  width: $button-width;
102
130
 
103
131
  &.next {
@@ -119,53 +147,62 @@ $image-top-position:null
119
147
  }
120
148
  }
121
149
 
122
- [data-role=carousel-inner-container],carousel-inner-container {
123
- position: absolute;
124
- top:0;
125
- left:0;
126
-
127
- //width:100%;
150
+ #{$inner-selector} {
151
+ position: relative;
152
+ top:0;
153
+ left:0;
154
+ display:block;
155
+ overflow:hidden;
156
+ visibility: hidden;
128
157
 
129
- &.width,&[data-width]{
130
- width: $container-width;
131
- margin: $margin;
132
- }
133
- &.hidden{
134
- visibility: hidden;
135
- }
136
- .ui-carousel,ui-carousel {
158
+ @if $inner-container-width !=null{
159
+ width: $inner-container-width;
160
+ }
161
+ &.hidden{
162
+ visibility: hidden;
163
+ }
164
+ &.visible{
165
+ visibility: visible;
166
+ }
167
+ .multi-border{
168
+ border:1px solid transparent;
169
+ }
170
+ #{$carousel-selector},ui-template {
137
171
  list-style: none;
138
172
  @include flexbox($justification: flex-start, $alignment: flex-start);
139
-
140
173
  width:100%;
141
174
  padding: 0;
142
- &>li,&>carousel-item {
175
+ &>#{$item-selector} {
143
176
  width: 100%;
144
177
  height: auto;
145
178
  margin: 0;
146
179
  overflow: hidden;
147
180
  position: relative;
181
+ display:list-item;
148
182
  img {
149
183
  max-width: 100%;
150
- height:auto;
184
+ height:auto !important;
151
185
  }
152
- }
153
186
 
154
- &.multi-slide,&[data-multi-slide] {
187
+ }
188
+ &[data-animation=multi-slide],&[animation=multi-slide] {
155
189
  width: auto;
156
- &>li,&>carousel-item {
157
- width: $li-width !important;
190
+ &>#{$item-selector}{
191
+ @include flexbox-column($justification:$item-justification, $alignment:$item-alignment);
192
+ @if $item-width !=null{
193
+ min-width: $item-width !important;
194
+ max-width: $item-width !important;
195
+ }
158
196
  height: auto;
159
- margin-right: $slide-margin-right;
197
+ margin-right: $item-margin-right;
160
198
  overflow: hidden;
161
199
  position: relative;
162
- border:$image-border;
200
+ border:$item-border;
201
+ padding:$item-padding;
163
202
  cursor:pointer;
164
-
165
203
  &.active{
166
- border:$image-border-active;
204
+ border:$item-border-active;
167
205
  }
168
-
169
206
  @if$constrain-image-to-width != true{
170
207
  img {
171
208
  max-width: none;
@@ -174,9 +211,10 @@ $image-top-position:null
174
211
  }
175
212
  }
176
213
  }
177
- &.fade-transition,&[data-fade-transition]{
214
+ &[data-animation=fade],&[animation=fade]{
178
215
  display:block;
179
- &>li,&>carousel-item {
216
+
217
+ &>#{$item-selector} {
180
218
  display: none;
181
219
  position: absolute;
182
220
  opacity: 0;
@@ -193,11 +231,46 @@ $image-top-position:null
193
231
  max-width: 100%;
194
232
  height:auto;
195
233
  }
234
+ @if $include-touch-media-queries==true{
235
+ @include tablet-content(){
236
+ img{
237
+ max-width:150% !important;
238
+ margin-left:-25% !important;
239
+ }
240
+ }
241
+ @include phone-content(){
242
+ img{
243
+ max-width:200% !important;
244
+ margin-left:-50% !important;
245
+ }
246
+ }
247
+ }
248
+ }
249
+ }
250
+ &[data-animation=slide],&[animation=slide]{
251
+ &>#{$item-selector} {
252
+ max-width:100%;
253
+ min-width:100%;
254
+ @if $include-touch-media-queries==true{
255
+ @include tablet-content(){
256
+ img{
257
+ max-width:150% !important;
258
+ margin-left:-25% !important;
259
+ }
260
+ }
261
+ @include phone-content(){
262
+ img{
263
+ max-width:200% !important;
264
+ margin-left:-50% !important;
265
+ }
266
+ }
267
+ }
196
268
  }
269
+
197
270
  }
198
- &[data-height]{
199
- &>li,&>carousel-item{
200
- max-height:$max-height;
271
+ @if $item-max-height != null{
272
+ &>#{$item-selector}{
273
+ max-height:$item-max-height;
201
274
  overflow:hidden;
202
275
  img{
203
276
  margin-top:$image-top-position;
@@ -206,16 +279,9 @@ $image-top-position:null
206
279
  }
207
280
  }
208
281
  }
209
- }
210
282
 
211
- @media #{$breakpoint-touch}{
212
- [data-role=carousel-outer-container],carousel-outer-container {
213
- .ui-button,.navigation {
214
- display: none;
215
- }
283
+ }
216
284
 
217
- }
218
- }
219
285
 
220
286
 
221
287
 
@@ -223,15 +289,22 @@ $image-top-position:null
223
289
  /* Public -----------------------------------------------------------------------------------------------------------*/
224
290
 
225
291
 
226
- @mixin ui-carousel($class:null,$component:null,
227
- $padding: 30px 15px 30px 15px,
228
- $margin: 0 auto,
229
- $container-width: 90%,
230
- $container-margin: 0,
231
- $li-width: 200px,
232
- $height: auto,
292
+ @mixin ui-carousel($class:null,$component:null,$tag:null,
293
+ $outer-container-height: auto,
294
+ $outer-container-width:100%,
295
+ $outer-container-margin:null,
296
+ $inner-container-width:null,
297
+ $item-width: null,
298
+ $item-max-height:null,
299
+ $item-justification:flex-start,
300
+ $item-alignment:center,
301
+ $item-margin-right:12px,
302
+ $item-border:0,
303
+ $item-border-active:0,
304
+ $item-padding:0,
305
+ $button-padding: 30px 15px 30px 15px,
233
306
  $button-width:26px,
234
- $button-top-position:20%,
307
+ $button-top-position:45%,
235
308
  $button-left-position:0,
236
309
  $button-right-position:0,
237
310
  $button-prev-icon-left-position:0,
@@ -239,46 +312,116 @@ $button-next-icon-left-position:0,
239
312
  $icon-size:20px,
240
313
  $icon-top-position:20px,
241
314
  $z-index:$global-z-index + 100,
242
- $slide-margin-right:8px,
243
315
  $constrain-image-to-width:true,
244
- $image-border:0,
245
- $image-border-active:0,
246
- $nav-control-top-position:40%,
247
- $nav-control-position:10px,
248
- $nav-control-next-icon:\e179,
249
- $nav-control-prev-icon:\e178,
250
- $nav-control-font-size:2.5em,
251
- $nav-control-color:$white,
252
- $nav-control-focus-opacity:.8,
253
- $nav-animation:true,
254
- $max-height:450px,
255
- $image-top-position:0
316
+ $image-top-position:0,
317
+ $navigation-top-position:40%,
318
+ $navigation-position:2em,
319
+ $navigation-next-icon:\e179,
320
+ $navigation-prev-icon:\e178,
321
+ $navigation-font-size:2em,
322
+ $navigation-color:$white,
323
+ $navigation-hover-opacity:.8,
324
+ $navigation-hover:true,
325
+ $include-touch-media-queries:true
326
+
256
327
  ) {
328
+ $navigation-selector:'.navigation';
329
+ $element-selector:'[data-role=carousel-outer-container]';
330
+ @if $component-custom-tags==true{
331
+ $element-selector:carousel-outer-container;
332
+ $navigation-selector:carousel-navigation;
333
+ }
257
334
 
258
- [data-role=carousel-outer-container],carousel-outer-container {
335
+ #{$element-selector} {
259
336
  @if $class != null{
260
337
  &.#{$class} {
261
338
 
262
- @include _ui-carousel($component,$padding,$margin,$container-width,$container-margin,$li-width,$height,
263
- $button-width,$button-top-position,$button-left-position,$button-right-position,$button-prev-icon-left-position,
264
- $button-next-icon-left-position,$icon-size,$icon-top-position,$z-index,$slide-margin-right,$constrain-image-to-width,
265
- $image-border,$image-border-active,$nav-control-top-position,$nav-control-position,$nav-control-next-icon,
266
- $nav-control-prev-icon,$nav-control-font-size,$nav-control-color,$nav-control-focus-opacity,$nav-animation,$max-height,$image-top-position
339
+ @include _ui-carousel($component,$tag,
340
+ $outer-container-height,
341
+ $outer-container-width,
342
+ $outer-container-margin,
343
+ $inner-container-width,
344
+ $item-width,
345
+ $item-max-height,
346
+ $item-justification,
347
+ $item-alignment,
348
+ $item-margin-right,
349
+ $item-border,
350
+ $item-border-active,
351
+ $item-padding,
352
+ $button-padding,
353
+ $button-width,
354
+ $button-top-position,
355
+ $button-left-position,
356
+ $button-right-position,
357
+ $button-prev-icon-left-position,
358
+ $button-next-icon-left-position,
359
+ $icon-size,
360
+ $icon-top-position,
361
+ $z-index,
362
+ $constrain-image-to-width,
363
+ $image-top-position,
364
+ $navigation-top-position,
365
+ $navigation-position,
366
+ $navigation-next-icon,
367
+ $navigation-prev-icon,
368
+ $navigation-font-size,
369
+ $navigation-color,
370
+ $navigation-hover-opacity,
371
+ $navigation-hover,
372
+ $include-touch-media-queries
267
373
  );
268
374
 
269
375
  @content;
270
376
  }
271
377
  } @else {
272
378
 
273
- @include _ui-carousel($component,$padding,$margin,$container-width,$container-margin,$li-width,$height,
274
- $button-width,$button-top-position,$button-left-position,$button-right-position,$button-prev-icon-left-position,
275
- $button-next-icon-left-position,$icon-size,$icon-top-position,$z-index,$slide-margin-right,$constrain-image-to-width,
276
- $image-border,$image-border-active,$nav-control-top-position,$nav-control-position,$nav-control-next-icon,
277
- $nav-control-prev-icon,$nav-control-font-size,$nav-control-color,$nav-control-focus-opacity,$nav-animation,$max-height,$image-top-position
379
+ @include _ui-carousel($component,$tag,
380
+ $outer-container-height,
381
+ $outer-container-width,
382
+ $outer-container-margin,
383
+ $inner-container-width,
384
+ $item-width,
385
+ $item-max-height,
386
+ $item-justification,
387
+ $item-alignment,
388
+ $item-margin-right,
389
+ $item-border,
390
+ $item-border-active,
391
+ $item-padding,
392
+ $button-padding,
393
+ $button-width,
394
+ $button-top-position,
395
+ $button-left-position,
396
+ $button-right-position,
397
+ $button-prev-icon-left-position,
398
+ $button-next-icon-left-position,
399
+ $icon-size,
400
+ $icon-top-position,
401
+ $z-index,
402
+ $constrain-image-to-width,
403
+ $image-top-position,
404
+ $navigation-top-position,
405
+ $navigation-position,
406
+ $navigation-next-icon,
407
+ $navigation-prev-icon,
408
+ $navigation-font-size,
409
+ $navigation-color,
410
+ $navigation-hover-opacity,
411
+ $navigation-hover,
412
+ $include-touch-media-queries
278
413
  );
279
414
 
280
-
281
415
  @content;
282
416
  }
283
417
  }
418
+ //don't show navigation for touch
419
+ @include touch-content(){
420
+ #{$element-selector} {
421
+ .ui-button,#{$navigation-selector} {
422
+ display: none;
423
+ }
424
+
425
+ }
426
+ }
284
427
  }