urfu-ui-kit-vanilla 1.0.22 → 1.0.24

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/playground/index.html +7 -0
  3. package/playground/main.ts +2 -5
  4. package/src/main.css +58 -0
  5. package/src/main.less +2 -0
  6. package/src/styles/components/accordion.less +75 -0
  7. package/src/styles/components/airdatepicker.less +211 -0
  8. package/src/styles/components/input.less +3 -0
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "UrFU UI-Kit for Vanilla Web",
4
4
  "license": "UNLICENSED",
5
5
  "private": false,
6
- "version": "1.0.22",
6
+ "version": "1.0.24",
7
7
  "type": "module",
8
8
  "repository": {
9
9
  "type": "git",
package/playground/index.html CHANGED
@@ -9,6 +9,13 @@
9
9
  <body>
10
10
  <div id="app">
11
11
 
12
+ <div class="u-accordion">
13
+ <div class="u-accordion-title">Заголовок</div>
14
+ <input class="u-accordion-input" type="checkbox" name="" id="accordion_1">
15
+ <label class="u-accordion-toggle" for="accordion_1"></label>
16
+ <div class="u-accordion-content">Контент <br>Контент <br>Контент <br>Контент <br>Контент <br>Контент <br>Контент <br></div>
17
+ </div>
18
+
12
19
  <input type="text" class="u-calendar" id="airdatepicker">
13
20
 
14
21
  <div class="u-bc"><a class="u-bc-link">Главная</a><a class="u-bc-text">Не главная</a><a class="u-bc-last">Последняя</a></div>
package/playground/main.ts CHANGED
@@ -1,12 +1,9 @@
1
- import "../src/main.less";
2
-
3
1
  import AirDatepicker from 'air-datepicker';
4
2
  import 'air-datepicker/air-datepicker.css';
3
+ import "../src/main.less";
5
4
 
6
5
  new AirDatepicker('#airdatepicker', {
7
6
  inline: true,
8
7
  toggleSelected: true,
9
- moveToOtherMonthsOnSelect: false, // нужно ли убирать?
10
- showOtherMonths: false, // нужно ли убирать?
11
- selectOtherMonths: false, //нужно ли убирать?
8
+ range: true,
12
9
  })
package/src/main.css CHANGED
@@ -1175,7 +1175,10 @@
1175
1175
  transition-property: color, background-color, border-color, background-image;
1176
1176
  transition-duration: 0.15s;
1177
1177
  transition-timing-function: ease-in-out;
1178
+ cursor: pointer;
1178
1179
  border: 1px solid #D3D3D3;
1180
+ background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_7666_4018)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 4C2.89543 4 2 4.89543 2 6V16C2 17.1046 2.89543 18 4 18H16C17.1046 18 18 17.1046 18 16V6C18 4.89543 17.1046 4 16 4H4ZM0 6C0 3.79086 1.79086 2 4 2H16C18.2091 2 20 3.79086 20 6V16C20 18.2091 18.2091 20 16 20H4C1.79086 20 0 18.2091 0 16V6Z' fill='%231E4391'/%3E%3Cpath d='M5 1C5 0.447715 5.44772 0 6 0C6.55228 0 7 0.447715 7 1V5C7 5.55228 6.55228 6 6 6C5.44772 6 5 5.55228 5 5V1Z' fill='%231E4391'/%3E%3Cpath d='M13 1C13 0.447715 13.4477 0 14 0C14.5523 0 15 0.447715 15 1V5C15 5.55228 14.5523 6 14 6C13.4477 6 13 5.55228 13 5V1Z' fill='%231E4391'/%3E%3Cpath d='M3 9C3 8.44772 3.44772 8 4 8H16C16.5523 8 17 8.44772 17 9C17 9.55228 16.5523 10 16 10H4C3.44772 10 3 9.55228 3 9Z' fill='%231E4391'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_7666_4018'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E ") no-repeat;
1181
+ background-position: top 14px right 16px;
1179
1182
  }
1180
1183
  .u-calendar:hover,
