@acorex/styles 7.4.6 → 7.4.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 (8) hide show
  1. package/package.json +1 -1
  2. package/src/mixins/_appearance.scss +97 -0
  3. package/src/mixins/index.scss +3 -2
  4. package/src/shared/_drop-down.scss +3 -5
  5. package/src/shared/_editor-container.scss +5 -88
  6. package/src/shared/_general-button.scss +1 -1
  7. package/src/themes/default.scss +2 -0
  8. package/src/utility/_mixins.scss +0 -80
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acorex/styles",
3
- "version": "7.4.6",
3
+ "version": "7.4.7",
4
4
  "main": "index.js",
5
5
  "author": "Ali Safari",
6
6
  "license": "ISC",
package/src/mixins/_appearance.scss ADDED
@@ -0,0 +1,97 @@
1
+ @mixin solid-appearance() {
2
+ background-color: rgba(var(--ax-color-input-surface));
3
+ border: 1px solid;
4
+ border-color: rgba(var(--ax-color-border-default));
5
+ border-radius: var(--ax-rounded-border-default);
6
+ &:focus-within {
7
+ border-color: rgba(var(--ax-color-primary-500));
8
+ box-shadow: 0 0 0 1px rgba(var(--ax-color-primary-500));
9
+ }
10
+
11
+ &.ax-state-error {
12
+ border-color: rgba(var(--ax-color-danger-500));
13
+ &:focus-within {
14
+ box-shadow: 0 0 0 1px rgba(var(--ax-color-danger-500));
15
+ }
16
+ .ax-input {
17
+ &::placeholder {
18
+ color: rgba(var(--ax-color-danger-500));
19
+ }
20
+ }
21
+ }
22
+
23
+ &.ax-state-success {
24
+ outline-color: rgba(var(--ax-color-success-500));
25
+ border-color: rgba(var(--ax-color-success-500));
26
+ &:focus-within {
27
+ box-shadow: 0 0 0 1px rgba(var(--ax-color-success-500));
28
+ }
29
+ .ax-input {
30
+ &::placeholder {
31
+ color: rgba(var(--ax-color-success-500));
32
+ }
33
+ }
34
+ }
35
+ }
36
+ @mixin flat-appearance() {
37
+ border-bottom: 1px solid;
38
+ border-color: rgba(var(--ax-color-border-default));
39
+ &:focus-within {
40
+ border-color: rgba(var(--ax-color-primary-500));
41
+ }
42
+ &.ax-state-error {
43
+ border-color: rgba(var(--ax-color-danger-500));
44
+
45
+ .ax-input {
46
+ &::placeholder {
47
+ color: rgba(var(--ax-color-danger-500));
48
+ }
49
+ }
50
+ }
51
+
52
+ &.ax-state-success {
53
+ outline-color: rgba(var(--ax-color-success-500));
54
+ border-color: rgba(var(--ax-color-success-500));
55
+
56
+ .ax-input {
57
+ &::placeholder {
58
+ color: rgba(var(--ax-color-success-500));
59
+ }
60
+ }
61
+ }
62
+ }
63
+
64
+ @mixin outline-appearance() {
65
+ background-color: transparent !important;
66
+ }
67
+
68
+ @mixin fill-appearance() {
69
+ background-color: rgba(var(--ax-color-input-surface-fill));
70
+ border-radius: var(--ax-rounded-border-default);
71
+ &:focus-within {
72
+ box-shadow: 0 0 0 2px rgba(var(--ax-color-primary-500));
73
+ }
74
+ &.ax-state-error {
75
+ background-color: rgba(var(--ax-color-danger-50));
76
+ &:focus-within {
77
+ box-shadow: 0 0 0 2px rgba(var(--ax-color-danger-500));
78
+ }
79
+ .ax-input {
80
+ &::placeholder {
81
+ color: rgba(var(--ax-color-danger-500));
82
+ }
83
+ }
84
+ }
85
+
86
+ &.ax-state-success {
87
+ background-color: rgba(var(--ax-color-success-50));
88
+ &:focus-within {
89
+ box-shadow: 0 0 0 2px rgba(var(--ax-color-success-500));
90
+ }
91
+ .ax-input {
92
+ &::placeholder {
93
+ color: rgba(var(--ax-color-success-500));
94
+ }
95
+ }
96
+ }
97
+ }
package/src/mixins/index.scss CHANGED
@@ -1,2 +1,3 @@
1
- @import "./media";
2
- @import "./util";
1
+ @import './appearance';
2
+ @import './media';
3
+ @import './util';
package/src/shared/_drop-down.scss CHANGED
@@ -9,7 +9,7 @@
9
9
 
