@acorex/styles 3.0.10 → 3.0.11

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/scss/calendar.scss +107 -128
  3. package/scss/forms.scss +2 -0
  4. package/scss/master.scss +4 -4
  5. package/scss/variables.scss +3 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acorex/styles",
3
- "version": "3.0.10",
3
+ "version": "3.0.11",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/scss/calendar.scss CHANGED
@@ -1,151 +1,130 @@
1
- .jalali {
2
- .view {
3
- direction: rtl !important;
1
+ .ax-calendar {
2
+ border: 1px solid var(--ax-border-color);
3
+ border-radius: var(--ax-size-border-radius);
4
+ .ax-calendar-header {
5
+ display: grid;
6
+ grid-template-columns: repeat(12, minmax(0, 1fr));
7
+ padding-top: 0.5rem;
8
+ padding-bottom: 0.5rem;
9
+ padding-left: 0.5rem;
10
+ padding-right: 0.5rem;
11
+ border-bottom: 1px solid var(--ax-border-color);
12
+ .ax-nav-button {
13
+ grid-column: span 8 / span 8;
14
+ justify-content: flex-start;
15
+ }
16
+ .ax-controll-button {
17
+ grid-column: span 2 / span 2;
18
+ justify-content: center;
19
+ margin-inline-start: 0.25rem;
20
+ }
4
21
  }
5
- }
6
-
7
- .ax {
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
- }
24
- }
25
- .arrows {
26
- width: 3em;
27
- height: 3em;
22
+ .ax-calendar-body {
23
+ padding: 0.5rem;
24
+ .ax-month-items,
25
+ .ax-day-items {
26
+ display: grid;
27
+ grid-template-columns: repeat(7, minmax(0, 1fr));
28
+ }
29
+ .ax-month-container,
30
+ .ax-year-container {
31
+ display: grid;
32
+ grid-template-columns: repeat(3, minmax(0, 1fr));
33
+ >div {
34
+ font-size: 1rem;
35
+ line-height: 1.25rem;
36
+ position: relative;
28
37
  display: flex;
29
38
  align-items: center;
30
39
  justify-content: center;
31
40
  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
- }
41
+ margin: 0.125rem;
42
+ border-radius: 0.25rem;
43
+ font-weight: 500;
44
+ background-color: rgb(241, 241, 241);
45
+ &::before {
46
+ content: "";
47
+ padding-top: 100%;
48
+ float: left;
38
49
  }
39
- >i {
40
- color: var(--ax-primary-color);
50
+ &::after {
51
+ content: "";
52
+ display: block;
53
+ clear: both;
41
54
  }
42
55
  }
43
- .selector-name {
56
+ }
57
+ .ax-month-items {
58
+ margin: 0.5rem 0;
59
+ .ax-month-item {
60
+ font-size: 1rem;
61
+ line-height: 1.25rem;
62
+ text-align: center;
63
+ position: relative;
44
64
  display: flex;
45
65
  align-items: center;
46
66
  justify-content: center;
47
- cursor: pointer;
67
+ cursor: text;
68
+ margin: 0.125rem;
48
69
  }
49
70
  }
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
- border-color: var(--ax-gray-color) !important;
66
- opacity: 0.5;
67
- cursor: not-allowed !important;
68
- &:hover {
69
- color: unset !important;
70
- }
71
- }
71
+ .ax-day-items {
72
+ .ax-day-item {
73
+ font-size: 1rem;
74
+ line-height: 1.25rem;
75
+ position: relative;
76
+ display: flex;
77
+ align-items: center;
78
+ justify-content: center;
79
+ cursor: pointer;
80
+ margin: 0.125rem;
81
+ border-radius: 0.25rem;
82
+ font-weight: 500;
83
+ &::before {
84
+ content: "";
85
+ padding-top: 100%;
86
+ float: left;
72
87
  }
73
- .calendar-item {
74
- font-family: inherit;
75
- font-size: inherit;
76
- padding: 0.4em 0.8em;
77
- background-color: var(--ax-white-color);
78
- text-align: center;
79
- border: 1px solid var(--ax-white-color);
80
- border-radius: 4px;
81
- div {
82
- //width: 25px;
83
- display: inline-block;
84
- overflow: hidden;
85
- }
86
- &:hover,
87
- &.focused {
88
- background: var(--ax-primary-trans-dark-color);
89
- border: 1px solid transparent;
90
- color: var(--ax-primay-color);
91
- cursor: pointer;
92
- }
93
- &.next-month {
94
- visibility: hidden;
95
- &:hover {
96
- background: var(--ax-white-color);
97
- color: var(--ax-gray-color);
98
- }
99
- }
100
- &.selected {
101
- background: var(--ax-success-color) !important;
102
- color: var(--ax-success-fore-color) !important;
103
- border: 1px solid !important;
104
- border-color: var(--ax-success-color) !important;
88
+ &::after {
89
+ content: "";
90
+ display: block;
91
+ clear: both;
92
+ }
93
+ &:hover {
94
+ background-color: var(--ax-light-light-color);
95
+ }
96
+ &.holiday {
97
+ color: var(--ax-danger-color);
98
+ &:hover {
99
+ color: #000;
105
100
  }
106
- &.today {
107
- border: 1px solid;
108
- border-color: var(--ax-primary-color);
109
- background: var(--ax-primary-color);
101
+ }
102
+ &.today {
103
+ background-color: var(--ax-success-color);
104
+ color: var(--ax-success-fore-color);
105
+ }
106
+ &.selected {
107
+ background-color: var(--ax-primary-color);
108
+ color: var(--ax-primary-fore-color);
109
+ &:hover {
110
110
  color: var(--ax-primary-fore-color);
111
- &.unselect {
112
- border: 1px solid;
113
- border-color: var(--ax-primary-color);
114
- background: var(--ax-primary-color);
115
- color: var(--ax-primary-fore-color);
116
- }
117
- }
118
- &.disabled {
119
- background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAAm0lEQVRIx7XVwQnAIAwF0ExSdBF1a6Er9dIRqsVAazWJmh4+iuBT4YMQ4w4pWxk1clt5YlOOFKeAumJZXAgKOKIBb6yBv9AansU/aAsexZtoD5biXZSCOZxEObiHs6gErnERKoURP0uCZM9IpRB2WvDz+eIqzvRUhMNkT1mcQz1xsKfwWZTFV1ASX0W7uAbaxPOCUUBr3MBfn+kF3CNLT2/yky4AAAAASUVORK5CYII=") center center no-repeat;
120
- cursor: not-allowed;
121
- &:hover {
122
- color: var(--ax-danger-color);
123
- }
124
- }
125
- &.holiday {
126
- color: var(--ax-danger-color);
127
- font-weight: bold;
128
- &:hover {
129
- &:not(.selected) {
130
- background-color: var(--ax-danger-trans-light-color);
131
- }
132
- }
133
111
  }
134
112
  }
135
- .days-name {
136
- margin-bottom: 0.5em;
137
- border-bottom: 1px solid;
138
- color: var(--ax-primary-color);
139
- .calendar-item {
140
- &:hover {
141
- background: var(--ax-primary-trans-dark-color);
142
- border: 1px solid transparent;
143
- color: var(--ax-primay-color);
144
- cursor: pointer;
145
- }
146
- }
113
+ &.next-month {
114
+ opacity: 0.5;
115
+ }
116
+ &.unselect {
117
+ cursor: not-allowed;
118
+ position: relative;
119
+ background-color: rgb(245, 138, 138, 30%);
120
+ color: var(--ax-danger-color);
121
+
122
+
147
123
  }
148
124
  }
149
125
  }
150
126
  }
127
+ .ax-calendar-footer {
128
+ padding: 0.5rem;
129
+ }
151
130
  }
package/scss/forms.scss CHANGED
@@ -74,6 +74,7 @@
74
74
  font-style: normal;
75
75
  display: inline-flex;
76
76
  color: #1d1d1d;
77
+
77
78
  &.icon {
78
79
  input {
79
80
  padding-inline-start: 2.1em;
@@ -119,6 +120,7 @@
119
120
  text-align: inherit;
120
121
  font-size: inherit;
121
122
  font-family: inherit;
123
+ font-weight: 500;
122
124
  background: #fff;
123
125
  border: none !important;
124
126
  color: rgba(0, 0, 0, 0.87);
package/scss/master.scss CHANGED
@@ -41,7 +41,7 @@
41
41
  .ax {
42
42
  &.form-control {
43
43
  height: 40px;
44
- padding: 5px 10px;
44
+ padding: 5px 15px;
45
45
  font-size: 1rem;
46
46
  font-weight: 400;
47
47
  &.sm {
@@ -51,7 +51,7 @@
51
51
  }
52
52
  &.md {
53
53
  height: 40px;
54
- padding: 5px 10px;
54
+ padding: 5px 15px;
55
55
  font-size: 1rem;
56
56
  font-weight: 500;
57
57
  }
@@ -149,7 +149,7 @@ $color in $colors {
149
149
  }
150
150
  &.blank {
151
151
  color: var(--ax-#{$name}-#{$color-suffix});
152
- background-color: var(--ax-#{$name}-fore-#{$color-suffix});
152
+ background-color: var(--ax-white-color);
153
153
  &.disabled {
154
154
  i {
155
155
  color: var(--ax-gray-dark-color) !important;
@@ -177,7 +177,7 @@ $color in $colors {
177
177
  // -webkit-border-radius: 4px;
178
178
  // }
179
179
  &:hover {
180
- background-color: var(--ax-#{$name}-#{$color-suffix}) !important;
180
+ background-color: var(--ax-#{$name}-light-#{$color-suffix}) !important;
181
181
  color: var(--ax-#{$name}-fore-#{$color-suffix}) !important;
182
182
  transition: all 0.3s;
183
183
  i {
package/scss/variables.scss CHANGED
@@ -4,7 +4,7 @@ $white: #fff;
4
4
  $black: #000;
5
5
  $primary: #3b82f6;
6
6
  $secondary: #ec4899;
7
- $gray: #c0c0c0;
7
+ $gray: #6b7280;
8
8
  $success: #10b981;
9
9
  $info: #8b5cf6;
10
10
  $warning: #f59e0b;
@@ -72,10 +72,10 @@ $colors: (
72
72
  "trans-light": transparentize($gray, 0.85),
73
73
  ),
74
74
  "light": (
75
- "": darken($white, 25%),
75
+ "": darken($white, 30%),
76
76
  "fore": $black,
77
77
  "light": darken($white, 10%),
78
- "dark": darken($white, 30%),
78
+ "dark": darken($white, 40%),
79
79
  "trans-dark": transparentize($white, 0.85),
80
80
  "trans-light": transparentize($white, 0.85),
81
81
  ),