1181
1184
  .u-calendar.active {
@@ -2020,6 +2023,61 @@
2020
2023
  .u-table table tbody tr:hover {
2021
2024
  background-color: #E9ECF1;
2022
2025
  }
2026
+ .air-datepicker {
2027
+ margin-top: 2px;
2028
+ border: 1px solid #748AB9;
2029
+ border-radius: 10px;
2030
+ }
2031
+ .air-datepicker.-inline- {
2032
+ border: 1px solid #748AB9;
2033
+ }
2034
+ .air-datepicker-nav {
2035
+ border: none;
2036
+ }
2037
+ .air-datepicker-nav--action:hover {
2038
+ background-color: transparent;
2039
+ }
2040
+ .air-datepicker-nav--action svg path {
2041
+ stroke: #1E4391;
2042
+ stroke-linecap: round;
2043
+ stroke-linejoin: round;
2044
+ }
2045
+ .air-datepicker-nav--title {
2046
+ padding: 0;
2047
+ font-weight: 600;
2048
+ font-size: 18px;
2049
+ line-height: 22px;
2050
+ color: #222222;
2051
+ }
2052
+ .air-datepicker-nav--title:hover {
2053
+ background-color: transparent;
2054
+ }
2055
+ .air-datepicker-nav--title i {
2056
+ color: #222222;
2057
+ margin-left: 7px;
2058
+ }
2059
+ .air-datepicker-body--day-name {
2060
+ color: #A7A7A7;
2061
+ /*simple text*/
2062
+ /*simple text*/
2063
+ font-weight: 400;
2064
+ font-size: 16px;
2065
+ line-height: 22.4px;
2066
+ }
2067
+ .air-datepicker-cell {
2068
+ /*simple text*/
2069
+ /*simple text*/
2070
+ font-weight: 400;
2071
+ font-size: 16px;
2072
+ line-height: 22.4px;
2073
+ color: #222222;
2074
+ }
2075
+ .air-datepicker-cell.-day- {
2076
+ border-radius: 50%;
2077
+ }
2078
+ .air-datepicker-cell.-day-.-selected- {
2079
+ background-color: #1E4391;
2080
+ }
2023
2081
  .bg-gradient {
2024
2082
  background: linear-gradient(270deg, #FF2D7F -0.71%, #FB3727 47.63%, #FEEA0F 100%);
2025
2083
  }
package/src/main.less CHANGED
@@ -7,6 +7,7 @@
7
7
  @import "styles/components/switch";
8
8
  @import "styles/components/radio";
9
9
  @import "styles/components/checkbox";
10
+ @import "styles/components/accordion";
10
11
  @import "styles/components/tab";
11
12
  @import "styles/components/breadcrumbs";
12
13
  @import "styles/components/icon";
@@ -16,6 +17,7 @@
16
17
  @import "styles/components/notification";
17
18
  @import "styles/components/preloader";
18
19
  @import "styles/components/table";
20
+ @import "styles/components/airdatepicker";
19
21
  @import "styles/special-classes/colors";
20
22
  @import "styles/special-classes/font-weight";
21
23
  @import "styles/special-classes/selectors";
package/src/styles/components/accordion.less ADDED
@@ -0,0 +1,75 @@
1
+ @import "../../main.less";
2
+
3
+ .u-accordion {
4
+ border-left: 4px solid @clr-secondary-cold;
5
+ padding-left: 20px;
6
+ position: relative;
7
+ overflow: hidden;
8
+ &-title {
9
+ display: block;
10
+ font-size: 16px;
11
+ font-weight: 600;
12
+ line-height: 22.4px;
13
+ color: @clr-main-primary;
14
+ padding: 14px 0;
15
+ }
16
+ &-toggle {
17
+ cursor: pointer;
18
+ position: absolute;
19
+ width: 42px;
20
+ height: 42px;
21
+ top: 4px;
22
+ right: 0px;
23
+ &::after {
24
+ position: absolute;
25
+ content: "";
26
+ width: 42px;
27
+ height: 42px;
28
+ background: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='21' cy='21' r='20' stroke='%231E4391' stroke-width='2'/%3E%3C/svg%3E%0A") no-repeat,
29
+ url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 1C10.5523 1 11 1.44772 11 2V18C11 18.5523 10.5523 19 10 19C9.44772 19 9 18.5523 9 18V2C9 1.44772 9.44772 1 10 1Z' fill='%231E4391'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 10C1 9.44772 1.44772 9 2 9H18C18.5523 9 19 9.44772 19 10C19 10.5523 18.5523 11 18 11H2C1.44772 11 1 10.5523 1 10Z' fill='%231E4391'/%3E%3C/svg%3E%0A") no-repeat;
30
+ background-position: 50%;
31
+ transition: all 0.2s;
32
+ }
33
+ }
34
+ &-input {
35
+ -webkit-appearance: none;
36
+ appearance: none;
37
+ position: absolute;
38
+ width: 0;
39
+ height: 0;
40
+ &:checked ~ .u-accordion-content {
41
+ max-height: 1000px;
42
+ transition: max-height 1s;
43
+ position: relative;
44
+ animation: 1s delay-elem;
45
+ overflow: auto;
46
+ margin-bottom: 14px;
47
+ }
48
+ &:checked ~ .u-accordion-toggle::after {
49
+ background: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='21' cy='21' r='20' stroke='%231E4391' stroke-width='2'/%3E%3C/svg%3E%0A") no-repeat,
50
+ url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 10C1 9.44772 1.44772 9 2 9H18C18.5523 9 19 9.44772 19 10C19 10.5523 18.5523 11 18 11H2C1.44772 11 1 10.5523 1 10Z' fill='%231E4391'/%3E%3C/svg%3E ") no-repeat;
51
+ background-position: 50%;
52
+ }
53
+ }
54
+ &-content {
55
+ max-height: 0;
56
+ transition: max-height 1s;
57
+ animation: 1s delay-elem-reverse;
58
+ }
59
+ }
60
+ @keyframes delay-elem {
61
+ 0% {
62
+ overflow: hidden;
63
+ }
64
+ 100% {
65
+ overflow: auto;
66
+ }
67
+ }
68
+ @keyframes delay-elem-reverse {
69
+ 0% {
70
+ margin-bottom: 14px;
71
+ }
72
+ 100% {
73
+ margin-bottom: 0px;
74
+ }
75
+ }
package/src/styles/components/airdatepicker.less ADDED
@@ -0,0 +1,211 @@
1
+ @import "../../main.less";
2
+
3
+ .air-datepicker {
4
+ margin-top: 2px;
5
+ border: 1px solid @clr-secondary-cold;
6
+ border-radius: @radius;
7
+ &.-inline- {
8
+ border: 1px solid @clr-secondary-cold;
9
+ }
10
+ &--navigation {
11
+
12
+ }
13
+ &-nav {
14
+ border: none;
15
+ &--action {
16
+ &:hover {
17
+ background-color: transparent;
18
+ svg {
19
+ path {
20
+ stroke: @clr-main-primary;
21
+ stroke-linecap: round;
22
+ stroke-linejoin: round;
23
+ }
24
+ }
25
+ }
26
+ svg {
27
+ path {
28
+ stroke: #545454;
29
+ stroke-linecap: round;
30
+ stroke-linejoin: round;
31
+ }
32
+ }
33
+ }
34
+ &--title {
35
+ padding: 0;
36
+ .h4;
37
+ color: @clr-main-dark;
38
+ &:hover {
39
+ background-color: transparent;
40
+ }
41
+ i {
42
+ color: @clr-main-dark;
43
+ margin-left: 7px;
44
+ }
45
+ }
46
+ }
47
+ &--content {
48
+
49
+ }
50
+ &-body {
51
+ &--day-names {
52
+ }
53
+ &--day-name {
54
+ height: 28px;
55
+ width: 28px;
56
+ color: @clr-secondary-cold;
57
+ .st;
58
+ }
59
+ &--cells {
60
+ &.-days- {
61
+ }
62
+ }
63
+ }
64
+ &-cell {
65
+ .st;
66
+ color: @clr-main-dark;
67
+ &.-day- {
68
+ margin: auto;
69
+ border-radius: 50%;
70
+ width: 28px;
71
+ height: 28px;
72
+ &.-current- {
73
+ color: @clr-main-primary;
74
+ &.-focus- {
75
+ color: @clr-main-primary;
76
+ &.-range-from- {
77
+ color: white;
78
+ }
79
+ &.-range-to- {
80
+ color: white;
81
+ }
82
+ }
83
+ }
84
+ &.-range-from- {
85
+ position: relative;
86
+ transform-style: preserve-3d;
87
+ &::after {
88
+ position: absolute;
89
+ content: "";
90
+ width: 20px;
91
+ height: 23px;
92
+ background-color: #E7F2FF;
93
+ right: -6px;
94
+ transform: translateZ(-1px);
95
+ }
96
+ }
97
+ &.-range-to- {
98
+ position: relative;
99
+ transform-style: preserve-3d;
100
+ background-color: @clr-main-danger;
101
+ &::after {
102
+ position: absolute;
103
+ content: "";
104
+ width: 14px;
105
+ height: 23px;
106
+ background-color: #E7F2FF;
107
+ left: 0;
108
+ transform: translateZ(-1px);
109
+ }
110
+ &.-range-from- {
111
+ border-radius: 50%;
112
+ }
113
+ }
114
+ &.-in-range- {
115
+ border-radius: 0;
116
+ background-color: transparent;
117
+ z-index: 10;
118
+ &::after {
119
+ position: absolute;
120
+ content: "";
121
+ width: 34px;
122
+ height: 23px;
123
+ background-color: #E7F2FF;
124
+ left: 0px;
125
+ transform: translateZ(-1px);
126
+ z-index: -1;
127
+ }
128
+ &:first-of-type {
129
+ &::after {
130
+ width: 50px;
131
+ }
132
+ }
133
+ }
134
+ &.-selected- {
135
+ background-color: @clr-main-primary;
136
+ }
137
+ &:nth-child(7n) {
138
+ &.-in-range- {
139
+ border-radius: 0;
140
+ background-color: transparent;
141
+ z-index: 10;
142
+ &::after {
143
+ position: absolute;
144
+ content: "";
145
+ width: 28px;
146
+ height: 23px;
147
+ background-color: #E7F2FF;
148
+ left: 0px;
149
+ transform: translateZ(-1px);
150
+ z-index: -1;
151
+ }
152
+ }
153
+ &.-range-from- {
154
+ position: relative;
155
+ transform-style: preserve-3d;
156
+ &::after {
157
+ position: absolute;
158
+ content: "";
159
+ width: 14px;
160
+ height: 23px;
161
+ background-color: #E7F2FF;
162
+ right: 0px;
163
+ transform: translateZ(-1px);
164
+ }
165
+ }
166
+ }
167
+ &.-range-from- {
168
+ background-color: @clr-main-primary;
169
+ color: white;
170
+ border: none;
171
+ }
172
+ &.-range-to- {
173
+ background-color: @clr-main-danger;
174
+ color: white;
175
+ border: none;
176
+ }
177
+ &.-focus- {
178
+ &.-selected- {
179
+ &.-range-from- {
180
+ &::after {
181
+ display: none;
182
+ }
183
+ }
184
+ }
185
+ }
186
+ &.-selected- {
187
+ &.-range-from- {
188
+ &.-range-to- {
189
+ background-color: @clr-main-primary;
190
+ &::after {
191
+ display: none;
192
+ }
193
+ }
194
+ }
195
+ &.air-datepicker-cell.-day-.-other-month- {
196
+ background-color: @clr-main-primary;
197
+ color: white;
198
+ }
199
+ }
200
+ &.-in-range-.air-datepicker-cell.-day-.-other-month- {
201
+ background-color: transparent;
202
+ }
203
+ &.-other-month- {
204
+ color: @clr-secondary-subject;
205
+ &:hover {
206
+ color: @clr-secondary-subject;
207
+ }
208
+ }
209
+ }
210
+ }
211
+ }
package/src/styles/components/input.less CHANGED
@@ -654,7 +654,10 @@
654
654
 
655
655
  .u-calendar {
656
656
  .input;
657
+ cursor: pointer;
657
658
  border: 1px solid @clr-border;
659
+ background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_7666_4018)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 4C2.89543 4 2 4.89543 2 6V16C2 17.1046 2.89543 18 4 18H16C17.1046 18 18 17.1046 18 16V6C18 4.89543 17.1046 4 16 4H4ZM0 6C0 3.79086 1.79086 2 4 2H16C18.2091 2 20 3.79086 20 6V16C20 18.2091 18.2091 20 16 20H4C1.79086 20 0 18.2091 0 16V6Z' fill='%231E4391'/%3E%3Cpath d='M5 1C5 0.447715 5.44772 0 6 0C6.55228 0 7 0.447715 7 1V5C7 5.55228 6.55228 6 6 6C5.44772 6 5 5.55228 5 5V1Z' fill='%231E4391'/%3E%3Cpath d='M13 1C13 0.447715 13.4477 0 14 0C14.5523 0 15 0.447715 15 1V5C15 5.55228 14.5523 6 14 6C13.4477 6 13 5.55228 13 5V1Z' fill='%231E4391'/%3E%3Cpath d='M3 9C3 8.44772 3.44772 8 4 8H16C16.5523 8 17 8.44772 17 9C17 9.55228 16.5523 10 16 10H4C3.44772 10 3 9.55228 3 9Z' fill='%231E4391'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_7666_4018'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E ") no-repeat;
660
+ background-position: top 14px right 16px;
658
661
  &:hover, &.active {
659
662
  border: 1px solid @clr-border-active;
660
663
  }