@skyux/theme 11.0.0-alpha.1 → 11.0.0-alpha.10

package/css/sky.css

@@ -1,37 +1,30 @@
 @import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
-@import url("https://sky.blackbaudcdn.net/static/skyux-icons/7.3.0/assets/css/skyux-icons.min.css");
+@import url("https://sky.blackbaudcdn.net/static/skyux-icons/7.5.0/assets/css/skyux-icons.min.css");
 /*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */
 /* Document
    ========================================================================== */
 /**
  * 1. Correct the line height in all browsers.
- * 2. Prevent adjustments of font size after orientation changes in
- *    IE on Windows Phone and in iOS.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
  */
 html {
   line-height: 1.15; /* 1 */
-  -ms-text-size-adjust: 100%; /* 2 */
   -webkit-text-size-adjust: 100%; /* 2 */
 }
 
 /* Sections
    ========================================================================== */
 /**
- * Remove the margin in all browsers (opinionated).
+ * Remove the margin in all browsers.
  */
 body {
   margin: 0;
 }
 
 /**
- * Add the correct display in IE 9-.
+ * Render the `main` element consistently in IE.
  */
-article,
-aside,
-footer,
-header,
-nav,
-section {
+main {
   display: block;
 }
 
@@ -46,21 +39,6 @@ h1 {
 
 /* Grouping content
    ========================================================================== */
-/**
- * Add the correct display in IE 9-.
- */
-figcaption,
-figure {
-  display: block;
-}
-
-/**
- * Add the correct margin in IE 8.
- */
-figure {
-  margin: 1em 40px;
-}
-
 /**
  * 1. Add the correct box sizing in Firefox.
  * 2. Show the overflow in Edge and IE.
@@ -90,18 +68,16 @@ pre {
 /* Links
    ========================================================================== */
 /**
- * 1. Remove the gray background on active links in IE 10.
- * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
+ * Remove the gray background on active links in IE 10.
  */
 a {
-  background-color: transparent; /* 1 */
-  -webkit-text-decoration-skip: objects; /* 2 */
+  background-color: transparent;
 }
 
 /* Text-level semantics
    ========================================================================== */
 /**
- * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
+ * 1. Remove the bottom border in Chrome 57-
  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
  */
 abbr[title] {
@@ -110,14 +86,6 @@ abbr[title] {
   text-decoration: underline dotted; /* 2 */
 }
 
-/**
- * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
- */
-b,
-strong {
-  font-weight: inherit;
-}
-
 /**
  * Add the correct font weight in Chrome, Edge, and Safari.
  */
@@ -137,21 +105,6 @@ samp {
   font-size: 1em; /* 2 */
 }
 
-/**
- * Add the correct font style in Android 4.3-.
- */
-dfn {
-  font-style: italic;
-}
-
-/**
- * Add the correct background and color in IE 9-.
- */
-mark {
-  background-color: #ff0;
-  color: #000;
-}
-
 /**
  * Add the correct font size in all browsers.
  */
@@ -182,39 +135,16 @@ sup {
 /* Embedded content
    ========================================================================== */
 /**
- * Add the correct display in IE 9-.
- */
-audio,
-video {
-  display: inline-block;
-}
-
-/**
- * Add the correct display in iOS 4-7.
- */
-audio:not([controls]) {
-  display: none;
-  height: 0;
-}
-
-/**
- * Remove the border on images inside links in IE 10-.
+ * Remove the border on images inside links in IE 10.
  */
 img {
   border-style: none;
 }
 
-/**
- * Hide the overflow in IE.
- */
-svg:not(:root) {
-  overflow: hidden;
-}
-
 /* Forms
    ========================================================================== */
 /**
- * 1. Change the font styles in all browsers (opinionated).
+ * 1. Change the font styles in all browsers.
  * 2. Remove the margin in Firefox and Safari.
  */
 button,
@@ -222,7 +152,7 @@ input,
 optgroup,
 select,
 textarea {
-  font-family: sans-serif; /* 1 */
+  font-family: inherit; /* 1 */
   font-size: 100%; /* 1 */
   line-height: 1.15; /* 1 */
   margin: 0; /* 2 */
@@ -245,15 +175,13 @@ select { /* 1 */
 }
 
 /**
- * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
- *    controls in Android 4.
- * 2. Correct the inability to style clickable types in iOS and Safari.
+ * Correct the inability to style clickable types in iOS and Safari.
  */
 button,
-html [type=button],
+[type=button],
 [type=reset],
 [type=submit] {
-  -webkit-appearance: button; /* 2 */
+  -webkit-appearance: button;
 }
 
 button,
@@ -289,8 +217,8 @@ input {
 }
 
 /**
- * 1. Add the correct box sizing in IE 10-.
- * 2. Remove the padding in IE 10-.
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
  */
 [type=checkbox],
 [type=radio] {
@@ -314,10 +242,10 @@ input {
   -webkit-appearance: textfield; /* 1 */
   outline-offset: -2px; /* 2 */
   /**
-   * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
+   * Remove the inner padding in Chrome and Safari on macOS.
    */
 }
-[type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration {
+[type=search]::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
@@ -353,16 +281,14 @@ legend {
 }
 
 /**
- * 1. Add the correct display in IE 9-.
- * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
  */
 progress {
-  display: inline-block; /* 1 */
-  vertical-align: baseline; /* 2 */
+  vertical-align: baseline;
 }
 
 /**
- * Remove the default vertical scrollbar in IE.
+ * Remove the default vertical scrollbar in IE 10+.
  */
 textarea {
   overflow: auto;
@@ -371,7 +297,7 @@ textarea {
 /* Interactive
    ========================================================================== */
 /*
- * Add the correct display in Edge, IE, and Firefox.
+ * Add the correct display in Edge, IE 10+, and Firefox.
  */
 details {
   display: block;
@@ -384,22 +310,8 @@ summary {
   display: list-item;
 }
 
-/*
- * Add the correct display in IE 9-.
- */
-menu {
-  display: block;
-}
-
-/* Scripting
+/* Misc
    ========================================================================== */
-/**
- * Add the correct display in IE 9-.
- */
-canvas {
-  display: inline-block;
-}
-
 /**
  * Add the correct display in IE.
  */
@@ -407,10 +319,8 @@ template {
   display: none;
 }
 
-/* Hidden
-   ========================================================================== */
 /**
- * Add the correct display in IE 10-.
+ * Add the correct display in IE 10.
  */
 [hidden] {
   display: none;
@@ -994,7 +904,7 @@ a.sky-btn:hover {
 }
 
 .sky-form-group {
-  margin-bottom: var(--sky-compat-sky-form-group-margin-bottom, 0px);
+  margin-bottom: 0px;
 }
 
 input.ng-invalid.ng-touched,

package/css/themes/modern/styles.css

@@ -568,22 +568,22 @@
   opacity: 1;
 }
 
-.sky-theme-modern .sky-switch {
+:is(.sky-theme-modern .sky-switch) {
   cursor: pointer;
   display: inline-flex;
   position: relative;
 }
-.sky-theme-modern .sky-switch.sky-switch-disabled {
+:is(.sky-theme-modern .sky-switch).sky-switch-disabled {
   cursor: not-allowed;
 }
-.sky-theme-modern .sky-switch.sky-control-label-required .sky-switch-label {
+:is(.sky-theme-modern .sky-switch).sky-control-label-required .sky-switch-label {
   margin-right: 0;
 }
-.sky-theme-modern .sky-switch:hover .sky-switch-control {
+:is(.sky-theme-modern .sky-switch):hover .sky-switch-control {
   border-color: var(--sky-highlight-color-info);
   border-width: 2px;
 }
-.sky-theme-modern .sky-switch .sky-switch-input {
+:is(.sky-theme-modern .sky-switch) .sky-switch-input {
   border: 0;
   clip: rect(0 0 0 0);
   height: 1px;
@@ -595,45 +595,45 @@
   outline: 0;
   -webkit-appearance: none;
 }
-.sky-theme-modern .sky-switch .sky-switch-input.sky-switch-invalid + .sky-switch-control {
+: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;
 }
-.sky-theme-modern .sky-switch .sky-switch-input:checked:not(:disabled) + .sky-switch-control, .sky-theme-modern .sky-switch .sky-switch-input[type=checkbox]:indeterminate:not(:disabled) + .sky-switch-control {
+: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);
 }
-.sky-theme-modern .sky-switch .sky-switch-input:checked:not(:disabled) + .sky-switch-control.sky-switch-control-success, .sky-theme-modern .sky-switch .sky-switch-input[type=checkbox]:indeterminate:not(:disabled) + .sky-switch-control.sky-switch-control-success {
+: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;
 }
-.sky-theme-modern .sky-switch .sky-switch-input:checked:not(:disabled) + .sky-switch-control.sky-switch-control-warning, .sky-theme-modern .sky-switch .sky-switch-input[type=checkbox]:indeterminate:not(:disabled) + .sky-switch-control.sky-switch-control-warning {
+: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;
 }
-.sky-theme-modern .sky-switch .sky-switch-input:checked:not(:disabled) + .sky-switch-control.sky-switch-control-danger, .sky-theme-modern .sky-switch .sky-switch-input[type=checkbox]:indeterminate:not(:disabled) + .sky-switch-control.sky-switch-control-danger {
+: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;
 }
-.sky-theme-modern .sky-switch .sky-switch-input:disabled + .sky-switch-control {
+:is(.sky-theme-modern .sky-switch) .sky-switch-input:disabled + .sky-switch-control {
   background-color: var(--sky-background-color-disabled);
 }
-.sky-theme-modern .sky-switch .sky-switch-input:focus + .sky-switch-control {
+:is(.sky-theme-modern .sky-switch) .sky-switch-input:focus + .sky-switch-control {
   outline: thin dotted;
   outline: -webkit-focus-ring-color auto 5px;
 }
-.sky-theme-modern .sky-switch .sky-switch-input:not(:disabled).sky-switch-invalid + .sky-switch-control {
+: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 .sky-switch-input:not(:disabled):checked + .sky-switch-control, .sky-theme-modern .sky-switch .sky-switch-input:not(:disabled)[type=checkbox]:indeterminate + .sky-switch-control, .sky-theme-modern .sky-switch .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 .sky-switch-input:not(:disabled):focus + .sky-switch-control, .sky-theme-modern .sky-switch .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 .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 .sky-switch-control {
+: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);
@@ -650,17 +650,17 @@
   justify-content: center;
   transition: border-color 150ms, box-shadow 150ms, color 150ms;
 }
-.sky-theme-modern .sky-switch .sky-switch-control.sky-switch-control-icon {
+: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 .sky-switch-control::before {
+:is(.sky-theme-modern .sky-switch) .sky-switch-control::before {
   content: "";
 }
-.sky-theme-modern .sky-switch .sky-switch-label {
+:is(.sky-theme-modern .sky-switch) .sky-switch-label {
   line-height: var(--sky-switch-size);
   flex: 1 1 auto;
   width: 100%;
@@ -668,41 +668,41 @@
   min-width: 0;
 }
 
-.sky-theme-modern .sky-switch-icon-group .sky-switch-control-icon {
+:is(.sky-theme-modern .sky-switch-icon-group) .sky-switch-control-icon {
   margin-left: 0;
   margin-right: 0;
   border-radius: 0;
 }
-.sky-theme-modern .sky-switch-icon-group .sky-switch-control {
+: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;
 }
 
@@ -748,17 +748,17 @@
 }
 .sky-theme-modern h4,
 .sky-theme-modern .sky-font-heading-4 {
-  color: var(--sky-compat-theme-modern-heading-4-font-color, var(--sky-text-color-default));
+  color: var(--sky-text-color-default);
   font-size: 16px;
-  font-weight: var(--sky-compat-theme-modern-heading-4-font-weight, var(--sky-theme-modern-font-heading-4-weight));
-  text-transform: var(--sky-compat-theme-modern-heading-4-text-transform, none);
+  font-weight: var(--sky-theme-modern-font-heading-4-weight);
+  text-transform: none;
 }
 .sky-theme-modern h5,
 .sky-theme-modern .sky-font-heading-5 {
-  color: var(--sky-compat-theme-modern-heading-5-font-color, var(--sky-text-color-default));
+  color: var(--sky-text-color-default);
   font-size: 14px;
-  font-weight: var(--sky-compat-theme-modern-heading-5-font-weight, var(--sky-theme-modern-font-heading-5-weight));
-  text-transform: var(--sky-compat-theme-modern-heading-5-text-transform, none);
+  font-weight: var(--sky-theme-modern-font-heading-5-weight);
+  text-transform: none;
 }
 .sky-theme-modern p {
   line-height: 1.5;