urfu-ui-kit-vanilla 1.0.22 → 1.0.23

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 (6) hide show
  1. package/package.json +1 -1
  2. package/playground/main.ts +1 -2
  3. package/src/main.css +58 -0
  4. package/src/main.less +1 -0
  5. package/src/styles/components/airdatepicker.less +59 -0
  6. 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.23",
7
7
  "type": "module",
8
8
  "repository": {
9
9
  "type": "git",
package/playground/main.ts CHANGED
@@ -1,7 +1,6 @@
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,
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
@@ -16,6 +16,7 @@
16
16
  @import "styles/components/notification";
17
17
  @import "styles/components/preloader";
18
18
  @import "styles/components/table";
19
+ @import "styles/components/airdatepicker";
19
20
  @import "styles/special-classes/colors";
20
21
  @import "styles/special-classes/font-weight";
21
22
  @import "styles/special-classes/selectors";
package/src/styles/components/airdatepicker.less ADDED
@@ -0,0 +1,59 @@
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
+ }
19
+ svg {
20
+ path {
21
+ stroke: @clr-main-primary;
22
+ stroke-linecap: round;
23
+ stroke-linejoin: round;
24
+ }
25
+ }
26
+ }
27
+ &--title {
28
+ padding: 0;
29
+ .h4;
30
+ color: @clr-main-dark;
31
+ &:hover {
32
+ background-color: transparent;
33
+ }
34
+ i {
35
+ color: @clr-main-dark;
36
+ margin-left: 7px;
37
+ }
38
+ }
39
+ }
40
+ &--content {
41
+
42
+ }
43
+ &-body {
44
+ &--day-name {
45
+ color: @clr-secondary-subject;
46
+ .st;
47
+ }
48
+ }
49
+ &-cell {
50
+ .st;
51
+ color: @clr-main-dark;
52
+ &.-day- {
53
+ border-radius: 50%;
54
+ &.-selected- {
55
+ background-color: @clr-main-primary;
56
+ }
57
+ }
58
+ }
59
+ }
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
  }