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
@@ -37,16 +37,13 @@ $form-dropdown-border-radius: .6em !default;
37
37
  $form-dropdown-width: 18.625em !default;
38
38
  $form-dropdown-select-font-weight: normal !default;
39
39
 
40
- //input type=number
41
- $form-input-number-font-color: $global-font-color !default;
42
40
 
43
41
 
44
- /* Mixins ----------------------------------------------------------------------------------------------------- */
45
-
46
42
 
43
+ /* Mixins ----------------------------------------------------------------------------------------------------- */
47
44
 
48
- //semantic input
49
- @mixin _semantic-input-text($component) {
45
+ //input selector mixin
46
+ @mixin __input(){
50
47
  input[type="text"],
51
48
  input[type="password"],
52
49
  input[type="date"],
@@ -57,7 +54,14 @@ $form-input-number-font-color: $global-font-color !default;
57
54
  input[type="tel"],
58
55
  input[type="time"],
59
56
  input[type="url"],
60
- textarea {
57
+ textarea{
58
+ @content;
59
+ }
60
+ }
61
+
62
+ //semantic input
63
+ @mixin _semantic-input-text($component) {
64
+ @include __input(){
61
65
  &.#{$component} {
62
66
  @extend %#{$component}-background !optional;
63
67
  @extend %#{$component}-border !optional;
@@ -159,17 +163,7 @@ $form-input-number-font-color: $global-font-color !default;
159
163
  }
160
164
  }
161
165
 
162
- input[type="text"],
163
- input[type="password"],
164
- input[type="date"],
165
- input[type="datetime"],
166
- input[type="email"],
167
- input[type="number"],
168
- input[type="search"],
169
- input[type="tel"],
170
- input[type="time"],
171
- input[type="url"],
172
- textarea {
166
+ @include __input(){
173
167
  font-family: inherit;
174
168
  @extend %#{$input-component}-background !optional;
175
169
  @extend %#{$input-component}-border !optional;
@@ -225,21 +219,21 @@ $form-input-number-font-color: $global-font-color !default;
225
219
  }
226
220
  }
227
221
 
222
+
228
223
  }
229
224
 
230
225
  /* Form Input ---------------------------------------------------------------------------------------------------------*/
226
+ @mixin input-addon($tag:null){
231
227
 
232
- @mixin form-input($check-component: css-checkbox, $switch-component: css-switch, $switch-toggle-component: css-switch-toggle,$number-component:default,
233
- $button-box-shadow: true,
234
- $button-margin: 10px,
235
- $input-padding-right: 6rem,
236
- $input-padding-left: 6rem,
237
- $z-index: 2) {
238
-
239
- .ui-input-addon,ui-input-addon {
228
+ $_tag:ui-input-addon;
229
+ @if $tag !=null{
230
+ $_tag:$tag;
231
+ }
232
+ .ui-input-addon,#{$_tag} {
240
233
  @include display-flex();
241
234
  margin: 0 0 1em 0;
242
235
  position:relative;
236
+ width:100%;
243
237
  input {
244
238
  @include flex(1);
245
239
  margin: 0 !important;
@@ -281,14 +275,16 @@ $z-index: 2) {
281
275
  }
282
276
  }
283
277
  }
278
+ }
284
279
 
285
- input[type="checkbox"] {
286
- &.ui-checkbox, &.ui-switch {
287
- opacity: 0;
288
- }
280
+ @mixin input-checkbox($check-component:null){
281
+ @if $check-component ==null{
282
+ $check-component:css-checkbox;
289
283
  }
290
- input[type="checkbox"] {
291
- &.ui-checkbox {
284
+ ui-checkbox{
285
+ display:block;
286
+ position:relative;
287
+ input[type="checkbox"] {
292
288
  position: absolute;
293
289
  left: 0;
294
290
  bottom: 0;
@@ -296,122 +292,129 @@ $z-index: 2) {
296
292
  height: 30px;
297
293
  width: 100%;
298
294
  cursor: pointer;
295
+ opacity: 0;
299
296
  }
300
- }
301
- label {
302
- &.ui-form {
303
- position: relative;
304
- }
305
- }
306
- input[type="checkbox"] + label.ui-checkbox {
307
- display: block;
308
- position: relative;
309
- padding: $form-checkbox-label-padding;
310
- vertical-align: text-bottom;
311
- padding-bottom: 0;
312
- margin-bottom: 1em;
313
- line-height:1.2;
314
- cursor: pointer;
315
- &:before {
316
- content: "";
297
+
298
+ input[type="checkbox"] + label {
317
299
  display: block;
300
+ position: relative;
301
+ padding: $form-checkbox-label-padding;
302
+ vertical-align: text-bottom;
303
+ padding-bottom: 0;
304
+ margin-bottom: 1em;
318
305
  line-height:1.2;
319
- height: $form-checkbox-size;
320
- width: $form-checkbox-size;
321
- text-align: center;
322
- position: absolute;
323
- bottom: 0;
324
- left: 0;
325
- font-size: $form-checkbox-icon-font-size;
326
- @extend %#{$check-component}-border !optional;
327
- @extend %#{$check-component}-background !optional;
328
-
306
+ cursor: pointer;
307
+ &:before {
308
+ content: "";
309
+ display: block;
310
+ line-height:1.2;
311
+ height: $form-checkbox-size;
312
+ width: $form-checkbox-size;
313
+ text-align: center;
314
+ position: absolute;
315
+ bottom: 0;
316
+ left: 0;
317
+ font-size: $form-checkbox-icon-font-size;
318
+ @extend %#{$check-component}-border !optional;
319
+ @extend %#{$check-component}-background !optional;
320
+ }
321
+ &.inline{
322
+ display:inline-block;
323
+ }
329
324
  }
325
+ input[type="checkbox"]:checked + label {
330
326
 
331
- &.inline{
332
- display:inline-block;
327
+ &:before {
328
+ content: "#{$global-icon-check}";
329
+ @extend %#{$check-component}-font !optional;
330
+ font-family: $global-icon-font-family;
331
+ font-size: $form-checkbox-icon-font-size;
332
+ }
333
333
  }
334
334
 
335
- }
336
-
337
- input[type="checkbox"]:checked + label.ui-checkbox {
338
-
339
- &:before {
340
- content: "#{$global-icon-check}";
341
- @extend %#{$check-component}-font !optional;
342
- font-family: $global-icon-font-family;
343
- font-size: $form-checkbox-icon-font-size;
335
+ input[type="checkbox"]:disabled + label {
336
+ @extend %#{$check-component}-disabled !optional;
337
+ background: none !important;
344
338
  }
345
- }
346
339
 
347
- input[type="checkbox"]:disabled + label.ui-checkbox {
348
- @extend %#{$check-component}-disabled !optional;
349
- background: none !important;
340
+ input[type="checkbox"]:disabled:checked + label {
341
+ @extend %#{$check-component}-disabled !optional;
342
+ background: none !important;
343
+ }
350
344
  }
351
345
 
352
- input[type="checkbox"]:disabled:checked + label.ui-checkbox {
353
- @extend %#{$check-component}-disabled !optional;
354
- background: none !important;
355
- }
356
346
 
357
- input[type="radio"] {
358
- &.ui-radio {
347
+ ui-radio{
348
+ display:block;
349
+ position:relative;
350
+ input[type="radio"] {
359
351
  opacity: 0;
360
352
  }
361
- }
362
353
 
363
- input[type="radio"] + label.ui-radio {
364
- display: block;
365
- position: relative;
366
- padding: $form-checkbox-label-padding;
367
- vertical-align: text-bottom;
368
- padding-bottom: 0;
369
- margin-bottom: 0em;
370
- line-height: 1;
371
- &:before {
372
- content: "";
354
+ input[type="radio"] + label {
373
355
  display: block;
356
+ position: relative;
357
+ padding: $form-checkbox-label-padding;
358
+ vertical-align: text-bottom;
359
+ padding-bottom: 0;
360
+ margin-bottom: 0em;
374
361
  line-height: 1;
375
- height: $form-checkbox-size;
376
- width: $form-checkbox-size;
377
- text-align: center;
378
- position: absolute;
379
- bottom: 0em;
380
- left: 0;
381
- @extend %#{$check-component}-border !optional;
382
- @extend %#{$check-component}-background !optional;
383
- @include border-radius($form-radio-border-radius);
362
+ &:before {
363
+ content: "";
364
+ display: block;
365
+ line-height: 1;
366
+ height: $form-checkbox-size;
367
+ width: $form-checkbox-size;
368
+ text-align: center;
369
+ position: absolute;
370
+ bottom: 0em;
371
+ left: 0;
372
+ @extend %#{$check-component}-border !optional;
373
+ @extend %#{$check-component}-background !optional;
374
+ @include border-radius($form-radio-border-radius);
375
+ }
376
+ &.inline{
377
+ display:inline-block;
378
+ margin-bottom:1em;
379
+ }
384
380
  }
385
- &.inline{
386
- display:inline-block;
387
- margin-bottom:1em;
381
+
382
+ input[type="radio"]:checked + label {
383
+ &:after {
384
+ line-height: 1;
385
+ content: '#{$global-icon-radio}';
386
+ font-size: $form-radio-icon-font-size;
387
+ @extend %#{$check-component}-icon !optional;
388
+ font-family: $global-icon-font-family;
389
+ bottom:.4em;
390
+ left:.4em;
391
+ position: absolute;
392
+ }
388
393
  }
389
- }
390
394
 
391
- input[type="radio"]:checked + label.ui-radio {
392
- &:after {
393
- line-height: 1;
394
- content: '#{$global-icon-radio}';
395
- font-size: $form-radio-icon-font-size;
396
- @extend %#{$check-component}-icon !optional;
397
- font-family: $global-icon-font-family;
398
- bottom:.4em;
399
- left:.4em;
400
- position: absolute;
395
+ input[type="radio"]:disabled + label {
396
+ @extend %#{$check-component}-disabled !optional;
397
+ background: none !important
398
+ }
399
+
400
+ input[type="radio"]:disabled:checked + label {
401
+ @extend %#{$check-component}-disabled !optional;
402
+ background: none !important;
401
403
  }
402
404
  }
403
405
 
404
- input[type="radio"]:disabled + label.ui-radio {
405
- @extend %#{$check-component}-disabled !optional;
406
- background: none !important
406
+ }
407
+
408
+ @mixin input-switch($switch-component:null, $switch-toggle-component: null){
409
+
410
+ @if $switch-component ==null{
411
+ $switch-component:css-switch;
407
412
  }
408
413
 
409
- input[type="radio"]:disabled:checked + label.ui-radio {
410
- @extend %#{$check-component}-disabled !optional;
411
- background: none !important;
414
+ @if $switch-toggle-component ==null{
415
+ $switch-toggle-component:css-switch-toggle;
412
416
  }
413
417
 
414
- //switch
415
418
  input[type="checkbox"].ui-switch + label.ui-switch {
416
419
  display: block;
417
420
  position: relative;
@@ -472,40 +475,82 @@ $z-index: 2) {
472
475
 
473
476
  }
474
477
 
475
- //number
478
+ }
479
+
480
+ @mixin input-number($number-component:null,$input-component:null,
481
+ $input-number-margin:null,
482
+ $input-number-input-padding:null,
483
+ $input-number-input-width:null,
484
+ $input-number-item-margin:null,
485
+ $input-number-item-size:null,
486
+ $input-number-icon-top:null,
487
+ $input-number-icon-left:null
488
+ ){
489
+
490
+ @if $number-component ==null{
491
+ $number-component:default;
492
+ }
493
+
494
+ @if $input-component ==null{
495
+ $input-component:css-input-number;
496
+ }
497
+
498
+ @if $input-number-margin == null{
499
+ $input-number-margin:0 .5em 0 .5em;
500
+ }
501
+
502
+ @if $input-number-input-padding==null{
503
+ $input-number-input-padding:.3rem .2rem 6px .2rem;
504
+ }
505
+
506
+ @if $input-number-input-width==null{
507
+ $input-number-input-padding:2.75em;
508
+ }
509
+
510
+ @if $input-number-item-margin==null{
511
+ $input-number-item-margin:0 .3em 0 0;
512
+ }
513
+
514
+
515
+ @if $input-number-item-size == null{
516
+ $input-number-item-size:2em;
517
+ }
518
+
519
+ @if $input-number-icon-top == null{
520
+ $input-number-icon-top:.3em;
521
+ }
522
+
523
+ @if $input-number-icon-left == null{
524
+ $input-number-icon-left:.38em;
525
+ }
526
+
476
527
  label {
477
528
  &.ui-number {
478
- display: inline-block;
479
- margin-right: 3px;
480
- padding: 0;
529
+ @include flexbox($justification:flex-start,$alignment:flex-end);
481
530
  input {
482
- border: 0;
483
- width: 40px;
484
- margin: 0;
485
- padding: .2rem .2rem 6px .2rem;
486
- color: $form-input-number-font-color;
531
+ width: $input-number-input-width;
532
+ margin: $input-number-margin;
533
+ padding: $input-number-input-padding;
487
534
  font-size: 1em;
488
- display: inline-block;
489
- background: transparent;
490
- &:focus {
491
- background: none !important;
492
- }
535
+ @extend %#{$input-component}-background !optional;
536
+ @extend %#{$input-component}-border !optional;
537
+ @extend %#{$input-component}-font !optional;
538
+ @extend %#{$input-component}-box-shadow !optional;
539
+ font-weight:normal;
540
+
493
541
  }
494
542
  ul,ui-input-number {
495
- display: inline-block;
496
543
  list-style: none;
497
- padding-bottom: 7px;
498
- vertical-align: middle;
499
- margin-left: -5px;
500
- & > li,&> input-item {
501
- float: left;
502
- margin-right: .5em;
503
- margin-left: 0px;
504
- border-radius: 5px;
544
+ margin:0;
545
+ font-weight:normal;
546
+ @include flexbox($justification:flex-start,$alignment:center);
547
+ & > li,&> input-plus,&>input-minus {
548
+ margin:$input-number-item-margin;
549
+ border-radius: $global-radius;
505
550
  @extend %#{$number-component}-background !optional;
506
551
  @extend %#{$number-component}-border !optional;
507
- height: 2em;
508
- width: 2em;
552
+ height: $input-number-item-size;
553
+ width: $input-number-item-size;
509
554
  position: relative;
510
555
  cursor: pointer;
511
556
  &:hover{
@@ -521,41 +566,84 @@ $z-index: 2) {
521
566
  @extend %#{$number-component}-border-active !optional;
522
567
  @extend %#{$number-component}-box-shadow-active !optional;
523
568
  }
524
- &.plus,&[plus] {
525
- &:before {
526
- font-family: $global-icon-font-family;
527
- position: absolute;
528
- top: .3em;
529
- left: .375em;
530
- font-size: 1em;
531
- content: '#{$global-icon-plus}';
532
- @extend %#{$number-component}-icon !optional;
533
- }
569
+ }
570
+ &>.input-plus,&>input-plus{
571
+ &:before {
572
+ font-family: $global-icon-font-family;
573
+ position: absolute;
574
+ top: $input-number-icon-top;
575
+ left: $input-number-icon-left;
576
+ font-size: 1em;
577
+ content: '#{$global-icon-plus}';
578
+ @extend %#{$number-component}-icon !optional;
534
579
  }
535
- &.minus,&[minus] {
536
- &:before {
537
- font-family: $global-icon-font-family;
538
- position: absolute;
539
- top: .3em;
540
- left:.375em;
541
- font-size: 1em;
542
- content: '#{$global-icon-minus}';
543
- @extend %#{$number-component}-icon !optional;
544
- }
580
+ }
581
+ &>.input-minus,&>input-minus{
582
+ &:before {
583
+ font-family: $global-icon-font-family;
584
+ position: absolute;
585
+ top: $input-number-icon-top;
586
+ left:$input-number-icon-left;
587
+ font-size: 1em;
588
+ content: '#{$global-icon-minus}';
589
+ @extend %#{$number-component}-icon !optional;
545
590
  }
546
591
  }
547
-
548
592
  }
549
593
  }
550
594
  }
595
+ }
596
+
597
+ @mixin form-input($check-component: css-checkbox, $switch-component: css-switch, $switch-toggle-component: css-switch-toggle,$number-component:default,$input-component:css-input-number,
598
+ $input-number-margin:0 .5em 0 .5em,
599
+ $input-number-input-padding:.3rem .2rem 6px .2rem,
600
+ $input-number-input-width:2.75em,
601
+ $input-number-item-margin:0 .3em 0 0,
602
+ $input-number-item-size:2em,
603
+ $input-number-icon-top:.3em,
604
+ $input-number-icon-left:.38em
605
+ ) {
606
+
607
+ @include input-addon();
608
+
609
+ @include input-checkbox($check-component:$check-component);
610
+
611
+ @include input-switch($switch-component:$switch-component,$switch-toggle-component:$switch-toggle-component);
612
+
613
+ @include input-number($number-component:$number-component,$input-component:$input-component,
614
+ $input-number-margin:$input-number-margin,
615
+ $input-number-input-padding:$input-number-input-padding,
616
+ $input-number-input-width:$input-number-input-width,
617
+ $input-number-item-margin:$input-number-item-margin,
618
+ $input-number-item-size:$input-number-item-size,
619
+ $input-number-icon-top:$input-number-icon-top,
620
+ $input-number-icon-left:$input-number-icon-left
621
+ );
622
+
551
623
 
552
624
  }
553
625
 
554
626
  /* Form Dropdown ----------------------------------------------------------------------------------------------- */
555
627
 
556
- @mixin ui-select($component: default) {
628
+ @mixin ui-select($primary-tag:null,$tags:null,$template-tag:null,$component-class:null,$class:null,
629
+ $component: default,
630
+ $icon:$global-icon-down,
631
+ $icon-font-size:1em,
632
+ $icon-top:.7em,
633
+ $icon-right:.6em,
634
+ $option-color:$black
635
+ ) {
636
+
637
+ $_component-class:'.ui-select';
638
+ $_primary-tag:ui-select;
639
+ @if $component-custom-tags==true and $component-class ==null{
640
+ $_component-class:null;
641
+ }
642
+ @if $primary-tag !=null{
643
+ $_primary-tag:$primary-tag;
644
+ }
557
645
 
558
- .ui-select,ui-select {
646
+ @include element-tag($primary-tag:$_primary-tag,$tags:$tags,$template-tag:$template-tag,$component-class:$_component-class,$class:$class){
559
647
  position: relative;
560
648
  @extend %#{$component}-background !optional;
561
649
  min-width: $form-dropdown-width;
@@ -583,37 +671,42 @@ $z-index: 2) {
583
671
  outline: none;
584
672
  font-weight: $form-dropdown-select-font-weight;
585
673
  option{
586
- color:$black;
674
+ color:$option-color;
587
675
  }
588
676
  }
589
677
  ::-ms-expand {
590
678
  display: none;
591
679
  }
592
680
  &:after {
593
- $font-size:1em;
594
- content: "#{$global-icon-down}";
681
+ $font-size:$icon-font-size;
682
+ content: "#{$icon}";
595
683
  @extend %#{$component}-icon !optional;
596
684
  font-family: $global-icon-font-family;
597
685
  font-size: $font-size;
598
686
  position: absolute;
599
- right: .6em;
600
- top: .7em;
687
+ right: $icon-right;
688
+ top: $icon-top;
601
689
  line-height: 1;
602
690
  pointer-events: none;
603
691
  }
604
692
  @content;
605
693
  }
606
694
 
695
+
696
+
697
+
698
+
607
699
  @-moz-document url-prefix() {
608
- .ui-select,ui-select {
609
- & > select {
700
+ @include element-tag($primary-tag:$_primary-tag,$tags:$tags,$template-tag:$template-tag,$component-class:$_component-class,$class:$class){
701
+ select {
610
702
  text-overflow: '';
611
703
  text-indent: .1rem;
612
704
  }
613
705
  }
614
706
  }
707
+
615
708
  @media #{$breakpoint-phone} {
616
- .ui-select,ui-select {
709
+ @include element-tag($primary-tag:$_primary-tag,$tags:$tags,$template-tag:$template-tag,$component-class:$_component-class,$class:$class){
617
710
  width: 90%;
618
711
  }
619
712
  }
@@ -633,12 +726,12 @@ $right: null) {
633
726
 
634
727
  position: relative;
635
728
  display:block;
636
- input {
729
+ @include __input() {
637
730
  @extend %#{$component}-background !optional;
638
731
  @extend %#{$component}-border !optional;
639
732
  @extend %#{$component}-font !optional;
640
733
  @extend %#{$component}-placeholder !optional;
641
- @include border-radius($border-radius);
734
+ border-radius:$border-radius !important;
642
735
  padding-right: $padding-right;
643
736
 
644
737
  &:focus {
@@ -655,7 +748,7 @@ $right: null) {
655
748
  top: icon-position($form-input-padding, $font-size);
656
749
  line-height: component-line-height($font-size, 1);
657
750
  z-index: 99;
658
-
751
+ pointer-events: none;
659
752
  }
660
753
  }
661
754
 
@@ -663,11 +756,17 @@ $right: null) {
663
756
 
664
757
  @mixin _form-search-input($component: null, $touch-component:null,
665
758
  $border-radius: null,
759
+ $search-icon:null,
666
760
  $placeholder-color: null,
761
+ $font-size:null,
667
762
  $touch-border-radius: null,
668
763
  $touch-placeholder-color: null) {
669
764
 
765
+
670
766
  $icon:$global-icon-search;
767
+ @if $search-icon != null{
768
+ $icon:$search-icon;
769
+ }
671
770
  display:block;
672
771
  @media #{$breakpoint-desktop}{
673
772
  @if $border-radius == null{
@@ -675,7 +774,6 @@ $touch-placeholder-color: null) {
675
774
  }
676
775
  $padding-right: 3em;
677
776
  $right: .3em;
678
- $font-size: 1.5em;
679
777
  width:100%;
680
778
  @include _form-input-icon($component, $font-size, $border-radius,$icon, $placeholder-color, $padding-right, $right);
681
779
  }
@@ -695,18 +793,20 @@ $touch-placeholder-color: null) {
695
793
  /* public */
696
794
  @mixin ui-search($class: null, $component: null, $touch-component: null,
697
795
  $border-radius: null,
796
+ $search-icon:null,
698
797
  $placeholder-color: $gray,
699
798
  $touch-border-radius: null,
700
- $touch-placeholder-color: $gray) {
799
+ $touch-placeholder-color: $gray,
800
+ $font-size:1.5em) {
701
801
 
702
802
  .ui-search,ui-search {
703
803
  @if $class !=null {
704
804
  &.#{$class} {
705
- @include _form-search-input($component, $touch-component, $border-radius, $placeholder-color, $touch-border-radius, $touch-placeholder-color);
805
+ @include _form-search-input($component, $touch-component, $border-radius,$search-icon, $placeholder-color,$font-size,$touch-border-radius, $touch-placeholder-color);
706
806
  @content;
707
807
  }
708
808
  } @else {
709
- @include _form-search-input($component, $touch-component, $border-radius, $placeholder-color, $touch-border-radius, $touch-placeholder-color);
809
+ @include _form-search-input($component, $touch-component, $border-radius, $search-icon,$placeholder-color, $font-size,$touch-border-radius, $touch-placeholder-color);
710
810
  @content;
711
811
  }
712
812
  }