@duetds/components 10.0.0-alpha.3 → 10.0.0-alpha.31

package/lib/collection/components/duet-date-picker/duet-date-picker.css

@@ -2,11 +2,11 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   margin-bottom: 12px !important;
   position: relative;
   z-index: 100;
@@ -72,11 +72,11 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
@@ -92,19 +92,19 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   margin-bottom: 12px !important;
   position: relative;
   display: inline-flex;
   width: 100%;
   min-width: calc(33.333% - 8px);
   max-width: 100%;
-  text-align: left;
   vertical-align: top;
+  text-align: left;
 }
 @media (min-width: 36em) {
   :host {
@@ -156,7 +156,8 @@
 }
 .duet-theme-turva .duet-date-button {
   color: rgb(23, 28, 58);
-  border-color: rgb(199, 202, 207);
+  border-color: rgb(143, 147, 158);
+  border-left-color: rgb(199, 202, 207);
 }
 .duet-date-button::before {
   position: absolute;
@@ -168,10 +169,12 @@
   background: linear-gradient(to left, rgba(181, 198, 208, 0.2) 0%, rgba(181, 198, 208, 0.2) 1px, rgba(181, 198, 208, 0.1) 1px, rgba(181, 198, 208, 0) 100%);
 }
 .duet-date-button:hover:not(:disabled) {
-  box-shadow: 0 0 0 1px #909599 !important;
+  outline: 2px solid;
+  outline-color: rgb(98, 121, 138);
+  outline-offset: -1px;
 }
-.duet-theme-turva .duet-date-button:hover:not(:disabled) {
-  box-shadow: 0 0 0 1px #747475 !important;
+.duet-theme-turva .duet-date-button:hover:not(:disabled), .duet-date-button:hover:not(:disabled).duet-theme-turva, .duet-theme-turva2 .duet-date-button:hover:not(:disabled), .duet-date-button:hover:not(:disabled).duet-theme-turva2 {
+  outline-color: rgb(120, 145, 164);
 }
 .duet-date-button:disabled {
   pointer-events: none;
@@ -197,13 +200,19 @@
 .duet-date-input-has-focus .duet-date-button, .duet-date-button:focus {
   height: 46px;
   color: rgb(0, 119, 179);
-  border-color: transparent;
-  outline: 0;
-  box-shadow: 0 0 0 2px #0077b3 !important;
 }
-.duet-theme-turva .duet-date-input-has-focus .duet-date-button, .duet-theme-turva .duet-date-button:focus {
+.duet-date-input-has-focus .duet-date-button:focus, .duet-date-button:focus:focus {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
+}
+.duet-theme-turva .duet-date-input-has-focus .duet-date-button:focus, .duet-date-input-has-focus .duet-date-button:focus.duet-theme-turva, .duet-theme-turva2 .duet-date-input-has-focus .duet-date-button:focus, .duet-date-input-has-focus .duet-date-button:focus.duet-theme-turva2, .duet-theme-turva .duet-date-button:focus:focus, .duet-date-button:focus:focus.duet-theme-turva, .duet-theme-turva2 .duet-date-button:focus:focus, .duet-date-button:focus:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(53, 79, 101, 0.8);
+}
+.duet-theme-turva.duet-date-input-has-focus .duet-date-button, .duet-theme-turva .duet-date-button:focus {
   color: rgb(23, 28, 58);
-  box-shadow: 0 0 0 2px #171c3a !important;
 }
 
 .input-error {
@@ -218,12 +227,12 @@
   left: 0;
   z-index: 900;
   display: flex;
-  width: 100%;
   visibility: hidden;
+  width: 100%;
   opacity: 0;
-  transition: transform 300ms ease, opacity 300ms ease, visibility 300ms ease;
   transform: scale(0.96) translateZ(0) translateY(-20px);
   transform-origin: top right;
+  transition: transform 300ms ease, opacity 300ms ease, visibility 300ms ease;
 }
 @media (min-width: 36em) {
   .duet-date-dialog.left {
@@ -238,16 +247,16 @@
     top: 0;
     right: 0;
     bottom: 0;
-    transition: opacity 400ms ease, visibility 400ms ease;
     transform: translateZ(0);
     transform-origin: bottom center;
+    transition: opacity 400ms ease, visibility 400ms ease;
   }
 }
 .duet-date-dialog.active {
   visibility: visible;
   opacity: 1;
-  transition-property: transform, opacity;
   transform: scale(1.0001) translateZ(0) translateY(0);
+  transition-property: transform, opacity;
 }
 @media (min-width: 36em) {
   .duet-date-dialog.error {
@@ -280,24 +289,24 @@
     bottom: 0;
     left: 0;
     z-index: 900;
+    visibility: hidden;
     max-width: none;
     min-height: 25em;
     padding: 0 8% 20px;
     margin: 0;
-    visibility: hidden;
     border: 0;
     border-radius: 0;
     border-top-left-radius: 4px;
     border-top-right-radius: 4px;
     opacity: 0;
-    transition: transform 400ms ease, opacity 400ms ease, visibility 400ms ease;
     transform: translateZ(0) translateY(100%);
+    transition: transform 400ms ease, opacity 400ms ease, visibility 400ms ease;
   }
   .active .duet-date-dialog-wrapper {
     visibility: visible;
     opacity: 1;
-    transition-property: transform, opacity;
     transform: translateZ(0) translateY(0);
+    transition-property: transform, opacity;
   }
 }
 
@@ -321,9 +330,9 @@
   font-size: 0.75rem;
   font-weight: 600;
   line-height: 1.25;
-  text-decoration: none;
   text-transform: uppercase;
   letter-spacing: 1px;
+  text-decoration: none;
 }
 .duet-date-table .duet-date-table-cell {
   text-align: center;
@@ -346,9 +355,9 @@
   font-weight: 400;
   font-variant-numeric: tabular-nums;
   line-height: 2.6 !important;
+  vertical-align: initial !important;
   color: rgb(8, 42, 77) !important;
   text-align: center;
-  vertical-align: initial !important;
   cursor: pointer;
   background: transparent !important;
   border-radius: 50% !important;
@@ -375,56 +384,62 @@
   background: rgb(255, 241, 241) !important;
   box-shadow: 0 0 0 1px #171c3a !important;
 }
-[aria-pressed=true] .duet-date-table-button, :focus .duet-date-table-button {
+.selected .duet-date-table-button, :focus .duet-date-table-button {
   color: rgb(255, 255, 255) !important;
-  background: rgb(0, 119, 179) !important;
   outline: 0;
+  background: rgb(0, 119, 179) !important;
 }
-.duet-theme-turva [aria-pressed=true] .duet-date-table-button, .duet-theme-turva :focus .duet-date-table-button {
+.duet-theme-turva .selected .duet-date-table-button, .duet-theme-turva :focus .duet-date-table-button {
   color: rgb(255, 255, 255) !important;
   background: rgb(198, 12, 48) !important;
 }
 .duet-date-table-button:active {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
   z-index: 200;
   color: rgb(255, 255, 255) !important;
   background: rgb(0, 119, 179) !important;
-  box-shadow: 0 0 5px 0 #0077b3 !important;
+}
+.duet-theme-turva .duet-date-table-button:active, .duet-date-table-button:active.duet-theme-turva, .duet-theme-turva2 .duet-date-table-button:active, .duet-date-table-button:active.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-theme-turva .duet-date-table-button:active {
   color: rgb(255, 255, 255) !important;
   background: rgb(198, 12, 48) !important;
-  box-shadow: 0 0 5px 0 #171c3a !important;
 }
 :focus .duet-date-table-button {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
   z-index: 200;
-  box-shadow: 0 0 5px 0 #0077b3 !important;
 }
-.duet-theme-turva :focus .duet-date-table-button {
-  box-shadow: 0 0 5px 0 #171c3a !important;
+.duet-theme-turva :focus .duet-date-table-button, :focus .duet-date-table-button.duet-theme-turva, .duet-theme-turva2 :focus .duet-date-table-button, :focus .duet-date-table-button.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-date-table-button.disabled {
   color: rgb(127, 150, 165) !important;
   cursor: default;
+  outline: none !important;
   background: transparent !important;
-  box-shadow: none !important;
 }
 .duet-theme-turva .duet-date-table-button.disabled {
   color: rgb(143, 147, 158) !important;
+  outline: none !important;
   background: transparent !important;
-  box-shadow: none !important;
 }
 .duet-date-table-button.outside {
   color: rgb(127, 150, 165) !important;
   pointer-events: none;
   cursor: default;
+  outline: none;
   background: rgb(245, 248, 250) !important;
-  box-shadow: none;
   opacity: 0.75;
 }
 .duet-theme-turva .duet-date-table-button.outside {
   color: rgb(143, 147, 158);
+  outline: none;
   background: rgb(245, 247, 250);
-  box-shadow: none;
 }
 
 .duet-date-dialog-header {
@@ -481,10 +496,12 @@
   opacity: 0;
 }
 .duet-date-dialog-select select:focus + .duet-date-dialog-select-label {
-  box-shadow: 0 0 0 2px #0077b3 !important;
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-date-dialog-select select:focus + .duet-date-dialog-select-label {
-  box-shadow: 0 0 0 2px #171c3a !important;
+.duet-theme-turva .duet-date-dialog-select select:focus + .duet-date-dialog-select-label, .duet-date-dialog-select select:focus + .duet-date-dialog-select-label.duet-theme-turva, .duet-theme-turva2 .duet-date-dialog-select select:focus + .duet-date-dialog-select-label, .duet-date-dialog-select select:focus + .duet-date-dialog-select-label.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 
 .duet-date-dialog-mobile-header {
@@ -537,11 +554,11 @@
   height: 24px !important;
   padding: 0 !important;
   color: rgb(8, 42, 77) !important;
+  -webkit-appearance: none;
+  appearance: none;
   cursor: pointer;
   background: rgb(245, 248, 250) !important;
   border-radius: 50%;
-  -webkit-appearance: none;
-  appearance: none;
 }
 @media (min-width: 36em) {
   .duet-date-picker-close {
@@ -558,14 +575,50 @@
   background: rgb(245, 247, 250) !important;
 }
 .duet-date-picker-close:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #0077b3 !important;
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
+}
+.duet-theme-turva .duet-date-picker-close:focus, .duet-date-picker-close:focus.duet-theme-turva, .duet-theme-turva2 .duet-date-picker-close:focus, .duet-date-picker-close:focus.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 @media (min-width: 36em) {
   .duet-date-picker-close:focus {
     opacity: 1;
   }
 }
-.duet-theme-turva .duet-date-picker-close:focus {
-  box-shadow: 0 0 0 2px #171c3a !important;
+
+:host(.duet-theme-turva2) .duet-theme-turva .duet-date-button {
+  color: rgb(23, 42, 59);
+}
+:host(.duet-theme-turva2) .duet-theme-turva.duet-date-input-has-focus :host(.duet-theme-turva2) .duet-theme-turva, :host(.duet-theme-turva2) .duet-theme-turva:focus {
+  color: rgb(23, 42, 59);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-date-table-button {
+  color: rgb(23, 42, 59) !important;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-date-table-button:hover:not(.disabled) {
+  background: rgb(251, 225, 209) !important;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-date-table-button.today {
+  background: rgb(253, 247, 242) !important;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-date-table-button:active {
+  color: rgb(255, 255, 255) !important;
+  background: rgb(230, 23, 64) !important;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-date-table-button.outside {
+  color: rgb(120, 145, 164) !important;
+  background: rgb(245, 246, 247) !important;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-date-table-button.disabled {
+  color: rgb(199, 202, 207) !important;
+}
+:host(.duet-theme-turva2) .duet-theme-turva [aria-pressed=true] .duet-date-table-button,
+:host(.duet-theme-turva2) .duet-theme-turva :focus .duet-date-table-button {
+  color: rgb(255, 255, 255) !important;
+  background: rgb(230, 23, 64) !important;
+}
+:host(.duet-theme-turva2) .duet-theme-turva.duet-date-table {
+  color: rgb(23, 42, 59);
 }