@snack-uikit/card 0.12.13 → 0.12.14-preview-d3c8ef06.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 (3) hide show
  1. package/dist/components/Card/styles.module.css +35 -35
  2. package/package.json +2 -2
  3. package/src/components/Card/styles.module.scss +46 -44
package/dist/components/Card/styles.module.css CHANGED
@@ -65,47 +65,18 @@
65
65
  .card:focus-within .functionBadgeWrapper{
66
66
  display:block;
67
67
  }
68
- .card[data-disabled]{
69
- outline-width:var(--border-state-focus-s-border-width, 2px);
70
- outline-style:var(--border-state-focus-s-border-style, solid);
71
- outline-color:var(--border-state-focus-s-border-color, );
72
- cursor:not-allowed;
73
- background-color:var(--sys-neutral-background, #f1f2f6);
74
- outline-color:var(--sys-neutral-decor-default, #dfe2ec);
75
- outline-width:var(--border-width-card-container, 1px);
76
- }
77
- .card[data-disabled] .check{
78
- color:var(--sys-neutral-on-accent, #ffffff);
79
- background-color:var(--sys-neutral-text-disabled, #b3b6bf);
80
- }
81
- .card[data-disabled] *{
82
- cursor:not-allowed;
83
- }
84
- .card[data-pointer] *{
85
- cursor:pointer;
86
- }
87
- .card[data-pointer][data-outline]:hover{
88
- outline-color:var(--sys-neutral-decor-hovered, #cfd2dc);
89
- box-shadow:none;
90
- }
91
- .card[data-pointer][data-outline]:focus-visible{
92
- outline-width:var(--border-state-focus-l-border-width, 4px);
93
- outline-style:var(--border-state-focus-l-border-style, solid);
94
- outline-color:var(--border-state-focus-l-border-color, );
95
- outline-color:var(--sys-primary-accent-default, #794ed3);
96
- }
97
- .card[data-pointer][data-checked]{
68
+ .card[data-checked]{
98
69
  outline-width:var(--border-state-focus-s-border-width, 2px);
99
70
  outline-style:var(--border-state-focus-s-border-style, solid);
100
71
  outline-color:var(--border-state-focus-s-border-color, );
101
72
  outline-color:var(--sys-primary-decor-activated, #c5b2f1);
102
73
  outline-width:var(--border-width-card-container, 1px);
103
74
  }
104
- .card[data-pointer][data-checked]:hover{
75
+ .card[data-checked]:hover{
105
76
  outline-color:var(--sys-primary-decor-hovered, #decdfb);
106
77
  box-shadow:none;
107
78
  }
108
- .card[data-pointer][data-checked] .contentWrapper::before{
79
+ .card[data-checked] .contentWrapper::before{
109
80
  content:"";
110
81
  position:absolute;
111
82
  top:0;
@@ -115,20 +86,49 @@
115
86
  opacity:var(--opacity-a008, 0.08);
116
87
  background-color:var(--sys-primary-accent-default, #794ed3);
117
88
  }
118
- .card[data-pointer][data-checked] .check{
89
+ .card[data-checked] .check{
119
90
  color:var(--sys-primary-on-accent, #fdfbff);
120
91
  background-color:var(--sys-primary-accent-default, #794ed3);
121
92
  }
122
- .card[data-pointer][data-checked]:focus-visible{
93
+ .card[data-checked]:focus-visible{
123
94
  outline-width:var(--border-state-focus-l-border-width, 4px);
124
95
  outline-style:var(--border-state-focus-l-border-style, solid);
125
96
  outline-color:var(--border-state-focus-l-border-color, );
126
97
  outline-color:var(--sys-primary-accent-default, #794ed3);
127
98
  }
128
- .card[data-pointer][data-checked]:focus-visible .check{
99
+ .card[data-checked]:focus-visible .check{
129
100
  color:var(--sys-primary-on-accent, #fdfbff);
130
101
  background-color:var(--sys-primary-accent-default, #794ed3);
131
102
  }
103
+ .card[data-disabled]{
104
+ outline-width:var(--border-state-focus-s-border-width, 2px);
105
+ outline-style:var(--border-state-focus-s-border-style, solid);
106
+ outline-color:var(--border-state-focus-s-border-color, );
107
+ cursor:not-allowed;
108
+ background-color:var(--sys-neutral-background, #f1f2f6);
109
+ outline-color:var(--sys-neutral-decor-default, #dfe2ec);
110
+ outline-width:var(--border-width-card-container, 1px);
111
+ }
112
+ .card[data-disabled][data-checked] .check{
113
+ color:var(--sys-neutral-on-accent, #ffffff);
114
+ background-color:var(--sys-neutral-text-disabled, #b3b6bf);
115
+ }
116
+ .card[data-disabled] *{
117
+ cursor:not-allowed;
118
+ }
119
+ .card[data-pointer] *{
120
+ cursor:pointer;
121
+ }
122
+ .card[data-pointer][data-outline]:hover{
123
+ outline-color:var(--sys-neutral-decor-hovered, #cfd2dc);
124
+ box-shadow:none;
125
+ }
126
+ .card[data-pointer][data-outline]:focus-visible{
127
+ outline-width:var(--border-state-focus-l-border-width, 4px);
128
+ outline-style:var(--border-state-focus-l-border-style, solid);
129
+ outline-color:var(--border-state-focus-l-border-color, );
130
+ outline-color:var(--sys-primary-accent-default, #794ed3);
131
+ }
132
132
  .card[data-pointer]:hover{
133
133
  box-shadow:var(--box-shadow-elevation-level2, 0px 0px 4px 0px rgba(0, 0, 0, 0.0392156863), 0px 4px 8px 0px rgba(0, 0, 0, 0.0392156863));
134
134
  }
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Card",
7
- "version": "0.12.13",
7
+ "version": "0.12.14-preview-d3c8ef06.0",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -43,5 +43,5 @@
43
43
  "@snack-uikit/utils": "3.3.0",
44
44
  "classnames": "2.3.2"
45
45
  },
46
- "gitHead": "d36fe553ce72b92deafee581e70090458827f8ac"
46
+ "gitHead": "93ec1b7cbdd9a002297609c6e4ef3c96ca7178d7"
47
47
  }
package/src/components/Card/styles.module.scss CHANGED
@@ -87,6 +87,47 @@ $sizes: 's', 'm', 'l';
87
87
  }
88
88
  }
89
89
 
90
+ &[data-checked] {
91
+ @include outline-var($container-focused-s);
92
+
93
+ outline-color: $sys-primary-decor-activated;
94
+ outline-width: $border-width-card-container;
95
+
96
+ &:hover {
97
+ outline-color: $sys-primary-decor-hovered;
98
+ box-shadow: none;
99
+ }
100
+
101
+ .contentWrapper::before {
102
+ content: '';
103
+
104
+ position: absolute;
105
+ top: 0;
106
+ right: 0;
107
+ bottom: 0;
108
+ left: 0;
109
+
110
+ opacity: $opacity-a008;
111
+ background-color: $sys-primary-accent-default;
112
+ }
113
+
114
+ .check {
115
+ color: $sys-primary-on-accent;
116
+ background-color: $sys-primary-accent-default;
117
+ }
118
+ }
119
+
120
+ &[data-checked]:focus-visible {
121
+ @include outline-var($container-focused-l);
122
+
123
+ outline-color: $sys-primary-accent-default;
124
+
125
+ .check {
126
+ color: $sys-primary-on-accent;
127
+ background-color: $sys-primary-accent-default;
128
+ }
129
+ }
130
+
90
131
  &[data-disabled] {
91
132
  @include outline-var($container-focused-s);
92
133
 
@@ -95,9 +136,11 @@ $sizes: 's', 'm', 'l';
95
136
  outline-color: $sys-neutral-decor-default;
96
137
  outline-width: $border-width-card-container;
97
138
 
98
- .check {
99
- color: $sys-neutral-on-accent;
100
- background-color: $sys-neutral-text-disabled;
139
+ &[data-checked] {
140
+ .check {
141
+ color: $sys-neutral-on-accent;
142
+ background-color: $sys-neutral-text-disabled;
143
+ }
101
144
  }
102
145
 
103
146
  * {
@@ -123,47 +166,6 @@ $sizes: 's', 'm', 'l';
123
166
  }
124
167
  }
125
168
 
126
- &[data-checked] {
127
- @include outline-var($container-focused-s);
128
-
129
- outline-color: $sys-primary-decor-activated;
130
- outline-width: $border-width-card-container;
131
-
132
- &:hover {
133
- outline-color: $sys-primary-decor-hovered;
134
- box-shadow: none;
135
- }
136
-
137
- .contentWrapper::before {
138
- content: '';
139
-
140
- position: absolute;
141
- top: 0;
142
- right: 0;
143
- bottom: 0;
144
- left: 0;
145
-
146
- opacity: $opacity-a008;
147
- background-color: $sys-primary-accent-default;
148
- }
149
-
150
- .check {
151
- color: $sys-primary-on-accent;
152
- background-color: $sys-primary-accent-default;
153
- }
154
- }
155
-
156
- &[data-checked]:focus-visible {
157
- @include outline-var($container-focused-l);
158
-
159
- outline-color: $sys-primary-accent-default;
160
-
161
- .check {
162
- color: $sys-primary-on-accent;
163
- background-color: $sys-primary-accent-default;
164
- }
165
- }
166
-
167
169
  &:hover {
168
170
  box-shadow: simple-var($theme-variables, 'box-shadow', 'elevation', 'level2');
169
171
  }