uniform-ui 2.4.1 → 3.0.0.beta8

Sign up to get free protection for your applications and to get access to all the features.
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
-