@skyux/theme 11.11.2 → 11.13.0

package/css/sky.css

@@ -874,6 +874,15 @@ a.sky-btn:hover {
   font-weight: 600;
   src: url("https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-CondSemibold.woff") format("woff");
 }
+.sky-form-control:not(.sky-theme-modern *) {
+  --sky-override-form-control-color: var(--sky-text-color-default);
+}
+
+.sky-control-label-required:not(.sky-theme-modern *) {
+  --sky-override-required-color: var(--sky-highlight-color-danger);
+  --sky-override-required-space: var(--sky-padding-half);
+}
+
 .sky-form-control {
   width: 100%;
   padding: 6px 12px;
@@ -883,7 +892,7 @@ a.sky-btn:hover {
   border-right: 1px solid #cdcfd2;
   line-height: 1.428571429;
   font-size: 15px;
-  color: var(--sky-text-color-default);
+  color: var(--sky-override-form-control-color, var(--sky-color-text-default));
 }
 .sky-form-control:not([type=range]):not([type=radio]):not([type=checkbox]):not(select) {
   /* Remove device-specific styles */
@@ -938,8 +947,8 @@ textarea.ng-invalid.ng-touched {
   /* TODO: remove this fallback `content` line, once support for content alt text is added to firefox & safari */
   content: "*";
   content: "*"/"";
-  color: var(--sky-highlight-color-danger);
-  padding-left: 5px;
+  color: var(--sky-override-required-color, var(--sky-color-text-danger));
+  padding-left: var(--sky-override-required-space, var(--sky-space-gap-label-s));
 }
 
 .sky-control-help-container:not(:empty):not(.sky-theme-modern *) {
@@ -1024,6 +1033,9 @@ select::-ms-expand {
   --sky-layout-host-links-spacing: var(--sky-margin-stacked-xl)
     var(--sky-margin-inline-sm);
 }
+.sky-layout-host-blocks .sky-margin-stacked-xl:empty, .sky-layout-host-list .sky-margin-stacked-xl:empty, .sky-layout-host-tabs .sky-margin-stacked-xl:empty {
+  margin-bottom: 0;
+}
 .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links), .sky-layout-host-list:has(> sky-page-content):has(> sky-page-links), .sky-layout-host-tabs:has(> sky-page-content):has(> sky-page-links) {
   display: grid;
   grid-template: "header" "content" "links";
@@ -1068,13 +1080,16 @@ select::-ms-expand {
   --sky-layout-host-content-spacing: 0;
   --sky-layout-host-tab-content-spacing: 10px;
 }
+.sky-layout-host-none {
+  --sky-layout-host-links-display: none;
+}
 
 @media (min-width: 768px) {
   .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links), .sky-layout-host-list:has(> sky-page-content):has(> sky-page-links), .sky-layout-host-tabs:has(> sky-page-content):has(> sky-page-links) {
     --sky-layout-host-links-spacing: var(--sky-margin-inline-xl);
     grid-template: "header-alerts header-alerts  header-alerts" "header-avatar header-text    header-text" "header-avatar header-content links" "content       content        links";
-    grid-template-rows: minmax(var(--sky-margin-stacked-xl), min-content) minmax(var(--sky-margin-stacked-xl), min-content) minmax(var(--sky-margin-stacked-xl), min-content) 1fr;
-    grid-template-columns: 0 auto 25%;
+    grid-template-rows: minmax(var(--sky-margin-stacked-xl), min-content) minmax(var(--sky-margin-stacked-xl), min-content) minmax(var(--sky-margin-stacked-xl), min-content) auto;
+    grid-template-columns: 0 75% 25%;
   }
   .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links) > sky-page-header,
   .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links) .sky-page-header,
@@ -1111,7 +1126,10 @@ select::-ms-expand {
     margin-top: 0;
   }
   .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links):has(sky-page-header-avatar:not(:empty)), .sky-layout-host-list:has(> sky-page-content):has(> sky-page-links):has(sky-page-header-avatar:not(:empty)), .sky-layout-host-tabs:has(> sky-page-content):has(> sky-page-links):has(sky-page-header-avatar:not(:empty)) {
-    grid-template-columns: min-content auto 25%;
+    --sky-layout-host-header-avatar-size: calc(
+      120px + var(--sky-margin-inline-xl)
+    );
+    grid-template-columns: var(--sky-layout-host-header-avatar-size) calc(75% - var(--sky-layout-host-header-avatar-size)) 25%;
   }
   .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links):has(sky-page-header-avatar:not(:empty)) h1.sky-page-header-text, .sky-layout-host-list:has(> sky-page-content):has(> sky-page-links):has(sky-page-header-avatar:not(:empty)) h1.sky-page-header-text, .sky-layout-host-tabs:has(> sky-page-content):has(> sky-page-links):has(sky-page-header-avatar:not(:empty)) h1.sky-page-header-text {
     margin: 0;
@@ -1141,8 +1159,8 @@ select::-ms-expand {
 .sky-responsive-container-lg .sky-layout-host-tabs:has(> sky-page-content):has(> sky-page-links) {
   --sky-layout-host-links-spacing: var(--sky-margin-inline-xl);
   grid-template: "header-alerts header-alerts  header-alerts" "header-avatar header-text    header-text" "header-avatar header-content links" "content       content        links";
-  grid-template-rows: minmax(var(--sky-margin-stacked-xl), min-content) minmax(var(--sky-margin-stacked-xl), min-content) minmax(var(--sky-margin-stacked-xl), min-content) 1fr;
-  grid-template-columns: 0 auto 25%;
+  grid-template-rows: minmax(var(--sky-margin-stacked-xl), min-content) minmax(var(--sky-margin-stacked-xl), min-content) minmax(var(--sky-margin-stacked-xl), min-content) auto;
+  grid-template-columns: 0 75% 25%;
 }
 .sky-responsive-container-sm .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links) > sky-page-header,
 .sky-responsive-container-sm .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links) .sky-page-header,
