@skyux/theme 10.33.0 → 10.35.0

package/css/sky.css

@@ -1422,24 +1422,25 @@ select::-ms-expand {
   margin-bottom: 40px;
 }
 
-.sky-switch {
+.sky-switch:not(.sky-theme-modern *) {
   cursor: pointer;
   display: inline-flex;
   position: relative;
 }
-.sky-switch:hover .sky-switch-control {
-  border-color: var(--sky-highlight-color-info);
-  border-width: 2px;
-}
-
-.sky-switch-disabled {
+.sky-switch:not(.sky-theme-modern *).sky-switch-disabled {
   cursor: default;
 }
-.sky-switch-disabled input {
+.sky-switch:not(.sky-theme-modern *).sky-switch-disabled input {
   cursor: default;
 }
-
-.sky-switch-input {
+.sky-switch:not(.sky-theme-modern *).sky-control-label-required .sky-switch-label {
+  margin-right: 0;
+}
+.sky-switch:not(.sky-theme-modern *):hover .sky-switch-control {
+  border-color: var(--sky-highlight-color-info);
+  border-width: 2px;
+}
+.sky-switch:not(.sky-theme-modern *) .sky-switch-input {
   border: 0;
   clip: rect(0 0 0 0);
   height: 1px;
@@ -1451,37 +1452,36 @@ select::-ms-expand {
   outline: 0;
   -webkit-appearance: none;
 }
-.sky-switch-input.sky-switch-invalid + .sky-switch-control {
+.sky-switch:not(.sky-theme-modern *) .sky-switch-input.sky-switch-invalid + .sky-switch-control {
   box-shadow: 0 0 8px rgba(239, 64, 68, 0.6);
   border: 1px solid var(--sky-highlight-color-danger);
   outline: none;
 }
-.sky-switch-input:checked:not(:disabled) + .sky-switch-control, .sky-switch-input[type=checkbox]:indeterminate:not(:disabled) + .sky-switch-control {
+.sky-switch:not(.sky-theme-modern *) .sky-switch-input:checked:not(:disabled) + .sky-switch-control, .sky-switch:not(.sky-theme-modern *) .sky-switch-input[type=checkbox]:indeterminate:not(:disabled) + .sky-switch-control {
   background-color: var(--sky-background-color-input-selected);
   border-color: var(--sky-highlight-color-info);
   border-width: 2px;
 }
-.sky-switch-input:checked:not(:disabled) + .sky-switch-control.sky-switch-control-success, .sky-switch-input[type=checkbox]:indeterminate:not(:disabled) + .sky-switch-control.sky-switch-control-success {
+.sky-switch:not(.sky-theme-modern *) .sky-switch-input:checked:not(:disabled) + .sky-switch-control.sky-switch-control-success, .sky-switch:not(.sky-theme-modern *) .sky-switch-input[type=checkbox]:indeterminate:not(:disabled) + .sky-switch-control.sky-switch-control-success {
   background-color: #d2e8c0;
   border-color: var(--sky-highlight-color-success);
 }
-.sky-switch-input:checked:not(:disabled) + .sky-switch-control.sky-switch-control-warning, .sky-switch-input[type=checkbox]:indeterminate:not(:disabled) + .sky-switch-control.sky-switch-control-warning {
+.sky-switch:not(.sky-theme-modern *) .sky-switch-input:checked:not(:disabled) + .sky-switch-control.sky-switch-control-warning, .sky-switch:not(.sky-theme-modern *) .sky-switch-input[type=checkbox]:indeterminate:not(:disabled) + .sky-switch-control.sky-switch-control-warning {
   background-color: #ffeaca;
   border-color: var(--sky-highlight-color-warning);
 }
-.sky-switch-input:checked:not(:disabled) + .sky-switch-control.sky-switch-control-danger, .sky-switch-input[type=checkbox]:indeterminate:not(:disabled) + .sky-switch-control.sky-switch-control-danger {
+.sky-switch:not(.sky-theme-modern *) .sky-switch-input:checked:not(:disabled) + .sky-switch-control.sky-switch-control-danger, .sky-switch:not(.sky-theme-modern *) .sky-switch-input[type=checkbox]:indeterminate:not(:disabled) + .sky-switch-control.sky-switch-control-danger {
   background-color: #fac8bf;
   border-color: var(--sky-highlight-color-danger);
 }
-.sky-switch-input:disabled + .sky-switch-control {
+.sky-switch:not(.sky-theme-modern *) .sky-switch-input:disabled + .sky-switch-control {
   background-color: var(--sky-background-color-disabled);
 }
-.sky-switch-input:focus + .sky-switch-control {
+.sky-switch:not(.sky-theme-modern *) .sky-switch-input:focus + .sky-switch-control {
   outline: thin dotted;
   outline: -webkit-focus-ring-color auto 5px;
 }
-
-.sky-switch-control {
+.sky-switch:not(.sky-theme-modern *) .sky-switch-control {
   width: var(--sky-switch-size);
   max-width: var(--sky-switch-size);
   height: var(--sky-switch-size);
@@ -1497,18 +1497,17 @@ select::-ms-expand {
   align-items: center;
   justify-content: center;
 }
-.sky-switch-control.sky-switch-control-icon {
+.sky-switch:not(.sky-theme-modern *) .sky-switch-control.sky-switch-control-icon {
   max-width: none;
   width: 35px;
   height: 35px;
   flex: 1 0 35px;
   font-size: 18px;
 }
-.sky-switch-control::before {
+.sky-switch:not(.sky-theme-modern *) .sky-switch-control::before {
   content: "";
 }
-
-.sky-switch-label {
+.sky-switch:not(.sky-theme-modern *) .sky-switch-label {
   line-height: var(--sky-switch-size);
   flex: 1 1 auto;
   width: 100%;
@@ -1516,22 +1515,18 @@ select::-ms-expand {
   min-width: 0;
 }
 
-.sky-control-label-required .sky-switch-label {
-  margin-right: 0;
-}
-
-.sky-switch-icon-group .sky-switch-control-icon {
+.sky-switch-icon-group:not(.sky-theme-modern *) .sky-switch-control-icon {
   margin-left: 0;
   margin-right: 0;
   border-radius: 0;
 }
-.sky-switch-icon-group sky-radio:first-of-type .sky-switch-control-icon,
-.sky-switch-icon-group sky-checkbox:first-of-type .sky-switch-control-icon {
+.sky-switch-icon-group:not(.sky-theme-modern *) sky-radio:first-of-type .sky-switch-control-icon,
+.sky-switch-icon-group:not(.sky-theme-modern *) sky-checkbox:first-of-type .sky-switch-control-icon {
   border-top-left-radius: 3px;
   border-bottom-left-radius: 3px;
 }
-.sky-switch-icon-group sky-radio:last-of-type .sky-switch-control-icon,
-.sky-switch-icon-group sky-checkbox:last-of-type .sky-switch-control-icon {
+.sky-switch-icon-group:not(.sky-theme-modern *) sky-radio:last-of-type .sky-switch-control-icon,
+.sky-switch-icon-group:not(.sky-theme-modern *) sky-checkbox:last-of-type .sky-switch-control-icon {
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }

package/css/themes/modern/styles.css

@@ -568,62 +568,144 @@
   opacity: 1;
 }
 
-.sky-theme-modern .sky-switch-input:not(:disabled).sky-switch-invalid + .sky-switch-control {
+:is(.sky-theme-modern .sky-switch) {
+  cursor: pointer;
+  display: inline-flex;
+  position: relative;
+}
+:is(.sky-theme-modern .sky-switch).sky-switch-disabled {
+  cursor: not-allowed;
+}
+:is(.sky-theme-modern .sky-switch).sky-control-label-required .sky-switch-label {
+  margin-right: 0;
+}
+:is(.sky-theme-modern .sky-switch):hover .sky-switch-control {
+  border-color: var(--sky-highlight-color-info);
+  border-width: 2px;
+}
+:is(.sky-theme-modern .sky-switch) .sky-switch-input {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  outline: 0;
+  -webkit-appearance: none;
+}
+:is(.sky-theme-modern .sky-switch) .sky-switch-input.sky-switch-invalid + .sky-switch-control {
+  box-shadow: 0 0 8px rgba(239, 64, 68, 0.6);
+  border: 1px solid var(--sky-highlight-color-danger);
+  outline: none;
+}
+:is(.sky-theme-modern .sky-switch) .sky-switch-input:checked:not(:disabled) + .sky-switch-control, :is(.sky-theme-modern .sky-switch) .sky-switch-input[type=checkbox]:indeterminate:not(:disabled) + .sky-switch-control {
+  background-color: var(--sky-background-color-input-selected);
+}
+:is(.sky-theme-modern .sky-switch) .sky-switch-input:checked:not(:disabled) + .sky-switch-control.sky-switch-control-success, :is(.sky-theme-modern .sky-switch) .sky-switch-input[type=checkbox]:indeterminate:not(:disabled) + .sky-switch-control.sky-switch-control-success {
+  background-color: #d2e8c0;
+}
+:is(.sky-theme-modern .sky-switch) .sky-switch-input:checked:not(:disabled) + .sky-switch-control.sky-switch-control-warning, :is(.sky-theme-modern .sky-switch) .sky-switch-input[type=checkbox]:indeterminate:not(:disabled) + .sky-switch-control.sky-switch-control-warning {
+  background-color: #ffeaca;
+}
+:is(.sky-theme-modern .sky-switch) .sky-switch-input:checked:not(:disabled) + .sky-switch-control.sky-switch-control-danger, :is(.sky-theme-modern .sky-switch) .sky-switch-input[type=checkbox]:indeterminate:not(:disabled) + .sky-switch-control.sky-switch-control-danger {
+  background-color: #fac8bf;
+}
+:is(.sky-theme-modern .sky-switch) .sky-switch-input:disabled + .sky-switch-control {
+  background-color: var(--sky-background-color-disabled);
+}
+:is(.sky-theme-modern .sky-switch) .sky-switch-input:focus + .sky-switch-control {
+  outline: thin dotted;
+  outline: -webkit-focus-ring-color auto 5px;
+}
+:is(.sky-theme-modern .sky-switch) .sky-switch-input:not(:disabled).sky-switch-invalid + .sky-switch-control {
   border: solid 2px var(--sky-highlight-color-danger);
   box-shadow: none;
 }
-.sky-theme-modern .sky-switch-input:not(:disabled):checked + .sky-switch-control, .sky-theme-modern .sky-switch-input:not(:disabled)[type=checkbox]:indeterminate + .sky-switch-control, .sky-theme-modern .sky-switch-input:not(:disabled):hover + .sky-switch-control {
+:is(.sky-theme-modern .sky-switch) .sky-switch-input:not(:disabled):checked + .sky-switch-control, :is(.sky-theme-modern .sky-switch) .sky-switch-input:not(:disabled)[type=checkbox]:indeterminate + .sky-switch-control, :is(.sky-theme-modern .sky-switch) .sky-switch-input:not(:disabled):hover + .sky-switch-control {
   border: solid 1px var(--sky-background-color-primary-dark);
 }
-.sky-theme-modern .sky-switch-input:not(:disabled):focus + .sky-switch-control, .sky-theme-modern .sky-switch-input:not(:disabled):active + .sky-switch-control {
+:is(.sky-theme-modern .sky-switch) .sky-switch-input:not(:disabled):focus + .sky-switch-control, :is(.sky-theme-modern .sky-switch) .sky-switch-input:not(:disabled):active + .sky-switch-control {
   border: solid 2px var(--sky-background-color-primary-dark);
 }
-.sky-theme-modern .sky-switch-input:not(:disabled):focus:not(:active) + .sky-switch-control {
+:is(.sky-theme-modern .sky-switch) .sky-switch-input:not(:disabled):focus:not(:active) + .sky-switch-control {
   box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.3);
   outline: none;
 }
-.sky-theme-modern .sky-switch-control {
-  transition: border-color 150ms, box-shadow 150ms, color 150ms;
+:is(.sky-theme-modern .sky-switch) .sky-switch-control {
+  width: var(--sky-switch-size);
+  max-width: var(--sky-switch-size);
+  height: var(--sky-switch-size);
+  flex: 1 0 var(--sky-switch-size);
+  margin: 0 var(--sky-switch-margin) auto auto;
+  display: inline-flex;
+  position: relative;
   border: 1px solid var(--sky-border-color-neutral-medium-dark);
+  background-color: #ffffff;
+  color: var(--sky-text-color-default);
+  text-align: center;
+  line-height: 1;
+  align-items: center;
+  justify-content: center;
+  transition: border-color 150ms, box-shadow 150ms, color 150ms;
 }
-.sky-theme-modern .sky-switch-input:disabled + .sky-switch-control {
-  background-color: #ededee;
+:is(.sky-theme-modern .sky-switch) .sky-switch-control.sky-switch-control-icon {
+  max-width: none;
+  width: 35px;
+  height: 35px;
+  flex: 1 0 35px;
+  font-size: 18px;
 }
-.sky-theme-modern .sky-switch-disabled {
-  cursor: not-allowed;
+:is(.sky-theme-modern .sky-switch) .sky-switch-control::before {
+  content: "";
 }
-.sky-theme-modern .sky-switch-icon-group .sky-switch-control {
+:is(.sky-theme-modern .sky-switch) .sky-switch-label {
+  line-height: var(--sky-switch-size);
+  flex: 1 1 auto;
+  width: 100%;
+  margin-right: 10px;
+  min-width: 0;
+}
+
+:is(.sky-theme-modern .sky-switch-icon-group) .sky-switch-control-icon {
+  margin-left: 0;
+  margin-right: 0;
+  border-radius: 0;
+}
+:is(.sky-theme-modern .sky-switch-icon-group) .sky-switch-control {
   background-color: transparent;
 }
-.sky-theme-modern .sky-switch-icon-group .sky-switch-input:checked + .sky-switch-control, .sky-theme-modern .sky-switch-icon-group .sky-switch-input[type=checkbox]:indeterminate + .sky-switch-control {
+:is(.sky-theme-modern .sky-switch-icon-group) .sky-switch-input:checked + .sky-switch-control, :is(.sky-theme-modern .sky-switch-icon-group) .sky-switch-input[type=checkbox]:indeterminate + .sky-switch-control {
   background-color: var(--sky-background-color-input-selected);
 }
-.sky-theme-modern .sky-switch-icon-group .sky-switch-input:disabled + .sky-switch-control {
+:is(.sky-theme-modern .sky-switch-icon-group) .sky-switch-input:disabled + .sky-switch-control {
   background-color: #ededee;
   border: none;
   color: var(--sky-text-color-deemphasized);
 }
-.sky-theme-modern .sky-switch-icon-group .sky-switch-input:checked + .sky-switch-control, .sky-theme-modern .sky-switch-icon-group .sky-switch-input:disabled:checked + .sky-switch-control, .sky-theme-modern .sky-switch-icon-group .sky-switch-input[type=checkbox]:indeterminate + .sky-switch-control, .sky-theme-modern .sky-switch-icon-group .sky-switch-input[type=checkbox]:disabled:indeterminate + .sky-switch-control {
+:is(.sky-theme-modern .sky-switch-icon-group) .sky-switch-input:checked + .sky-switch-control, :is(.sky-theme-modern .sky-switch-icon-group) .sky-switch-input:disabled:checked + .sky-switch-control, :is(.sky-theme-modern .sky-switch-icon-group) .sky-switch-input[type=checkbox]:indeterminate + .sky-switch-control, :is(.sky-theme-modern .sky-switch-icon-group) .sky-switch-input[type=checkbox]:disabled:indeterminate + .sky-switch-control {
   color: var(--sky-background-color-primary-dark);
 }
-.sky-theme-modern .sky-switch-icon-group .sky-switch-control {
+:is(.sky-theme-modern .sky-switch-icon-group) .sky-switch-control {
   border: none;
   border-radius: 6px;
 }
-.sky-theme-modern .sky-switch-icon-group .sky-switch-control.sky-switch-control-icon {
+:is(.sky-theme-modern .sky-switch-icon-group) .sky-switch-control.sky-switch-control-icon {
   font-size: 20px;
   height: 40px;
   width: 40px;
 }
-.sky-theme-modern .sky-switch-icon-group sky-checkbox .sky-switch-control-icon {
+:is(.sky-theme-modern .sky-switch-icon-group) sky-checkbox .sky-switch-control-icon {
   margin-right: 10px;
 }
-.sky-theme-modern .sky-switch-icon-group sky-checkbox:last-of-type .sky-switch-control-icon {
+:is(.sky-theme-modern .sky-switch-icon-group) sky-checkbox:last-of-type .sky-switch-control-icon {
   margin-right: 0;
 }
-.sky-theme-modern .sky-switch-icon-group sky-radio .sky-switch-control-icon {
+:is(.sky-theme-modern .sky-switch-icon-group) sky-radio .sky-switch-control-icon {
   border-radius: 6px;
 }
+
 .sky-theme-modern.sky-theme-mode-dark .sky-switch-input:disabled + .sky-switch-control {
   background-color: #232427;
   border-color: #686c73;