10
10
  &:hover,
11
11
  &:focus {
12
- background-color: rgba(var(--ax-color-default));
12
+ background-color: rgba(var(--ax-color-default), 0.5);
13
13
  color: rgba(var(--ax-color-#{$color}-600));
14
14
  }
15
15
 
@@ -32,7 +32,7 @@
32
32
  &:hover,
33
33
  &:focus,
34
34
  &:active {
35
- background-color: rgba(var(--ax-color-default));
35
+ background-color: rgba(var(--ax-color-default), 0.5);
36
36
  color: rgba(var(--ax-color-default-fore));
37
37
  }
38
38
 
@@ -121,9 +121,7 @@
121
121
  display: inline-flex;
122
122
  align-items: center;
123
123
  justify-content: flex-start;
124
- padding: 0.5rem;
125
- padding-inline-start: 1.5rem;
126
- padding-inline-end: 2rem;
124
+ padding: 0.5rem 1rem;
127
125
  font-size: 0.875rem;
128
126
  color: rgba(var(--ax-color-text-default));
129
127
  user-select: none;
package/src/shared/_editor-container.scss CHANGED
@@ -23,101 +23,18 @@
23
23
 
24
24
  &.ax-appearance-solid,
25
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
- }
26
+ @include solid-appearance();
59
27
  }
60
-
61
28
  &.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
- }
29
+ @include flat-appearance();
87
30
  }
88
31
  &.ax-appearance-outline {
89
- background-color: transparent !important;
32
+ @include outline-appearance();
90
33
  }
91
34
  &.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
- }
35
+ @include fill-appearance();
120
36
  }
37
+
121
38
  .ax-editor-input {
122
39
  height: 100%;
123
40
  flex: 1;
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
- min-height: 100%;
31
+ // min-height: 100%;
32
32
  > button {
33
33
  display: flex;
34
34
  }
package/src/themes/default.scss CHANGED
@@ -15,6 +15,7 @@
15
15
  --ax-color-on-surface-fore: 22, 22, 22;
16
16
 
17
17
  --ax-color-input-surface: 255, 255, 255;
18
+ --ax-color-input-surface-fill: 247, 247, 247;
18
19
  --ax-color-input-surface-fore: 22, 22, 22;
19
20
 
20
21
  --ax-color-default: 229, 231, 235;
@@ -109,6 +110,7 @@
109
110
  --ax-color-text-default: 255, 255, 255;
110
111
 
111
112
  --ax-color-surface: 31, 41, 55;
113
+ --ax-color-input-surface-fill: 31, 41, 55;
112
114
  --ax-color-surface-fore: 255, 255, 255;
113
115
 
114
116
  --ax-color-on-surface: 55, 65, 81;
package/src/utility/_mixins.scss DELETED
@@ -1,80 +0,0 @@
1
- @mixin screen($breakpoint) {
2
- // $breakpoint is simply a variable that can have several values
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
- }
12
- }
13
-
14
- @if $breakpoint == tablet {
15
- // here `laptop` is the value of $breakpoint
16
- // when call laptop, we mean the following piece of code
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
- }
21
- }
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
- }
27
- }
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
- }
33
- }
34
- }
35
-
36
- @mixin responsive($media) {
37
- @if $media == 'phone' {
38
- @media (max-width: 599px) {
39
- @content;
40
- }
41
- }
42
- @if $media == 'tablet' {
43
- @media (min-width: 600px) {
44
- @content;
45
- }
46
- }
47
- @if $media == 'tablet-landscape' {
48
- @media (min-width: 900px) {
49
- @content;
50
- }
51
- }
52
- @if $media == 'desktop' {
53
- @media (min-width: 1200px) {
54
- @content;
55
- }
56
- }
57
- @if $media == 'desktop-large' {
58
- @media (min-width: 1800px) {
59
- @content;
60
- }
61
- }
62
- }
63
-
64
- @mixin color-look-generator() {
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
- }
72
- }
73
- }
74
- }
75
-
76
- @mixin rtl {
77
- .ax-rtl {
78
- @content;
79
- }
80
- }