@acorex/styles 16.19.50 → 16.19.52

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 (2) hide show
  1. package/package.json +1 -1
  2. package/scss/calendar.scss +126 -128
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acorex/styles",
3
- "version": "16.19.50",
3
+ "version": "16.19.52",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/scss/calendar.scss CHANGED
@@ -1,144 +1,142 @@
1
1
  .ax-calendar-container {
2
- border: 1px solid var(--ax-border-color);
3
- border-radius: var(--ax-size-border-radius);
2
+ border: 1px solid var(--ax-border-color);
3
+ border-radius: var(--ax-size-border-radius);
4
+
5
+ .ax-calendar-header {
6
+ direction: ltr;
7
+ display: flex;
8
+ justify-content: space-between;
9
+ padding-top: 0.5rem;
10
+ padding-bottom: 0.5rem;
11
+ padding-left: 0.5rem;
12
+ padding-right: 0.5rem;
13
+ border-bottom: 1px solid var(--ax-border-color);
14
+
15
+ .ax-nav-button,
16
+ .ax-controll-button {
17
+ padding: 0 0.5rem;
18
+ }
19
+ }
20
+
21
+ .ax-calendar-body {
22
+ padding: 0.5rem;
23
+
24
+ .ax-month-items,
25
+ .ax-day-items {
26
+ display: grid;
27
+ grid-template-columns: repeat(7, minmax(0, 1fr));
28
+ }
29
+
30
+ .ax-month-container,
31
+ .ax-year-container {
32
+ display: grid;
33
+ grid-template-columns: repeat(3, minmax(0, 1fr));
4
34
 
5
- .ax-calendar-header {
6
- direction: ltr;
35
+ > div {
36
+ font-size: 0.875rem;
37
+ line-height: 1.25rem;
38
+ position: relative;
7
39
  display: flex;
8
- justify-content: space-between;
9
- padding-top: 0.5rem;
10
- padding-bottom: 0.5rem;
11
- padding-left: 0.5rem;
12
- padding-right: 0.5rem;
13
- border-bottom: 1px solid var(--ax-border-color);
14
-
15
- .ax-nav-button,
16
- .ax-controll-button {
17
- padding: 0 0.5rem;
40
+ align-items: center;
41
+ justify-content: center;
42
+ cursor: pointer;
43
+ margin: 0.125rem;
44
+ border-radius: 0.25rem;
45
+ background-color: var(--ax-light-light-color);
46
+
47
+ &::before {
48
+ content: '';
49
+ padding-top: 50%;
50
+ float: left;
18
51
  }
52
+
53
+ &::after {
54
+ content: '';
55
+ display: block;
56
+ clear: both;
57
+ }
58
+ }
59
+ }
60
+
61
+ .ax-month-items {
62
+ margin: 0.5rem 0;
63
+
64
+ .ax-month-item {
65
+ font-size: 1rem;
66
+ line-height: 1.25rem;
67
+ text-align: center;
68
+ position: relative;
69
+ display: flex;
70
+ align-items: center;
71
+ justify-content: center;
72
+ cursor: text;
73
+ margin: 0.125rem;
74
+ }
19
75
  }
20
76
 
21
- .ax-calendar-body {
22
- padding: 0.5rem;
77
+ .ax-day-items {
78
+ .ax-day-item {
79
+ font-size: 0.875rem;
80
+ line-height: 1.25rem;
81
+ position: relative;
82
+ display: flex;
83
+ align-items: center;
84
+ justify-content: center;
85
+ cursor: pointer;
86
+ margin: 0.125rem;
87
+ border-radius: 0.25rem;
88
+
89
+ &::before {
90
+ content: '';
91
+ padding-top: 100%;
92
+ float: left;
93
+ }
23
94
 
24
- .ax-month-items,
25
- .ax-day-items {
26
- display: grid;
27
- grid-template-columns: repeat(7, minmax(0, 1fr));
95
+ &::after {
96
+ content: '';
97
+ display: block;
98
+ clear: both;
28
99
  }
29
100
 
30
- .ax-month-container,
31
- .ax-year-container {
32
- display: grid;
33
- grid-template-columns: repeat(3, minmax(0, 1fr));
34
-
35
- >div {
36
- font-size: 0.875rem;
37
- line-height: 1.25rem;
38
- position: relative;
39
- display: flex;
40
- align-items: center;
41
- justify-content: center;
42
- cursor: pointer;
43
- margin: 0.125rem;
44
- border-radius: 0.25rem;
45
- background-color: var(--ax-light-light-color);
46
-
47
- &::before {
48
- content: "";
49
- padding-top: 50%;
50
- float: left;
51
- }
52
-
53
- &::after {
54
- content: "";
55
- display: block;
56
- clear: both;
57
- }
58
- }
101
+ &:hover {
102
+ background-color: var(--ax-light-light-color);
59
103
  }
60
104
 
61
- .ax-month-items {
62
- margin: 0.5rem 0;
63
-
64
- .ax-month-item {
65
- font-size: 1rem;
66
- line-height: 1.25rem;
67
- text-align: center;
68
- position: relative;
69
- display: flex;
70
- align-items: center;
71
- justify-content: center;
72
- cursor: text;
73
- margin: 0.125rem;
74
- }
105
+ &.holiday {
106
+ color: var(--ax-danger-color);
107
+
108
+ &:hover {
109
+ color: #000;
110
+ }
75
111
  }
76
112
 
77
- .ax-day-items {
78
- .ax-day-item {
79
- font-size: 0.875rem;
80
- line-height: 1.25rem;
81
- position: relative;
82
- display: flex;
83
- align-items: center;
84
- justify-content: center;
85
- cursor: pointer;
86
- margin: 0.125rem;
87
- border-radius: 0.25rem;
88
-
89
- &::before {
90
- content: "";
91
- padding-top: 100%;
92
- float: left;
93
- }
94
-
95
- &::after {
96
- content: "";
97
- display: block;
98
- clear: both;
99
- }
100
-
101
- &:hover {
102
- background-color: var(--ax-light-light-color);
103
- }
104
-
105
- &.holiday {
106
- color: var(--ax-danger-color);
107
-
108
- &:hover {
109
- color: #000;
110
- }
111
- }
112
-
113
- &.today {
114
- background-color: var(--ax-primary-trans-dark-color) !important;
115
- color: var(--ax-primary-color) !important;
116
- }
117
-
118
- &.selected {
119
- background-color: var(--ax-success-color);
120
- color: var(--ax-success-fore-color);
121
-
122
- &:hover {
123
- color: var(--ax-success-fore-color);
124
- }
125
- }
126
-
127
- &.next-month {
128
- opacity: 0.5;
129
- }
130
-
131
- &.unselect {
132
- cursor: not-allowed;
133
- position: relative;
134
- background-color: rgb(245, 138, 138, 30%);
135
- color: var(--ax-danger-color);
136
- }
137
- }
113
+ &.today {
114
+ border: 1px solid var(--ax-primary-color) !important;
138
115
  }
139
- }
140
116
 
141
- .ax-calendar-footer {
142
- padding: 0.5rem;
117
+ &.selected {
118
+ background-color: var(--ax-success-color);
119
+ color: var(--ax-success-fore-color);
120
+
121
+ &:hover {
122
+ color: var(--ax-success-fore-color);
123
+ }
124
+ }
125
+
126
+ &.next-month {
127
+ opacity: 0.5;
128
+ }
129
+
130
+ &.unselect {
131
+ cursor: not-allowed;
132
+ position: relative;
133
+ background-color: rgba(104, 102, 102, 0.3);
134
+ }
135
+ }
143
136
  }
144
- }
137
+ }
138
+
139
+ .ax-calendar-footer {
140
+ padding: 0.5rem;
141
+ }
142
+ }