urfu-ui-kit-vanilla 1.0.24 → 1.0.26

package/package.json

@@ -3,7 +3,7 @@
   "description": "UrFU UI-Kit for Vanilla Web",
   "license": "UNLICENSED",
   "private": false,
-  "version": "1.0.24",
+  "version": "1.0.26",
   "type": "module",
   "repository": {
     "type": "git",

package/src/main.css

@@ -1349,6 +1349,77 @@
 .u-checkbox.u-checkbox-text-right div {
   margin-right: 12px;
 }
+.u-accordion {
+  border-left: 4px solid #748AB9;
+  padding-left: 20px;
+  position: relative;
+  overflow: hidden;
+}
+.u-accordion-title {
+  display: block;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 22.4px;
+  color: #1E4391;
+  padding: 14px 0;
+}
+.u-accordion-toggle {
+  cursor: pointer;
+  position: absolute;
+  width: 42px;
+  height: 42px;
+  top: 4px;
+  right: 0px;
+}
+.u-accordion-toggle::after {
+  position: absolute;
+  content: "";
+  width: 42px;
+  height: 42px;
+  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, 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;
+  background-position: 50%;
+  transition: all 0.2s;
+}
+.u-accordion-input {
+  -webkit-appearance: none;
+  appearance: none;
+  position: absolute;
+  width: 0;
+  height: 0;
+}
+.u-accordion-input:checked ~ .u-accordion-content {
+  max-height: 1000px;
+  transition: max-height 1s;
+  position: relative;
+  animation: 1s delay-elem;
+  overflow: auto;
+  margin-bottom: 14px;
+}
+.u-accordion-input:checked ~ .u-accordion-toggle::after {
+  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, 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;
+  background-position: 50%;
+}
+.u-accordion-content {
+  max-height: 0;
+  transition: max-height 1s;
+  animation: 1s delay-elem-reverse;
+}
+@keyframes delay-elem {
+  0% {
+    overflow: hidden;
+  }
+  100% {
+    overflow: auto;
+  }
+}
+@keyframes delay-elem-reverse {
+  0% {
+    margin-bottom: 14px;
+  }
+  100% {
+    margin-bottom: 0px;
+  }
+}
 .u-tab {
   cursor: pointer;
   height: 48px;
@@ -2037,11 +2108,16 @@
 .air-datepicker-nav--action:hover {
   background-color: transparent;
 }
-.air-datepicker-nav--action svg path {
+.air-datepicker-nav--action:hover svg path {
   stroke: #1E4391;
   stroke-linecap: round;
   stroke-linejoin: round;
 }
+.air-datepicker-nav--action svg path {
+  stroke: #545454;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
 .air-datepicker-nav--title {
   padding: 0;
   font-weight: 600;
@@ -2057,7 +2133,9 @@
   margin-left: 7px;
 }
 .air-datepicker-body--day-name {
-  color: #A7A7A7;
+  height: 28px;
+  width: 28px;
+  color: #748AB9;
   /*simple text*/
   /*simple text*/
   font-weight: 400;
@@ -2073,11 +2151,134 @@
   color: #222222;
 }
 .air-datepicker-cell.-day- {
+  margin: auto;
   border-radius: 50%;
+  width: 28px;
+  height: 28px;
+}
+.air-datepicker-cell.-day-.-current- {
+  color: #1E4391;
+}
+.air-datepicker-cell.-day-.-current-.-focus- {
+  color: #1E4391;
+}
+.air-datepicker-cell.-day-.-current-.-focus-.-range-from- {
+  color: white;
+}
+.air-datepicker-cell.-day-.-current-.-focus-.-range-to- {
+  color: white;
+}
+.air-datepicker-cell.-day-.-range-from- {
+  position: relative;
+  transform-style: preserve-3d;
+}
+.air-datepicker-cell.-day-.-range-from-::after {
+  position: absolute;
+  content: "";
+  width: 20px;
+  height: 23px;
+  background-color: #E7F2FF;
+  right: -6px;
+  transform: translateZ(-1px);
+}
+.air-datepicker-cell.-day-.-range-to- {
+  position: relative;
+  transform-style: preserve-3d;
+  background-color: #EF302B;
+}
+.air-datepicker-cell.-day-.-range-to-::after {
+  position: absolute;
+  content: "";
+  width: 14px;
+  height: 23px;
+  background-color: #E7F2FF;
+  left: 0;
+  transform: translateZ(-1px);
+}
+.air-datepicker-cell.-day-.-range-to-.-range-from- {
+  border-radius: 50%;
+}
+.air-datepicker-cell.-day-.-in-range- {
+  border-radius: 0;
+  background-color: transparent;
+  z-index: 10;
+}
+.air-datepicker-cell.-day-.-in-range-::after {
+  position: absolute;
+  content: "";
+  width: 34px;
+  height: 23px;
+  background-color: #E7F2FF;
+  left: 0px;
+  transform: translateZ(-1px);
+  z-index: -1;
+}
+.air-datepicker-cell.-day-.-in-range-:first-of-type::after {
+  width: 50px;
 }
 .air-datepicker-cell.-day-.-selected- {
   background-color: #1E4391;
 }
+.air-datepicker-cell.-day-:nth-child(7n).-in-range- {
+  border-radius: 0;
+  background-color: transparent;
+  z-index: 10;
+}
+.air-datepicker-cell.-day-:nth-child(7n).-in-range-::after {
+  position: absolute;
+  content: "";
+  width: 28px;
+  height: 23px;
+  background-color: #E7F2FF;
+  left: 0px;
+  transform: translateZ(-1px);
+  z-index: -1;
+}
+.air-datepicker-cell.-day-:nth-child(7n).-range-from- {
+  position: relative;
+  transform-style: preserve-3d;
+}
+.air-datepicker-cell.-day-:nth-child(7n).-range-from-::after {
+  position: absolute;
+  content: "";
+  width: 14px;
+  height: 23px;
+  background-color: #E7F2FF;
+  right: 0px;
+  transform: translateZ(-1px);
+}
+.air-datepicker-cell.-day-.-range-from- {
+  background-color: #1E4391;
+  color: white;
+  border: none;
+}
+.air-datepicker-cell.-day-.-range-to- {
+  background-color: #EF302B;
+  color: white;
+  border: none;
+}
+.air-datepicker-cell.-day-.-focus-.-selected-.-range-from-::after {
+  display: none;
+}
+.air-datepicker-cell.-day-.-selected-.-range-from-.-range-to- {
+  background-color: #1E4391;
+}
+.air-datepicker-cell.-day-.-selected-.-range-from-.-range-to-::after {
+  display: none;
+}
+.air-datepicker-cell.-day-.-selected-.air-datepicker-cell.-day-.-other-month- {
+  background-color: #1E4391;
+  color: white;
+}
+.air-datepicker-cell.-day-.-in-range-.air-datepicker-cell.-day-.-other-month- {
+  background-color: transparent;
+}
+.air-datepicker-cell.-day-.-other-month- {
+  color: #A7A7A7;
+}
+.air-datepicker-cell.-day-.-other-month-:hover {
+  color: #A7A7A7;
+}
 .bg-gradient {
   background: linear-gradient(270deg, #FF2D7F -0.71%, #FB3727 47.63%, #FEEA0F 100%);
 }