uniform-ui 2.4.1 → 3.0.0.beta8

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 (70) hide show
  1. checksums.yaml +4 -4
  2. data/lib/assets/javascripts/uniform.js +13 -13
  3. data/lib/assets/javascripts/uniform/checkbox.js +59 -16
  4. data/lib/assets/javascripts/uniform/component.js +27 -4
  5. data/lib/assets/javascripts/uniform/dropdown.js +78 -209
  6. data/lib/assets/javascripts/uniform/floating-label-input.js +65 -0
  7. data/lib/assets/javascripts/uniform/icons.js +12 -3
  8. data/lib/assets/javascripts/uniform/modal.js +29 -30
  9. data/lib/assets/javascripts/uniform/popover.js +26 -24
  10. data/lib/assets/javascripts/uniform/resizer.js +26 -30
  11. data/lib/assets/javascripts/uniform/select.js +188 -222
  12. data/lib/assets/javascripts/uniform/tooltip.js +11 -11
  13. data/lib/assets/stylesheets/uniform.scss +3 -7
  14. data/lib/assets/stylesheets/uniform/base.scss +20 -1
  15. data/lib/assets/stylesheets/uniform/components/buttons.scss +171 -184
  16. data/lib/assets/stylesheets/uniform/components/checkbox.scss +104 -0
  17. data/lib/assets/stylesheets/uniform/components/container.scss +3 -2
  18. data/lib/assets/stylesheets/uniform/components/dropdown.scss +8 -5
  19. data/lib/assets/stylesheets/uniform/components/floating-label-input.scss +29 -0
  20. data/lib/assets/stylesheets/uniform/components/input-group.scss +39 -0
  21. data/lib/assets/stylesheets/uniform/components/label.scss +21 -16
  22. data/lib/assets/stylesheets/uniform/components/loaders.scss +28 -54
  23. data/lib/assets/stylesheets/uniform/components/modal.scss +21 -36
  24. data/lib/assets/stylesheets/uniform/components/nav.scss +50 -87
  25. data/lib/assets/stylesheets/uniform/components/pointer.scss +83 -0
  26. data/lib/assets/stylesheets/uniform/components/select.scss +97 -107
  27. data/lib/assets/stylesheets/uniform/components/table.scss +31 -138
  28. data/lib/assets/stylesheets/uniform/components/thumb.scss +40 -25
  29. data/lib/assets/stylesheets/uniform/components/z-input.scss +26 -0
  30. data/lib/assets/stylesheets/uniform/defaults.scss +31 -10
  31. data/lib/assets/stylesheets/uniform/functions.scss +32 -7
  32. data/lib/assets/stylesheets/uniform/mixins.scss +110 -57
  33. data/lib/assets/stylesheets/uniform/utilities.scss +55 -0
  34. data/lib/assets/stylesheets/uniform/utilities/background.scss +9 -0
  35. data/lib/assets/stylesheets/uniform/utilities/borders.scss +84 -0
  36. data/lib/assets/stylesheets/uniform/utilities/effects.scss +172 -0
  37. data/lib/assets/stylesheets/uniform/utilities/layout.scss +181 -0
  38. data/lib/assets/stylesheets/uniform/utilities/position.scss +42 -0
  39. data/lib/assets/stylesheets/uniform/utilities/sizing.scss +60 -0
  40. data/lib/assets/stylesheets/uniform/utilities/spacing.scss +68 -0
  41. data/lib/assets/stylesheets/uniform/utilities/svg.scss +5 -0
  42. data/lib/assets/stylesheets/uniform/utilities/text.scss +158 -0
  43. data/lib/assets/stylesheets/uniform/variables.scss +113 -42
  44. data/lib/uniform/version.rb +1 -1
  45. metadata +22 -45
  46. data/lib/assets/javascripts/uniform.jquery.js +0 -152
  47. data/lib/assets/javascripts/uniform/dom-helpers.js +0 -158
  48. data/lib/assets/javascripts/uniform/floating-label.js +0 -54
  49. data/lib/assets/stylesheets/uniform-print.scss +0 -1
  50. data/lib/assets/stylesheets/uniform/components.scss +0 -11
  51. data/lib/assets/stylesheets/uniform/components/alert.scss +0 -72
  52. data/lib/assets/stylesheets/uniform/components/card.scss +0 -93
  53. data/lib/assets/stylesheets/uniform/components/form.scss +0 -149
  54. data/lib/assets/stylesheets/uniform/components/form/checkbox-collection.scss +0 -103
  55. data/lib/assets/stylesheets/uniform/components/form/checkbox.scss +0 -58
  56. data/lib/assets/stylesheets/uniform/components/form/floating-label.scss +0 -65
  57. data/lib/assets/stylesheets/uniform/components/form/input-group.scss +0 -56
  58. data/lib/assets/stylesheets/uniform/components/form/tristate.scss +0 -88
  59. data/lib/assets/stylesheets/uniform/components/grid.scss +0 -179
  60. data/lib/assets/stylesheets/uniform/components/row.scss +0 -67
  61. data/lib/assets/stylesheets/uniform/components/tooltip.scss +0 -41
  62. data/lib/assets/stylesheets/uniform/helpers.scss +0 -133
  63. data/lib/assets/stylesheets/uniform/helpers/border.scss +0 -28
  64. data/lib/assets/stylesheets/uniform/helpers/colors.scss +0 -24
  65. data/lib/assets/stylesheets/uniform/helpers/margin.scss +0 -27
  66. data/lib/assets/stylesheets/uniform/helpers/padding.scss +0 -9
  67. data/lib/assets/stylesheets/uniform/helpers/position.scss +0 -20
  68. data/lib/assets/stylesheets/uniform/helpers/sizes.scss +0 -38
  69. data/lib/assets/stylesheets/uniform/helpers/text.scss +0 -152
  70. data/lib/assets/stylesheets/uniform/print/grid.scss +0 -50
