@acorex/styles 7.4.3 → 7.4.6

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 (6) hide show
  1. package/package.json +1 -1
  2. package/src/mixins/_util.scss +14 -0
  3. package/src/shared/_editor-container.scss +126 -34
  4. package/src/shared/_general-button.scss +1 -1
  5. package/src/themes/default.scss +1 -1
  6. package/src/utility/_mixins.scss +55 -46
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acorex/styles",
3
- "version": "7.4.3",
3
+ "version": "7.4.6",
4
4
  "main": "index.js",
5
5
  "author": "Ali Safari",
6
6
  "license": "ISC",
package/src/mixins/_util.scss CHANGED
@@ -18,3 +18,17 @@
18
18
  @content;
19
19
  }
20
20
  }
21
+ @mixin direction($dir) {
22
+ html {
23
+ @if ($dir == 'rtl') {
24
+ &[dir='rtl'] {
25
+ @content;
26
+ }
27
+ }
28
+ @if ($dir == 'ltr') {
29
+ &[dir='ltr'] {
30
+ @content;
31
+ }
32
+ }
33
+ }
34
+ }
package/src/shared/_editor-container.scss CHANGED
@@ -1,16 +1,123 @@
1
1
  @import '../mixins/index.scss';
2
2
 
3
+ @include darkMode() {
4
+ .ax-editor-container {
5
+ &.ax-appearance-fill {
6
+ &.ax-state-error {
7
+ background-color: rgba(var(--ax-color-danger-500), 0.25);
8
+ }
9
+
10
+ &.ax-state-success {
11
+ background-color: rgba(var(--ax-color-success-500), 0.25);
12
+ }
13
+ }
14
+ }
15
+ }
3
16
  .ax-editor-container {
4
17
  width: 100%;
5
18
  height: var(--ax-size-default);
6
19
  display: flex;
7
- background-color: rgba(var(--ax-color-input-surface));
8
20
  color: rgba(var(--ax-color-input-surface-fore));
9
- border: 1px solid;
10
- border-color: rgba(var(--ax-color-border-default));
11
- border-radius: var(--ax-rounded-border-default);
12
21
  font-size: 0.875rem;
13
22
  overflow: hidden;
23
+
24
+ &.ax-appearance-solid,
25
+ &.ax-appearance-outline {
26
+ background-color: rgba(var(--ax-color-input-surface));
27
+ border: 1px solid;
28
+ border-color: rgba(var(--ax-color-border-default));
29
+ border-radius: var(--ax-rounded-border-default);
30
+ &:focus-within {
31
+ border-color: rgba(var(--ax-color-primary-500));
32
+ box-shadow: 0 0 0 1px rgba(var(--ax-color-primary-500));
33
+ }
34
+
35
+ &.ax-state-error {
36
+ border-color: rgba(var(--ax-color-danger-500));
37
+ &:focus-within {
38
+ box-shadow: 0 0 0 1px rgba(var(--ax-color-danger-500));
39
+ }
40
+ .ax-input {
41
+ &::placeholder {
42
+ color: rgba(var(--ax-color-danger-500));
43
+ }
44
+ }
45
+ }
46
+
47
+ &.ax-state-success {
48
+ outline-color: rgba(var(--ax-color-success-500));
49
+ border-color: rgba(var(--ax-color-success-500));
50
+ &:focus-within {
51
+ box-shadow: 0 0 0 2px rgba(var(--ax-color-success-500));
52
+ }
53
+ .ax-input {
54
+ &::placeholder {
55
+ color: rgba(var(--ax-color-success-500));
56
+ }
57
+ }
58
+ }
59
+ }
60
+
61
+ &.ax-appearance-flat {
62
+ border-bottom: 1px solid;
63
+ border-color: rgba(var(--ax-color-border-default));
64
+ &:focus-within {
65
+ border-color: rgba(var(--ax-color-primary-500));
66
+ }
67
+ &.ax-state-error {
68
+ border-color: rgba(var(--ax-color-danger-500));
69
+
70
+ .ax-input {
71
+ &::placeholder {
72
+ color: rgba(var(--ax-color-danger-500));
73
+ }
74
+ }
75
+ }
76
+
77
+ &.ax-state-success {
78
+ outline-color: rgba(var(--ax-color-success-500));
79
+ border-color: rgba(var(--ax-color-success-500));
80
+
81
+ .ax-input {
82
+ &::placeholder {
83
+ color: rgba(var(--ax-color-success-500));
84
+ }
85
+ }
86
+ }
87
+ }
88
+ &.ax-appearance-outline {
89
+ background-color: transparent !important;
90
+ }
91
+ &.ax-appearance-fill {
92
+ background-color: rgba(var(--ax-color-default));
93
+ border-radius: var(--ax-rounded-border-default);
94
+ &:focus-within {
95
+ box-shadow: 0 0 0 2px rgba(var(--ax-color-primary-500));
96
+ }
97
+ &.ax-state-error {
98
+ background-color: rgba(var(--ax-color-danger-50));
99
+ &:focus-within {
100
+ box-shadow: 0 0 0 2px rgba(var(--ax-color-danger-500));
101
+ }
102
+ .ax-input {
103
+ &::placeholder {
104
+ color: rgba(var(--ax-color-danger-500));
105
+ }
106
+ }
107
+ }
108
+
109
+ &.ax-state-success {
110
+ background-color: rgba(var(--ax-color-success-50));
111
+ &:focus-within {
112
+ box-shadow: 0 0 0 2px rgba(var(--ax-color-danger-500));
113
+ }
114
+ .ax-input {
115
+ &::placeholder {
116
+ color: rgba(var(--ax-color-success-500));
117
+ }
118
+ }
119
+ }
120
+ }
14
121
  .ax-editor-input {
15
122
  height: 100%;
16
123
  flex: 1;
@@ -27,10 +134,7 @@
27
134
  font-size: inherit;
28
135
  }
29
136
  }
