@acorex/styles 3.0.0 → 3.0.1

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 (4) hide show
  1. package/package.json +1 -1
  2. package/scss/calendar.scss +133 -156
  3. package/scss/forms.scss +0 -6
  4. package/scss/treeview.scss +0 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acorex/styles",
3
- "version": "3.0.0",
3
+ "version": "3.0.1",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/scss/calendar.scss CHANGED
@@ -1,167 +1,144 @@
1
1
  .jalali {
2
- .view {
3
- direction: rtl !important;
4
- }
2
+ .view {
3
+ direction: rtl !important;
4
+ }
5
5
  }
6
6
 
7
7
  .ax {
8
- &.calendar-body {
9
- width: fit-content;
10
- font-family: inherit;
11
- // padding-block-end: 0.8em;
12
-
13
- .calendar-selector {
14
- display: flex;
15
- justify-content: space-between;
16
- background-color: var(--ax-primary-trans-dark-color);
17
- height: 3em;
18
-
19
- [dir="rtl"] & {
20
- .arrows {
21
- i {
22
- -webkit-transform: scaleX(-1);
23
- transform: scaleX(-1);
24
- }
25
- }
26
- }
27
-
28
- .arrows {
29
- width: 3em;
30
- height: 3em;
31
- display: flex;
32
- align-items: center;
33
- justify-content: center;
34
- cursor: pointer;
35
- background-color: var(--ax-primary-trans-dark-color);
36
-
37
- &:hover {
38
- background-color: var(--ax-primary-color);
39
-
40
- >i {
41
- color: var(--ax-white-color);
42
- }
43
- }
44
-
45
- >i {
46
- color: var(--ax-primary-color);
47
- }
48
- }
49
-
50
- .selector-name {
51
- display: flex;
52
- align-items: center;
53
- justify-content: center;
54
- cursor: pointer;
55
- }
56
- }
57
-
58
- .view {
59
- display: flex;
60
- align-items: center;
61
-
62
- table {
63
- flex: 1;
64
- width: 100%;
65
- border-collapse: unset;
66
- margin: 0.3em 0 0 0;
67
-
68
- tr {
69
- td.holiday {
70
- color: var(--ax-danger-color) !important;
71
- }
72
-
73
- td.unselect {
74
- background-color: var(--ax-gray-trans-dark-color) !important;
75
- opacity: 0.5;
76
- cursor: not-allowed !important;
77
-
78
- &:hover {
79
- color: unset !important;
80
- }
81
- }
82
- }
83
-
84
- .calendar-item {
85
-
86
- font-family: inherit;
87
- font-size: inherit;
88
- padding: 0.4em 0.8em;
89
- background-color: var(--ax-white-color);
90
- text-align: center;
91
- border: 1px solid var(--ax-white-color);
92
- border-radius: 4px;
93
-
94
- div {
95
- //width: 25px;
96
- display: inline-block;
97
- overflow: hidden;
98
- }
99
-
100
- &:hover,
101
- &.focused {
102
- background: var(--ax-primary-color);
103
- color: var(--ax-white-color);
104
- border: 1px solid;
105
- border-color: var(--ax-prima-color);
106
- cursor: pointer;
107
- }
108
-
109
- &.next-month {
110
- visibility: hidden;
111
-
112
- &:hover {
113
- background: var(--ax-white-color);
114
- color: var(--ax-gray-color);
8
+ &.calendar-body {
9
+ width: fit-content;
10
+ font-family: inherit;
11
+ // padding-block-end: 0.8em;
12
+ .calendar-selector {
13
+ display: flex;
14
+ justify-content: space-between;
15
+ background-color: var(--ax-primary-trans-dark-color);
16
+ height: 3em;
17
+ [dir="rtl"] & {
18
+ .arrows {
19
+ i {
20
+ -webkit-transform: scaleX(-1);
21
+ transform: scaleX(-1);
22
+ }
23
+ }
115
24
  }
116
- }
117
-
118
- &.selected {
119
- background: var(--ax-primary-color);
120
- color: var(--ax-white-color) !important;
121
- border: 1px solid;
122
- border-color: var(--ax-primary-color);
123
- }
124
-
125
- &.today {
126
- border: 1px solid;
127
- border-color: var(--ax-primary-color);
128
- background: var(--ax-primary-trans-dark-color);
129
- color: var(--ax-primary-color);
130
- }
131
-
132
- &.disabled {
133
- background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAAm0lEQVRIx7XVwQnAIAwF0ExSdBF1a6Er9dIRqsVAazWJmh4+iuBT4YMQ4w4pWxk1clt5YlOOFKeAumJZXAgKOKIBb6yBv9AansU/aAsexZtoD5biXZSCOZxEObiHs6gErnERKoURP0uCZM9IpRB2WvDz+eIqzvRUhMNkT1mcQz1xsKfwWZTFV1ASX0W7uAbaxPOCUUBr3MBfn+kF3CNLT2/yky4AAAAASUVORK5CYII=") center center no-repeat;
134
- cursor: not-allowed;
135
-
136
- &:hover {
137
- color: var(--ax-danger-color);
25
+ .arrows {
26
+ width: 3em;
27
+ height: 3em;
28
+ display: flex;
29
+ align-items: center;
30
+ justify-content: center;
31
+ cursor: pointer;
32
+ background-color: var(--ax-primary-trans-dark-color);
33
+ &:hover {
34
+ background-color: var(--ax-primary-color);
35
+ >i {
36
+ color: var(--ax-white-color);
37
+ }
38
+ }
39
+ >i {
40
+ color: var(--ax-primary-color);
41
+ }
138
42
  }
139
- }
140
-
141
- &.holiday {
142
- color: var(--ax-danger-color);
143
- font-weight: bold;
144
-
145
- &:hover {
146
- background-color: var(--ax-danger-light-color);
43
+ .selector-name {
44
+ display: flex;
45
+ align-items: center;
46
+ justify-content: center;
47
+ cursor: pointer;
147
48
  }
148
- }
149
49
  }
150
-
151
- .days-name {
152
- margin-bottom: 0.5em;
153
- border-bottom: 1px solid;
154
- color: var(--ax-primary-color);
155
-
156
- .calendar-item {
157
- &:hover {
158
- background: var(--ax-white-color);
159
- border: 1px solid transparent;
160
- color: var(--ax-prima-color);
50
+ .view {
51
+ display: flex;
52
+ align-items: center;
53
+ table {
54
+ flex: 1;
55
+ width: 100%;
56
+ border-collapse: unset;
57
+ margin: 0.3em 0 0 0;
58
+ tr {
59
+ td.holiday {
60
+ color: var(--ax-danger-color) !important;
61
+ }
62
+ td.unselect {
63
+ background-color: var(--ax-gray-color) !important;
64
+ color: var(--ax-gray-fore-color) !important;
65
+ opacity: 0.5;
66
+ cursor: not-allowed !important;
67
+ &:hover {
68
+ color: unset !important;
69
+ }
70
+ }
71
+ }
72
+ .calendar-item {
73
+ font-family: inherit;
74
+ font-size: inherit;
75
+ padding: 0.4em 0.8em;
76
+ background-color: var(--ax-white-color);
77
+ text-align: center;
78
+ border: 1px solid var(--ax-white-color);
79
+ border-radius: 4px;
80
+ div {
81
+ //width: 25px;
82
+ display: inline-block;
83
+ overflow: hidden;
84
+ }
85
+ &:hover,
86
+ &.focused {
87
+ background: var(--ax-primary-trans-dark-color);
88
+ border: 1px solid transparent;
89
+ color: var(--ax-primay-color);
90
+ cursor: pointer;
91
+ }
92
+ &.next-month {
93
+ visibility: hidden;
94
+ &:hover {
95
+ background: var(--ax-white-color);
96
+ color: var(--ax-gray-color);
97
+ }
98
+ }
99
+ &.selected {
100
+ background: var(--ax-success-color);
101
+ color: var(--ax-success-fore-color) !important;
102
+ border: 1px solid;
103
+ border-color: var(--ax-success-color);
104
+ }
105
+ &.today {
106
+ border: 1px solid;
107
+ border-color: var(--ax-primary-color);
108
+ background: var(--ax-primary-color);
109
+ color: var(--ax-primary-fore-color);
110
+ }
111
+ &.disabled {
112
+ background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAAm0lEQVRIx7XVwQnAIAwF0ExSdBF1a6Er9dIRqsVAazWJmh4+iuBT4YMQ4w4pWxk1clt5YlOOFKeAumJZXAgKOKIBb6yBv9AansU/aAsexZtoD5biXZSCOZxEObiHs6gErnERKoURP0uCZM9IpRB2WvDz+eIqzvRUhMNkT1mcQz1xsKfwWZTFV1ASX0W7uAbaxPOCUUBr3MBfn+kF3CNLT2/yky4AAAAASUVORK5CYII=") center center no-repeat;
113
+ cursor: not-allowed;
114
+ &:hover {
115
+ color: var(--ax-danger-color);
116
+ }
117
+ }
118
+ &.holiday {
119
+ color: var(--ax-danger-color);
120
+ font-weight: bold;
121
+ &:hover {
122
+ &:not(.selected) {
123
+ background-color: var(--ax-danger-trans-light-color);
124
+ }
125
+ }
126
+ }
127
+ }
128
+ .days-name {
129
+ margin-bottom: 0.5em;
130
+ border-bottom: 1px solid;
131
+ color: var(--ax-primary-color);
132
+ .calendar-item {
133
+ &:hover {
134
+ background: var(--ax-primary-trans-dark-color);
135
+ border: 1px solid transparent;
136
+ color: var(--ax-primay-color);
137
+ cursor: pointer;
138
+ }
139
+ }
140
+ }
161
141
  }
162
- }
163
142
  }
164
- }
165
143
  }
166
- }
167
- }
144
+ }
package/scss/forms.scss CHANGED
@@ -74,12 +74,6 @@
74
74
  padding-inline-start: 2.1em;
75
75
  padding-inline-end: 0.5em;
76
76
  }
77
- [dir="rtl"] & {
78
- input {
79
- padding-inline-start: 0.5em;
80
- padding-inline-end: 2.1em;
81
- }
82
- }
83
77
  .text-left {
84
78
  padding-inline-start: 0.5em !important;
85
79
  }
package/scss/treeview.scss CHANGED
@@ -107,7 +107,6 @@ $left: -($ident);
107
107
  .text-list {
108
108
  flex: 1;
109
109
  display: flex;
110
- margin-inline-start: 0.5rem;
111
110
  }
112
111
  >div {
113
112
  padding: 0.5em 0;