@@ -1,161 +1,54 @@
1
- @include size-rules('.table'){
2
- display:table;
3
- width:100%;
4
- & > *,
5
- .row > *{
6
- display:table-cell;
7
- float:none;
8
- &.-top{
9
- vertical-align:top;
10
- }
11
- &.-middle > *{
12
- vertical-align:middle;
13
- }
14
- }
15
- .row{
16
- display:table-row;
17
- }
18
- }
19
- .cell-top{
20
- vertical-align: top;
21
- td, th{
22
- vertical-align: top;
23
- }
24
- }
25
-
26
- .cell-middle{
27
- vertical-align: middle;
28
- td, th{
29
- vertical-align: middle;
30
- }
31
- }
1
+ @include responsive-rule('.layout-fixed'){ table-layout: fixed;}
32
2
 
33
3
  .uniformTable{
34
4
  width:100%;
35
- .row > *,
36
- tr td,
5
+
6
+ td,
37
7
  th {
38
8
  padding: 0.5em;
39
- border-bottom: 1px solid color('gray-light');
40
9
  }
41
10
 
42
- &.tight{
43
- .row > *,
44
- tr td,
45
- th {
46
- padding: 0.2em 0.5em;
11
+ tr + tr {
12
+ td,
13
+ th{
14
+ border-top-width: 1px;
47
15
  }
48
16
  }
49
17
 
50
- &.tight-more{
51
- .row > *,
52
- tr td,
53
- th {
54
- padding: 0 0.5em;
18
+ &.-snug{
19
+ td,
20
+ th,
21
+ .table-cell {
22
+ padding: 0.2em 0.5em;
55
23
  }
56
24
  }
57
25
 
58
- &.no-pad{
59
- .row > *,
60
- tr td,
61
- th {
62
- padding-left: 0;
63
- padding-right: 0;
26
+ &.-tight{
27
+ td,
28
+ th,
29
+ .table-cell {
30
+ padding: 0 0.5em;
64
31
  }
65
32
  }
66
33
 
67
- .head > *,
68
- thead th{
69
- color: color('gray-dark');
70
- border-bottom: 1px solid color('gray');
71
- }
72
-
73
- .head.dark > *,
74
- thead.dark th{
75
- background: lighten(color('background'), 2);
76
- }
77
-
78
- tr.middle > td,
79
- td.middle,
80
- &.middle > *,
81
- .middle{
82
- vertical-align:middle;
83
- }
84
-
85
- tr.bottom > td,
86
- td.bottom,
87
- &.bottom > *,
88
- .bottom{
89
- vertical-align:bottom;
90
- }
91
-
92
- tr.top > td,
93
- td.top,
94
- &.top > *,
95
- .top{
96
- vertical-align:top;
97
- }
98
-
99
- &.hover{
100
- tr:hover td{
101
- background: lighten(color('blue'), 50);
34
+ &.-striped{
35
+ tr:nth-child(2n+1){
36
+ background-color: transparent;
102
37
  }
103
38
  }
104
39
 
105
- .row:last-of-type,
106
- tr:last-of-type{
107
- td, th{
108
- border-bottom: none;
109
- }
110
- }
111
- &.invert{
112
- .row > *,
113
- td, th{
114
- border-bottom-color: color('gray-dark');
115
- }
116
- }
117
- }
118
-
119
- .uniformTableDotLeaders{
120
- line-height: 1;
121
- table-layout: fixed;
122
- & > * > td,
123
- & > * > * > td,
124
- & > * > th,
125
- & > * > * > th{
126
- padding-top:0.3em;
127
- padding-bottom: 0.3em;
128
- vertical-align:bottom;
129
- }
130
-
131
- & > * > td,
132
- & > * > * > td{
133
- padding-left:0.5em;
134
- }
135
-
136
- & > * > th,
137
- & > * > * > th{
138
- background: icon-circle(6, 8, 1, color('gray'));
139
- background-repeat: repeat-x;
140
- background-position: left bottom;
141
- span{
142
- background-color: white;
143
- padding-right: 0.5em;
144
- position: relative;
145
- }
146
- }
147
- & > thead{
148
- & > * > th{
149
- background:none;
40
+ //----------------------------------------------------------------
41
+ // Head
42
+ //----------------------------------------------------------------
43
+ thead{
44
+ tr:last-child{
45
+ border-bottom-width: 1px;
150
46
  }
151
47
  }
152
- &.bg-background{
153
- & > * > th,
154
- & > * > * > th{
155
- background-image:radial-gradient(black 1px, color('background') 0px);
156
- span{
157
- background-color: color('background');
158
- }
159
- }
48
+
49
+ th{
50
+ font-weight: bold;
51
+ text-transform: uppercase;
52
+ font-size: 0.8em;
160
53
  }
161
54
  }
@@ -1,41 +1,56 @@
1
1
  .uniformThumb{
2
2
  display:inline-block;
3
- background: color('gray-darker');
3
+ background: color('gray-80');
4
4
  position:relative;
5
5
  color: white;
6
- img{
6
+ text-align:center;
7
+ & > * {
8
+ display: block;
7
9
  position:absolute;
8
- top:0;
9
- left: 0;
10
10
  width: 100%;
11
+ position:absolute;
12
+ top:50%;
13
+ transform: translateY(-50%);
14
+ }
15
+ & > img {
11
16
  height: 100%;
12
17
  object-fit: cover;
13
18
  }
14
- .text{
15
- display:block;
16
- @include position-v-center;
17
- left: 0;
18
- width: 100%;
19
- text-align:center;
19
+ &.-contain {
20
+ & > img {
21
+ object-fit: contain;
22
+ }
20
23
  }
21
24
  }
22
- @include size-rules(".aspect-4x3"){
23
- padding-top: 75%;
25
+ @include responsive-rule(".aspect-4x3"){
26
+ &::before{
27
+ content: "";
28
+ display: block;
29
+ padding-top: 75%;
30
+ padding-left: 75%;
31
+ }
24
32
  }
25
- @include size-rules(".aspect-2x1"){
26
- padding-top: 50%;
33
+ @include responsive-rule(".aspect-2x1"){
34
+ &::before{
35
+ content: "";
36
+ display: block;
37
+ padding-top: 50%;
38
+ padding-left: 50%;
39
+ }
27
40
  }
28
- @include size-rules(".aspect-square"){
29
- padding-top:100%;
41
+ @include responsive-rule(".aspect-16x9"){
42
+ &::before{
43
+ content: "";
44
+ display: block;
45
+ padding-top: 56.25%;
46
+ padding-left: 56.25%;
47
+ }
30
48
  }
31
-
32
- @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
33
- .uniformThumb {
34
- overflow: hidden;
35
- img {
36
- @include position-center;
37
- width: auto;
38
- height: 100%;
39
- }
49
+ @include responsive-rule(".aspect-square"){
50
+ &::before{
51
+ content: "";
52
+ display: block;
53
+ padding-top:100%;
54
+ padding-left:100%;
40
55
  }
41
56
  }
@@ -0,0 +1,26 @@
1
+ //----------------------------------------------------------------
2
+ // filename is prepended with "z" so that it is imported after
3
+ // uniformSelect so that it modifies uniformSelect
4
+ //----------------------------------------------------------------
5
+
6
+ .uniformInput{
7
+ border-width: 1px;
8
+ padding: 0.5em;
9
+ outline: none;
10
+ appearance: none;
11
+ transition: box-shadow 100ms ease-in;
12
+ &:focus,
13
+ &[focus]{
14
+ border-color: rgba(var(--focus-color), 1);
15
+ box-shadow: 0 0 0 2px rgba(var(--focus-color), 1);
16
+ }
17
+ }
18
+
19
+ select.uniformInput {
20
+ padding-right: 1em;
21
+ background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>') no-repeat center right;
22
+ }
23
+
24
+ @include color-rule('.focus') using ($color) {
25
+ --focus-color: #{red($color)}, #{green($color)}, #{blue($color)};
26
+ }
@@ -1,3 +1,7 @@
1
+ html, body{
2
+ margin: 0;
3
+ padding: 0;
4
+ }
1
5
  html{
2
6
  font-size: 14px;
3
7
  }
@@ -10,10 +14,7 @@ body{
10
14
  a{
11
15
  color: color('blue');
12
16
  &:hover{
13
- color: color('blue-dark');
14
- }
15
- &:visited{
16
- color: #6738e4;
17
+ color: color('blue-60');
17
18
  }
18
19
  }
19
20
  h1,
@@ -28,15 +29,14 @@ ol,
28
29
  dl,
29
30
  pre{
30
31
  margin: 0;
31
- margin-bottom: 1em; // might want to do rem
32
- &:last-child{
33
- margin-bottom: 0;
34
- }
35
32
  }
36
33
 
37
34
  ul,
38
35
  ol,
39
36
  dl{
37
+ list-style: none;
38
+ margin: 0;
39
+ padding: 0;
40
40
  ul,
41
41
  ol,
42
42
  dl{
@@ -75,8 +75,14 @@ input,
75
75
  select,
76
76
  textarea,
77
77
  button{
78
+ border-width: 1px;
78
79
  margin: 0;
79
80
  line-height: inherit;
81
+ font: inherit;
82
+ text-align: inherit;
83
+ text-transform: inherit;
84
+ letter-spacing: inherit;
85
+ line-height: inherit;
80
86
  }
81
87
 
82
88
  [hidden] {
@@ -87,8 +93,23 @@ time{
87
93
  @include text-overflow;
88
94
  }
89
95
 
96
+ a,
90
97
  button{
91
- font-family: $system-font;
92
- color: color('gray-darkest');
93
98
  cursor: pointer;
99
+ }
100
+ button{
101
+ font-family: $base-font;
102
+ font-size: 1rem;
103
+ }
104
+
105
+ img,
106
+ svg,
107
+ video,
108
+ canvas,
109
+ audio,
110
+ iframe,
111
+ embed,
112
+ object {
113
+ display: block;
114
+ vertical-align: middle;
94
115
  }
@@ -1,3 +1,34 @@
1
+ @function toRGB($color){
2
+ @return red($color), green($color), blue($color);
3
+ }
4
+ @function color($key) {
5
+ @return map-get($color_spectrum, $key);
6
+ }
7
+ @function size($key) {
8
+ @return map-get($sizes, $key);
9
+ }
10
+
11
+ @function mapToString($map) {
12
+ $string: '"';
13
+
14
+ @each $key, $value in $map {
15
+ $string: str-insert($string, $key, -1);
16
+ $string: str-insert($string, "/", -1);
17
+ $string: str-insert($string, $value, -1);
18
+ $string: str-insert($string, ",", -1);
19
+ }
20
+ $string: str-slice($string, 1, -2);
21
+ $string: str-insert($string, '"', -1);
22
+
23
+ @return $string;
24
+ }
25
+
26
+ //----------------------------------------------------------------
27
+ // Icons
28
+ //----------------------------------------------------------------
29
+
30
+
31
+
1
32
  /// Replace `$search` with `$replace` in `$string`
2
33
  /// @author Hugo Giraudel
3
34
  /// @param {String} $string - Initial string
@@ -38,8 +69,6 @@
38
69
  @return url("data:image/svg+xml;charset=utf8,#{uri-encode($svg)}");
39
70
  }
40
71
 
41
-
42
-
43
72
  @function icon-check($color: #000000){
44
73
  @return svg-encode('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32"><path d="M28.998 8.531l-2.134-2.134c-0.394-0.393-1.030-0.393-1.423 0l-12.795 12.795-6.086-6.13c-0.393-0.393-1.029-0.393-1.423 0l-2.134 2.134c-0.393 0.394-0.393 1.030 0 1.423l8.924 8.984c0.393 0.393 1.030 0.393 1.423 0l15.648-15.649c0.393-0.392 0.393-1.030 0-1.423z" fill="#{$color}"></path></svg>');
45
74
  }
@@ -52,10 +81,6 @@
52
81
  @return svg-encode('<svg version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="#{$width}px" height="#{$height}px" viewBox="0 0 #{$width} #{$height}" enable-background="new 0 0 #{$width} #{$height}" xml:space="preserve"><circle cx="#{$width / 2}" cy="#{$height / 2}" r="#{$radius}" fill="#{$color}"/></svg>');
53
82
  }
54
83
 
55
- @function color($key) {
56
- @return map-get($colors, $key);
57
- }
58
-
59
84
  @function icon-x-block($size: 32, $color: #000000){
60
85
  @return svg-encode('<svg width="#{$size}px" height="#{$size}px" fill="#{$color}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 10.5 10.5" style="enable-background:new 0 0 10.5 10.5;" xml:space="preserve"><path d="M8.1,1.3C8.4,1,8.9,1,9.2,1.3c0,0,0,0,0,0c0.3,0.3,0.3,0.8,0,1.1L2.4,9.3c-0.3,0.3-0.8,0.3-1.1,0S1,8.4,1.3,8.1L8.1,1.3z"/><path d="M9.2,8.1c0.3,0.3,0.4,0.8,0.1,1.1c0,0,0,0,0,0l0,0c-0.3,0.3-0.8,0.3-1.1,0L1.3,2.4C1,2.1,0.9,1.6,1.3,1.3c0,0,0,0,0,0l0,0 C1.6,1,2.1,1,2.4,1.3L9.2,8.1z"/></svg>');
61
- }
86
+ }
@@ -1,3 +1,4 @@
1
+ @import 'uniform/variables';
1
2
 
2
3
  @mixin text-overflow($inherit:false){
3
4
  @if $inherit {
@@ -23,94 +24,146 @@
23
24
  }
24
25
  }
25
26
 
26
- //----------------------------------------------------------------
27
- // Position
28
- //----------------------------------------------------------------
29
- @mixin position-v-center(){
30
- position:absolute;
31
- top:50%;
32
- transform: translateY(-50%);
33
- }
34
- @mixin position-h-center(){
35
- position:absolute;
36
- left:50%;
37
- transform: translateX(-50%);
38
- }
39
- @mixin position-center(){
40
- position:absolute;
41
- left:50%;
42
- top:50%;
43
- transform: translate(-50%, -50%);
44
- }
45
- @mixin position-fill() {
46
- position: absolute;
47
- top: 0;
48
- bottom: 0;
49
- left: 0;
50
- right: 0;
51
- }
52
-
53
27
 
54
28
  //----------------------------------------------------------------
55
- // Sizes Media Queries
29
+ // Responsive
56
30
  //----------------------------------------------------------------
31
+
57
32
  @mixin media($query) {
58
33
  @media only screen and (#{$query}){
59
34
  @content;
60
35
  }
61
36
  }
62
37
 
63
- @mixin size-rule($breakpoint) {
64
- @include media(map-get($breakpoints, $breakpoint)){
65
- @content
66
- }
67
- .#{$breakpoint}-size{
68
- @content
38
+ @mixin breakpoint($breakpoint){
39
+ @media only screen and (map-get($breakpoints, $breakpoint)){
40
+ @content;
69
41
  }
70
42
  }
71
43
 
72
- @mixin size-rules($selector){
73
- #{$selector}{
44
+ @mixin responsive-rule($selector) {
45
+ @if str-index($selector, '.') == 1 {
46
+ $selector: str-slice($selector, 2, -1);
47
+ }
48
+
49
+ .#{$selector}{
74
50
  @content
75
51
  }
76
- @each $key, $value in $breakpoints {
77
- @include media($value){
78
- #{$selector}-#{$key}{
52
+ @if $include_child_utilities {
53
+ @include child-rule($selector) {
54
+ @content
55
+ }
56
+ }
57
+
58
+ @each $breakpoint, $breakpoint_query in $breakpoints {
59
+ @include media($breakpoint_query){
60
+ .#{$breakpoint}\:#{$selector}{
79
61
  @content
80
62
  }
81
63
  }
82
- .#{$key}-size #{$selector}-#{$key}{
64
+ @if $include_breakpoint_container {
65
+ .#{$breakpoint}-container{
66
+ .#{$breakpoint}\:#{$selector}{
67
+ @content
68
+ }
69
+ }
70
+ }
71
+ }
72
+ }
73
+
74
+ @mixin child-rule ($selector) {
75
+ .#{$selector}-\>{
76
+ & > * {
83
77
  @content
84
78
  }
85
79
  }
86
80
  }
87
81
 
88
- @mixin sizes($selector, $attributes){
89
- @each $attribute in $attributes {
90
- @include size-rules("#{$selector}"){
91
- #{$attribute}: map-get($sizes, 'base');
82
+ //----------------------------------------------------------------
83
+ // Color
84
+ //----------------------------------------------------------------
85
+ @mixin color-rule($selector) {
86
+ @if str-index($selector, '.') == 1 {
87
+ $selector: str-slice($selector, 2, -1);
88
+ }
89
+
90
+ @each $name, $value in $color_spectrum {
91
+ .#{$selector}-#{$name}{
92
+ @content($value)
92
93
  }
93
- @each $key, $value in $sizes {
94
- @include size-rules("#{$selector}-#{$key}"){
95
- #{$attribute}: $value;
96
- @content
94
+
95
+ @include pseudo-class-rule("#{$selector}-#{$name}", false){
96
+ @content($value)
97
+ }
98
+
99
+ @if $include_child_utilities {
100
+ @include child-rule($selector) {
101
+ @content($value)
97
102
  }
98
103
  }
99
- @include size-rules("#{$selector}-none"){
100
- #{$attribute}: 0 !important;
101
- @content
104
+ }
105
+ }
106
+
107
+
108
+ //----------------------------------------------------------------
109
+ // Size
110
+ //----------------------------------------------------------------
111
+
112
+ @mixin size-rule($selector){
113
+ @if str-index($selector, '.') == 1 {
114
+ $selector: str-slice($selector, 2, -1);
115
+ }
116
+
117
+ $key: $selector;
118
+ @if str-index($key, '-') {
119
+ $key: str-slice($key, 1, str-index($key, '-') - 1);
120
+ }
121
+
122
+ @each $size, $value in map-get($sizes, $key) {
123
+ $class: "#{$selector}-#{$size}";
124
+ @if $size == '' {
125
+ $class: $selector;
126
+ }
127
+ @include responsive-rule($class){
128
+ @content($value)
102
129
  }
103
130
  }
104
131
  }
105
132
 
106
- @mixin colors($selector, $attributes){
107
- @each $attribute in $attributes {
108
- @each $key, $value in $colors {
109
- @include size-rules("#{$selector}-#{$key}"){
110
- #{$attribute}: $value;
133
+ //----------------------------------------------------------------
134
+ // Pseudo Classes
135
+ //----------------------------------------------------------------
136
+
137
+ @mixin pseudo-class-rule($selector, $declare_self: true){
138
+ @if str-index($selector, '.') == 1 {
139
+ $selector: str-slice($selector, 2, -1);
140
+ }
141
+ @if $declare_self {
142
+ .#{$selector} {
143
+ @content
144
+ }
145
+ }
146
+
147
+ @each $pseudo-selector, $pseudo-class in (
148
+ active: active,
149
+ focus: focus,
150
+ hover: hover,
151
+ checked: checked,
152
+ focus-within: focus-within,
153
+ first: first-child,
154
+ last: last-child
155
+ ) {
156
+ @if index($include_pseudo_utilities, $pseudo-class) {
157
+ .#{$pseudo-selector}\:#{$selector}:#{$pseudo-class} {
158
+ @content
159
+ }
160
+ }
161
+ }
162
+ @if index($include_pseudo_utilities, group-hover) {
163
+ .group:hover{
164
+ .group-hover\:#{$selector} {
111
165
  @content
112
166
  }
113
167
  }
114
168
  }
115
169
  }
116
-