30
- &:focus-within {
31
- border-color: rgba(var(--ax-color-primary-500));
32
- box-shadow: 0px 0 0px 1px rgba(var(--ax-color-primary-500));
33
- }
137
+
34
138
  &.ax-xs {
35
139
  .ax-input {
36
140
  font-size: 0.75rem;
@@ -96,7 +200,7 @@
96
200
  }
97
201
 
98
202
  .ax-text-area {
99
- padding: 0.625rem /* 10px */;
203
+ padding: 0.625rem /* 10 */;
100
204
  }
101
205
  & > ax-prefix {
102
206
  *,
@@ -123,7 +227,7 @@
123
227
  display: flex;
124
228
  justify-content: center;
125
229
  align-items: center;
126
- border-radius: 0px;
230
+ border-radius: 0;
127
231
  }
128
232
 
129
233
  ax-icon {
@@ -149,7 +253,7 @@
149
253
 
150
254
  .ax-button {
151
255
  height: 100% !important;
152
- border-radius: 0px;
256
+ border-radius: 0;
153
257
 
154
258
  &.ax-button-icon {
155
259
  width: var(--ax-size-default);
@@ -160,29 +264,17 @@
160
264
  &.ax-state-disabled {
161
265
  opacity: 0.5;
162
266
  }
163
-
164
- &.ax-state-error {
165
- border-color: rgba(var(--ax-color-danger-500));
166
- &:focus-within {
167
- box-shadow: 0px 0 0px 1px rgba(var(--ax-color-danger-500));
168
- }
169
- .ax-input {
170
- &::placeholder {
171
- color: rgba(var(--ax-color-danger-500));
172
- }
173
- }
174
- }
175
-
176
- &.ax-state-success {
177
- outline-color: rgba(var(--ax-color-success-500));
178
- border-color: rgba(var(--ax-color-success-500));
179
- &:focus-within {
180
- box-shadow: 0px 0 0px 1px rgba(var(--ax-color-success-500));
181
- }
182
- .ax-input {
183
- &::placeholder {
184
- color: rgba(var(--ax-color-success-500));
185
- }
267
+ }
268
+ span.ripple {
269
+ position: absolute;
270
+ border-radius: 50%;
271
+ transform: scale(0);
272
+ animation: ripple 300ms linear;
273
+ background-color: rgba(var(--ax-color-white), 0.7);
274
+ @keyframes ripple {
275
+ to {
276
+ transform: scale(4);
277
+ opacity: 0;
186
278
  }
187
279
  }
188
280
  }
package/src/shared/_general-button.scss CHANGED
@@ -28,7 +28,7 @@
28
28
  font-size: 1.25rem;
29
29
  min-width: var(--ax-size-default);
30
30
  width: var(--ax-size-default);
31
- height: 100%;
31
+ min-height: 100%;
32
32
  > button {
33
33
  display: flex;
34
34
  }
package/src/themes/default.scss CHANGED
@@ -17,7 +17,7 @@
17
17
  --ax-color-input-surface: 255, 255, 255;
18
18
  --ax-color-input-surface-fore: 22, 22, 22;
19
19
 
20
- --ax-color-default: 239, 241, 245;
20
+ --ax-color-default: 229, 231, 235;
21
21
  --ax-color-default-fore: 22, 22, 22;
22
22
 
23
23
  --ax-color-ghost: 255, 255, 255;
package/src/utility/_mixins.scss CHANGED
@@ -1,71 +1,80 @@
1
1
  @mixin screen($breakpoint) {
2
- // $breakpoint is simply a variable that can have several values
2
+ // $breakpoint is simply a variable that can have several values
3
3
 
4
- @if $breakpoint == extraSmall {
5
- // Media query for 320px and less
6
- @media (max-width: 320px) {
7
- @content;
8
- }
9
- @media (min-width: 321px) and (max-width: 480px) {
10
- @content;
11
- }
4
+ @if $breakpoint == extraSmall {
5
+ // Media query for 320px and less
6
+ @media (max-width: 320px) {
7
+ @content;
12
8
  }
9
+ @media (min-width: 321px) and (max-width: 480px) {
10
+ @content;
11
+ }
12
+ }
13
13
 
14
- @if $breakpoint == tablet {
15
- // here `laptop` is the value of $breakpoint
16
- // when call laptop, we mean the following piece of code
14
+ @if $breakpoint == tablet {
15
+ // here `laptop` is the value of $breakpoint
16
+ // when call laptop, we mean the following piece of code
17
17
 
18
- @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
19
- @content;
20
- }
18
+ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
19
+ @content;
21
20
  }
21
+ }
22
22
 
23
- @if $breakpoint == mobile {
24
- @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
25
- @content;
26
- }
23
+ @if $breakpoint == mobile {
24
+ @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
25
+ @content;
27
26
  }
27
+ }
28
28
 
29
- @if $breakpoint == laptop {
30
- @media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) {
31
- @content;
32
- }
29
+ @if $breakpoint == laptop {
30
+ @media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) {
31
+ @content;
33
32
  }
33
+ }
34
34
  }
35
35
 
36
-
37
- @mixin responsive($media){
38
- @if $media == 'phone'{
39
- @media (max-width: 599px) { @content; }
36
+ @mixin responsive($media) {
37
+ @if $media == 'phone' {
38
+ @media (max-width: 599px) {
39
+ @content;
40
40
  }
41
- @if $media == 'tablet'{
42
- @media (min-width: 600px) { @content; }
41
+ }
42
+ @if $media == 'tablet' {
43
+ @media (min-width: 600px) {
44
+ @content;
43
45
  }
44
- @if $media == 'tablet-landscape'{
45
- @media (min-width: 900px) { @content; }
46
+ }
47
+ @if $media == 'tablet-landscape' {
48
+ @media (min-width: 900px) {
49
+ @content;
46
50
  }
47
- @if $media == 'desktop'{
48
- @media (min-width: 1200px) { @content; }
51
+ }
52
+ @if $media == 'desktop' {
53
+ @media (min-width: 1200px) {
54
+ @content;
49
55
  }
50
- @if $media == 'desktop-large'{
51
- @media (min-width: 1800px) { @content; }
56
+ }
57
+ @if $media == 'desktop-large' {
58
+ @media (min-width: 1800px) {
59
+ @content;
52
60
  }
61
+ }
53
62
  }
54
63
 
55
64
  @mixin color-look-generator() {
56
- $colors: ("primary", "secondary", "success", "warning", "danger", "info", "light", "dark");
57
- $looks: ("default", "outline", "twotone", "blank");
58
- @each $c in $colors {
59
- @each $l in $looks {
60
- &.ax-#{$c}-#{$l} {
61
- @include color-look($c, $l);
62
- }
63
- }
65
+ $colors: ('primary', 'secondary', 'success', 'warning', 'danger', 'info', 'light', 'dark');
66
+ $looks: ('default', 'outline', 'twotone', 'blank');
67
+ @each $c in $colors {
68
+ @each $l in $looks {
69
+ &.ax-#{$c}-#{$l} {
70
+ @include color-look($c, $l);
71
+ }
64
72
  }
73
+ }
65
74
  }
66
75
 
67
76
  @mixin rtl {
68
- .ax-rtl {
69
- @content;
70
- }
77
+ .ax-rtl {
78
+ @content;
79
+ }
71
80
  }