@acorex/styles 7.0.16 → 7.0.17

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 (5) hide show
  1. package/package.json +1 -1
  2. package/src/base/index.scss +17 -16
  3. package/src/shared/_decoration.scss +30 -33
  4. package/src/shared/_drop-down.scss +133 -139
  5. package/src/shared/_editor-container.scss +1 -4
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acorex/styles",
3
- "version": "7.0.16",
3
+ "version": "7.0.17",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "author": "",
package/src/base/index.scss CHANGED
@@ -1,26 +1,27 @@
1
- @import "../mixins/index.scss";
2
- @import "./normalize";
3
- @import "./theme";
1
+ @import '../mixins/index.scss';
2
+ @import './normalize';
3
+ @import './theme';
4
4
 
5
5
  :root {
6
- --ax-size-default: 2.5rem;
7
- --ax-rounded-border-default: 0.375rem;
8
- @include light-variables();
9
- @include color-variable-genterator($theme-colors);
6
+ --ax-size-default: 2.5rem;
7
+ --ax-rounded-border-default: 0.375rem;
8
+ --ax-overlay-full-width: 93;
9
+ @include light-variables();
10
+ @include color-variable-genterator($theme-colors);
10
11
  }
11
12
 
12
13
  @include darkMode() {
13
- &:root {
14
- @include dark-variables();
15
- }
14
+ &:root {
15
+ @include dark-variables();
16
+ }
16
17
 
17
- .cdk-overlay-neutral-backdrop {
18
- background: rgba(0, 0, 0, 0.5) !important;
19
- }
18
+ .cdk-overlay-neutral-backdrop {
19
+ background: rgba(0, 0, 0, 0.5) !important;
20
+ }
20
21
  }
21
22
 
22
23
  html,
23
24
  body {
24
- background-color: rgb(var(--ax-color-background-default));
25
- color: rgba(var(--ax-color-text-default));
26
- }
25
+ background-color: rgb(var(--ax-color-background-default));
26
+ color: rgba(var(--ax-color-text-default));
27
+ }
package/src/shared/_decoration.scss CHANGED
@@ -1,45 +1,42 @@
1
1
  .ax-decoration-container,
2
2
  ax-header,
3
3
  ax-footer {
4
+ display: flex;
5
+ justify-content: space-between;
6
+ gap: 0.5rem;
7
+ & > ax-prefix,
8
+ & > ax-suffix {
4
9
  display: flex;
5
- justify-content: space-between;
10
+ flex: 1 1 auto;
11
+ flex-direction: row;
6
12
  gap: 0.5rem;
7
- & > ax-prefix,
8
- & > ax-suffix {
9
- display: flex;
10
- flex: 1 1 auto;
11
- flex-direction: row;
12
- gap: 0.5rem;
13
- align-items: center;
14
- }
15
- & > ax-prefix {
16
- order: -9999;
17
- justify-content: flex-start;
18
- align-items: center;
19
- }
20
- & > ax-suffix {
21
- order: 9999;
22
- justify-content: flex-end;
23
- align-items: center;
24
- }
13
+ align-items: center;
14
+ }
15
+ & > ax-prefix {
16
+ order: -9999;
17
+ justify-content: flex-start;
18
+ align-items: center;
19
+ }
20
+ & > ax-suffix {
21
+ order: 9999;
22
+ justify-content: flex-end;
23
+ align-items: center;
24
+ }
25
25
  }
26
26
 