@@ -1233,7 +1251,10 @@ select::-ms-expand {
 .sky-responsive-container-lg .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links):has(sky-page-header-avatar:not(:empty)),
 .sky-responsive-container-lg .sky-layout-host-list:has(> sky-page-content):has(> sky-page-links):has(sky-page-header-avatar:not(:empty)),
 .sky-responsive-container-lg .sky-layout-host-tabs:has(> sky-page-content):has(> sky-page-links):has(sky-page-header-avatar:not(:empty)) {
-  grid-template-columns: min-content auto 25%;
+  --sky-layout-host-header-avatar-size: calc(
+    120px + var(--sky-margin-inline-xl)
+  );
+  grid-template-columns: var(--sky-layout-host-header-avatar-size) calc(75% - var(--sky-layout-host-header-avatar-size)) 25%;
 }
 .sky-responsive-container-sm .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links):has(sky-page-header-avatar:not(:empty)) h1.sky-page-header-text, .sky-responsive-container-sm .sky-layout-host-list:has(> sky-page-content):has(> sky-page-links):has(sky-page-header-avatar:not(:empty)) h1.sky-page-header-text, .sky-responsive-container-sm .sky-layout-host-tabs:has(> sky-page-content):has(> sky-page-links):has(sky-page-header-avatar:not(:empty)) h1.sky-page-header-text,
 .sky-responsive-container-md .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links):has(sky-page-header-avatar:not(:empty)) h1.sky-page-header-text,
@@ -1526,6 +1547,14 @@ select::-ms-expand {
   margin-bottom: 40px;
 }
 
+.sky-form-field-stacked {
+  margin-bottom: 10px;
+}
+
+.sky-field-group-stacked {
+  margin-bottom: 20px;
+}
+
 .sky-switch:not(.sky-theme-modern *) {
   cursor: pointer;
   display: inline-flex;