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

package/lib/collection/components/duet-choice/duet-choice.css

@@ -4,22 +4,22 @@
   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 {
   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-right: 16px !important;
   margin-bottom: 12px !important;
   display: inline-flex;
@@ -82,11 +82,11 @@
   font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 1rem;
   font-weight: 400;
-  -webkit-hyphens: auto;
-  hyphens: auto;
   line-height: 1.1;
   color: rgb(8, 42, 77) !important;
   text-align: left;
+  -webkit-hyphens: auto;
+  hyphens: auto;
   background: rgb(255, 255, 255);
   border-width: 1px;
   border-radius: 8px;
@@ -120,8 +120,8 @@
   padding: calc(1rem + 1px);
   font-size: 1rem;
   font-weight: 600;
-  text-decoration: none;
   word-break: break-word;
+  text-decoration: none;
   cursor: pointer;
   border: 1px solid rgb(212, 223, 229);
   border-radius: 8px;
@@ -186,13 +186,14 @@
 :host(:not(.no-hover):not(.disabled):hover) > .duet-choice-card-flextainer .duet-choice-label:not(.checked) .duet-checkmark-container {
   border-color: rgb(127, 150, 165);
 }
-.duet-theme-turva :host(:not(.no-hover):not(.disabled):hover) > .duet-choice-card-flextainer .duet-choice-label:not(.checked) {
+
+:host(.duet-theme-turva:not(.no-hover):not(.disabled):hover) > .duet-choice-card-flextainer .duet-choice-label:not(.checked) {
   border-color: rgb(23, 28, 58);
 }
-.duet-theme-turva :host(:not(.no-hover):not(.disabled):hover) > .duet-choice-card-flextainer .duet-choice-label:not(.checked) .duet-checkmark-container {
+:host(.duet-theme-turva:not(.no-hover):not(.disabled):hover) > .duet-choice-card-flextainer .duet-choice-label:not(.checked) .duet-checkmark-container {
   border-color: rgb(143, 147, 158);
 }
-.duet-theme-turva .info :host(:not(.no-hover):not(.disabled):hover) > .duet-choice-card-flextainer .duet-choice-label:not(.checked) {
+.info :host(.duet-theme-turva:not(.no-hover):not(.disabled):hover) {
   border-color: rgb(143, 147, 158);
 }
 
@@ -204,20 +205,13 @@ input:focus {
   outline: 0;
 }
 
-:host(.user-is-tabbing) .checked.focus.duet-choice-label {
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3);
-}
-
-:host(.user-is-tabbing) :not(.checked).focus.duet-choice-label {
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+.checked.focus.duet-choice-label {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
 }
-
-:host(.user-is-tabbing) .duet-theme-turva .checked.focus.duet-choice-label {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2);
-}
-
-:host(.user-is-tabbing) .duet-theme-turva :not(.checked).focus.duet-choice-label {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+.duet-theme-turva .checked.focus.duet-choice-label, .checked.focus.duet-choice-label.duet-theme-turva, .duet-theme-turva2 .checked.focus.duet-choice-label, .checked.focus.duet-choice-label.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 
 .disabled.duet-choice-label {
@@ -236,7 +230,7 @@ input:focus {
   border-color: rgb(98, 121, 138) !important;
 }
 .disabled.duet-choice-label:hover, .disabled.duet-choice-label:active, .disabled.duet-choice-label:focus {
-  box-shadow: none !important;
+  outline: none !important;
   opacity: 1 !important;
   transition: none !important;
 }
@@ -435,9 +429,13 @@ label.disabled .duet-checkmark-container {
 }
 
 :host(.user-is-tabbing) .duet-choice-info-container:focus {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
   display: block;
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+}
+.duet-theme-turva :host(.user-is-tabbing) .duet-choice-info-container:focus, :host(.user-is-tabbing) .duet-choice-info-container:focus.duet-theme-turva, .duet-theme-turva2 :host(.user-is-tabbing) .duet-choice-info-container:focus, :host(.user-is-tabbing) .duet-choice-info-container:focus.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 
 :host(.disabled) .duet-choice-card-collapsible {
@@ -473,14 +471,25 @@ label.disabled .duet-checkmark-container {
   justify-content: center;
   width: 57.6px;
   padding-top: 1.25rem;
+  -webkit-appearance: none;
+  appearance: none;
   cursor: pointer;
   background: rgb(255, 255, 255);
   border: 1px solid rgb(212, 223, 229);
   border-left: 0 none;
   border-top-right-radius: 8px;
   border-bottom-right-radius: 8px;
-  -webkit-appearance: none;
-  appearance: none;
+}
+.duet-choice-info-toggle:focus {
+  outline: 0;
+}
+:host(.user-is-tabbing) .duet-choice-info-toggle:focus {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
+}
+.duet-theme-turva :host(.user-is-tabbing) .duet-choice-info-toggle:focus, :host(.user-is-tabbing) .duet-choice-info-toggle:focus.duet-theme-turva, .duet-theme-turva2 :host(.user-is-tabbing) .duet-choice-info-toggle:focus, :host(.user-is-tabbing) .duet-choice-info-toggle:focus.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-choice-info-toggle[aria-expanded=true] {
   background: rgb(245, 248, 250);
@@ -505,15 +514,6 @@ label.disabled .duet-checkmark-container {
 .duet-choice-info-toggle[disabled].duet-theme-turva .duet-choice-info-icon {
   color: rgb(143, 147, 158) !important;
 }
-.duet-choice-info-toggle:focus {
-  outline: none;
-}
-:host(.user-is-tabbing) .duet-choice-info-toggle:focus {
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
-}
-:host(.user-is-tabbing) .duet-theme-turva .duet-choice-info-toggle:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
-}
 .checked + .duet-choice-info-toggle {
   border-left-color: rgb(0, 119, 179) !important;
 }
@@ -535,9 +535,61 @@ label.disabled .duet-checkmark-container {
 }
 
 .duet-choice-input,
-*::slotted([slot=choiceradioinput]) {
+*::slotted([slot=choiceinput]) {
   position: absolute !important;
   width: 100%;
   height: 100%;
   opacity: 0;
+}
+
+:host(.duet-theme-turva2) .duet-theme-turva .duet-choice-card {
+  color: rgb(23, 42, 59) !important;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-choice-label {
+  border-color: rgb(178, 194, 205);
+}
+.info :host(.duet-theme-turva2) .duet-theme-turva .duet-choice-label {
+  border-color: rgb(178, 194, 205);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .checked > .duet-choice-label {
+  background: rgb(253, 247, 242);
+  border-color: rgb(23, 42, 59) !important;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .checked > .duet-choice-label .duet-checkmark-container {
+  border-color: rgb(230, 23, 64);
+}
+.duet-choice-label :host(.duet-theme-turva2) .duet-theme-turva .checked > .duet-choice-label .duet-checkmark-container {
+  background: rgb(23, 42, 59);
+  border-color: rgb(23, 42, 59) !important;
+}
+:host(.duet-theme-turva2) .duet-theme-turva.duet-choice-card-info, :host(.duet-theme-turva2) .duet-theme-turva.duet-choice-card-collapsible {
+  color: rgb(23, 42, 59);
+  border-color: rgb(23, 42, 59);
+}
+:host(.duet-theme-turva2) .duet-theme-turva.duet-choice-card-collapsible {
+  border-color: rgb(178, 194, 205);
+}
+:host(.duet-theme-turva2) .duet-theme-turva.duet-choice-card-collapsible.checked {
+  border-color: rgb(23, 42, 59);
+}
+:host(.duet-theme-turva2) .duet-theme-turva.duet-choice-card-info {
+  background: rgb(253, 247, 242);
+  border-color: rgb(178, 194, 205);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-checkmark-container {
+  border-color: rgb(120, 145, 164);
+}
+:host(.duet-theme-turva2) .duet-theme-turva.duet-choice-info-toggle {
+  border-color: rgb(178, 194, 205);
+}
+:host(.duet-theme-turva2) .duet-theme-turva.duet-choice-info-toggle[aria-expanded=true] {
+  background: rgb(253, 247, 242);
+  border-bottom-color: transparent;
+}
+
+:host(.duet-theme-turva2:not(.no-hover):not(.disabled):hover) > .duet-theme-turva.duet-choice-card-flextainer .duet-choice-label:not(.checked) {
+  border-color: rgb(23, 42, 59);
+}
+:host(.duet-theme-turva2:not(.no-hover):not(.disabled):hover) > .duet-theme-turva.duet-choice-card-flextainer .duet-choice-label:not(.checked) .duet-checkmark-container {
+  border-color: rgb(120, 145, 164);
 }