27
- ax-icon{
28
- display: contents;
29
- }
30
27
  ax-close-button {
31
- width: 1.5rem;
32
- height: 1.5rem;
33
- display: grid;
34
- place-items: center;
35
- cursor: pointer;
28
+ width: 1.5rem;
29
+ height: 1.5rem;
30
+ display: grid;
31
+ place-items: center;
32
+ cursor: pointer;
36
33
 
37
- ax-icon {
38
- color: rgba(var(--ax-color-ghost), 0.5);
39
- font-size: 1.25rem;
34
+ ax-icon {
35
+ color: rgba(var(--ax-color-ghost), 0.5);
36
+ font-size: 1.25rem;
40
37
 
41
- &:hover {
42
- color: rgba(var(--ax-color-ghost), 0.75);
43
- }
38
+ &:hover {
39
+ color: rgba(var(--ax-color-ghost), 0.75);
44
40
  }
41
+ }
45
42
  }
package/src/shared/_drop-down.scss CHANGED
@@ -1,163 +1,157 @@
1
- @import "../variables/index.scss";
1
+ @import '../variables/index.scss';
2
2
 
3
3
  @mixin drop-down-item-apperance() {
4
- @each $color in $color_names {
5
- &.ax-#{$color}-default {
6
- background-color: transparent;
7
- color: rgb(var(--ax-color-#{$color}-500));
8
- border: transparent;
9
-
10
- &:hover,
11
- &:focus {
12
-
13
- background-color: rgba(var(--ax-color-ghost), 0.05);
14
- color: rgb(var(--ax-color-#{$color}-600));
15
- }
16
-
17
- &:active {
18
- color: rgb(var(--ax-color-#{$color}-400));
19
- }
20
-
21
- &.ax-state-selected {
22
- background-color: rgb(var(--ax-color-#{$color}-500));
23
- color: rgb(var(--ax-color-#{$color}-fore));
24
- }
25
- }
4
+ @each $color in $color_names {
5
+ &.ax-#{$color}-default {
6
+ background-color: transparent;
7
+ color: rgb(var(--ax-color-#{$color}-500));
8
+ border: transparent;
9
+
10
+ &:hover,
11
+ &:focus {
12
+ background-color: rgba(var(--ax-color-ghost), 0.05);
13
+ color: rgb(var(--ax-color-#{$color}-600));
14
+ }
15
+
16
+ &:active {
17
+ color: rgb(var(--ax-color-#{$color}-400));
18
+ }
19
+
20
+ &.ax-state-selected {
21
+ background-color: rgb(var(--ax-color-#{$color}-500));
22
+ color: rgb(var(--ax-color-#{$color}-fore));
23
+ }
26
24
  }
27
-
28
- &.ax-ghost-default {
29
- background-color: transparent;
30
- color: rgb(var(--ax-color-ghost));
31
- border: transparent;
32
-
33
- &:hover,
34
- &:focus,
35
- &:active {
36
- background-color: rgba(var(--ax-color-ghost), 0.05);
37
- color: rgb(var(--ax-color-ghost), 0.87);
38
- }
39
-
40
- &.ax-state-selected {
41
- background-color: rgb(var(--ax-color-primary-500));
42
- color: rgb(var(--ax-color-primary-fore));
43
- }
25
+ }
26
+
27
+ &.ax-ghost-default {
28
+ background-color: transparent;
29
+ color: rgb(var(--ax-color-ghost));
30
+ border: transparent;
31
+
32
+ &:hover,
33
+ &:focus,
34
+ &:active {
35
+ background-color: rgba(var(--ax-color-ghost), 0.05);
36
+ color: rgb(var(--ax-color-ghost), 0.87);
44
37
  }
45
38
 
39
+ &.ax-state-selected {
40
+ background-color: rgb(var(--ax-color-primary-500));
41
+ color: rgb(var(--ax-color-primary-fore));
42
+ }
43
+ }
46
44
  }
47
45
 
48
-
49
46
  .ax-drop-down {
50
- display: contents;
51
-
52
- .ax-dropdown-content {
53
- display: flex;
54
- align-items: center;
55
- flex: 1 1 auto;
56
- font-size: 0.875rem;
57
- overflow-y: hidden;
58
- overflow-x: auto;
59
-
60
- &.ax-state-disabled {
61
- opacity: 0.5;
62
- cursor: not-allowed;
63
- }
47
+ display: contents;
48
+
49
+ .ax-dropdown-content {
50
+ display: flex;
51
+ align-items: center;
52
+ flex: 1 1 auto;
53
+ font-size: 0.875rem;
54
+ overflow-y: hidden;
55
+ overflow-x: auto;
56
+
57
+ &.ax-state-disabled {
58
+ opacity: 0.5;
59
+ cursor: not-allowed;
64
60
  }
61
+ }
65
62
  }
66
63
 
67
64
  .ax-overlay-pane {
65
+ background-color: rgba(var(--ax-color-surface));
66
+ border: 1px solid;
67
+ border-color: rgba(var(--ax-color-border-default));
68
+ border-radius: var(--ax-rounded-border-default);
69
+ box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1),
70
+ 0px 4px 6px -2px rgba(0, 0, 0, 0.05);
71
+ overflow: hidden;
72
+
73
+ ax-header,
74
+ ax-footer {
68
75
  background-color: rgba(var(--ax-color-surface));
69
- border: 1px solid;
70
- border-color: rgba(var(--ax-color-border-default));
71
- border-radius: var(--ax-rounded-border-default);
72
- box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -2px rgba(0, 0, 0, 0.05);
73
- overflow: hidden;
76
+ padding: 0.75rem;
77
+ }
74
78
 
75
- ax-header,
76
- ax-footer {
77
- background-color: rgba(var(--ax-color-surface));
78
- padding: 0.75rem;
79
- border-color: rgba(var(--ax-color-border-default));
80
- border-top: 1px solid;
79
+ @include media('phone') {
80
+ border-bottom-right-radius: 0px;
81
+ border-bottom-left-radius: 0px;
82
+ }
81
83
 
82
- }
84
+ &.ax-overlay-center {
85
+ height: fit-content;
86
+ max-height: 90vh;
87
+ width: 80vw;
88
+ }
83
89
 
84
- @include media("phone") {
85
- border-bottom-right-radius: 0px;
86
- border-bottom-left-radius: 0px;
87
- }
90
+ &.ax-overlay-actionsheet {
91
+ background-color: rgba(var(--ax-color-surface));
92
+ width: 100%;
93
+ height: auto;
94
+ max-height: 85vh;
88
95
 
89
- &.ax-overlay-center {
90
- height: fit-content;
91
- max-height: 90vh;
92
- width: 80vw;
96
+ &.ax-full {
97
+ max-height: 95vh;
98
+ height: 95vh;
93
99
  }
100
+ }
94
101
 
95
- &.ax-overlay-actionsheet {
96
- background-color: rgba(var(--ax-color-surface));
97
- width: 100%;
98
- height: auto;
99
- max-height: 85vh;
102
+ &.ax-overlay-full {
103
+ width: 100vw;
104
+ height: 100vh;
105
+ }
100
106
 
101
- &.ax-full {
102
- max-height: 95vh;
103
- height: 95vh;
104
- }
105
- }
107
+ &.ax-dropdown-list {
108
+ display: flex;
109
+ flex-direction: column;
110
+ border: 1px solid;
111
+ border-color: rgba(var(--ax-color-border-default));
112
+ border-radius: var(--ax-rounded-border-default);
113
+ box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1),
114
+ 0px 4px 6px -2px rgba(0, 0, 0, 0.05);
115
+ padding: 0.5rem 0;
116
+
117
+ .ax-button-item {
118
+ position: relative;
119
+ display: inline-flex;
120
+ align-items: center;
121
+ justify-content: flex-start;
122
+ padding: 0.5rem;
123
+ padding-inline-start: 0.5rem;
124
+ padding-inline-end: 1rem;
125
+ font-size: 0.875rem;
126
+ color: rgba(var(--ax-color-text-default));
127
+ user-select: none;
128
+ cursor: pointer;
129
+
130
+ &.ax-divide {
131
+ border: 1px solid;
132
+ border-color: rgba(var(--ax-color-border-default));
133
+ }
106
134
 
107
- &.ax-overlay-full {
108
- width: 100vw;
109
- height: 100vh;
110
- }
135
+ &.ax-state-disabled {
136
+ opacity: 0.5;
137
+ cursor: not-allowed;
138
+ }
111
139
 
112
- &.ax-dropdown-list {
140
+ ax-prefix,
141
+ ax-suffix {
113
142
  display: flex;
114
- flex-direction: column;
115
- border: 1px solid;
116
- border-color: rgba(var(--ax-color-border-default));
117
- border-radius: var(--ax-rounded-border-default);
118
- box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -2px rgba(0, 0, 0, 0.05);
119
- padding: 0.5rem 0;
120
-
121
- .ax-button-item {
122
- position: relative;
123
- display: inline-flex;
124
- align-items: center;
125
- justify-content: flex-start;
126
- padding: 0.5rem;
127
- padding-inline-start: 0.5rem;
128
- padding-inline-end: 1rem;
129
- font-size: 0.875rem;
130
- color: rgba(var(--ax-color-text-default));
131
- user-select: none;
132
- cursor: pointer;
133
-
134
- &.ax-divide {
135
- border: 1px solid;
136
- border-color: rgba(var(--ax-color-border-default));
137
-
138
- }
139
-
140
- &.ax-state-disabled {
141
- opacity: 0.5;
142
- cursor: not-allowed;
143
- }
144
-
145
- ax-prefix,
146
- ax-suffix {
147
- display: flex;
148
- flex-direction: row;
149
- }
150
-
151
- ax-prefix {
152
- padding-inline-end: 0.5rem;
153
- }
154
-
155
- ax-suffix {
156
- padding-inline-start: 0.5rem
157
- }
158
-
159
- @include drop-down-item-apperance();
160
-
161
- }
143
+ flex-direction: row;
144
+ }
145
+
146
+ ax-prefix {
147
+ padding-inline-end: 0.5rem;
148
+ }
149
+
150
+ ax-suffix {
151
+ padding-inline-start: 0.5rem;
152
+ }
153
+
154
+ @include drop-down-item-apperance();
162
155
  }
163
- }
156
+ }
157
+ }
package/src/shared/_editor-container.scss CHANGED
@@ -48,11 +48,8 @@
48
48
  color: rgba(var(--ax-color-ghost), 0.63);
49
49
  }
50
50
  &:focus-within {
51
- outline-offset: 0px;
52
- outline-width: 1px;
53
- outline-style: solid;
54
- outline-color: rgb(var(--ax-color-primary-500));
55
51
  border-color: rgb(var(--ax-color-primary-500));
52
+ box-shadow: 0px 0 0px 1px rgb(var(--ax-color-primary-500));
56
53
  }
57
54
 
58
55
  &.ax-button-icon {