@skyux/theme 11.11.2 → 11.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/css/sky.css +24 -9
  2. package/css/themes/modern/styles.css +511 -318
  3. package/documentation.json +102 -102
  4. package/package.json +1 -1
  5. package/scss/_compat/_mixins.scss +11 -2
package/css/sky.css CHANGED
@@ -400,6 +400,11 @@ textarea {
400
400
  --sky-switch-margin: 5px;
401
401
  }
402
402
 
403
+ body:not(.sky-theme-modern) {
404
+ --sky-override-required-color: var(--sky-highlight-color-danger);
405
+ --sky-override-required-space: 5px;
406
+ }
407
+
403
408
  .sky-border-bottom-dark {
404
409
  border-bottom: 1px solid #cdcfd2;
405
410
  }
@@ -874,6 +879,10 @@ a.sky-btn:hover {
874
879
  font-weight: 600;
875
880
  src: url("https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-CondSemibold.woff") format("woff");
876
881
  }
882
+ .sky-form-control:not(.sky-theme-modern *) {
883
+ --sky-override-form-control-color: var(--sky-text-color-default);
884
+ }
885
+
877
886
  .sky-form-control {
878
887
  width: 100%;
879
888
  padding: 6px 12px;
@@ -883,7 +892,7 @@ a.sky-btn:hover {
883
892
  border-right: 1px solid #cdcfd2;
884
893
  line-height: 1.428571429;
885
894
  font-size: 15px;
886
- color: var(--sky-text-color-default);
895
+ color: var(--sky-override-form-control-color, var(--sky-color-text-default));
887
896
  }
888
897
  .sky-form-control:not([type=range]):not([type=radio]):not([type=checkbox]):not(select) {
889
898
  /* Remove device-specific styles */
@@ -938,8 +947,8 @@ textarea.ng-invalid.ng-touched {
938
947
  /* TODO: remove this fallback `content` line, once support for content alt text is added to firefox & safari */
939
948
  content: "*";
940
949
  content: "*"/"";
941
- color: var(--sky-highlight-color-danger);
942
- padding-left: 5px;
950
+ color: var(--sky-override-required-color, var(--sky-color-text-danger));
951
+ padding-left: var(--sky-override-required-space, var(--sky-space-gap-label-s));
943
952
  }
944
953
 
945
954
  .sky-control-help-container:not(:empty):not(.sky-theme-modern *) {
@@ -1073,8 +1082,8 @@ select::-ms-expand {
1073
1082
  .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) {
1074
1083
  --sky-layout-host-links-spacing: var(--sky-margin-inline-xl);
1075
1084
  grid-template: "header-alerts header-alerts header-alerts" "header-avatar header-text header-text" "header-avatar header-content links" "content content links";
1076
- 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;
1077
- grid-template-columns: 0 auto 25%;
1085
+ 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;
1086
+ grid-template-columns: 0 75% 25%;
1078
1087
  }
1079
1088
  .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links) > sky-page-header,
1080
1089
  .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links) .sky-page-header,
@@ -1111,7 +1120,10 @@ select::-ms-expand {
1111
1120
  margin-top: 0;
1112
1121
  }
1113
1122
  .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)) {
1114
- grid-template-columns: min-content auto 25%;
1123
+ --sky-layout-host-header-avatar-size: calc(
1124
+ 120px + var(--sky-margin-inline-xl)
1125
+ );
1126
+ grid-template-columns: var(--sky-layout-host-header-avatar-size) calc(75% - var(--sky-layout-host-header-avatar-size)) 25%;
1115
1127
  }
1116
1128
  .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 {
1117
1129
  margin: 0;
@@ -1141,8 +1153,8 @@ select::-ms-expand {
1141
1153
  .sky-responsive-container-lg .sky-layout-host-tabs:has(> sky-page-content):has(> sky-page-links) {
1142
1154
  --sky-layout-host-links-spacing: var(--sky-margin-inline-xl);
1143
1155
  grid-template: "header-alerts header-alerts header-alerts" "header-avatar header-text header-text" "header-avatar header-content links" "content content links";
1144
- 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;
1145
- grid-template-columns: 0 auto 25%;
1156
+ 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;
1157
+ grid-template-columns: 0 75% 25%;
1146
1158
  }
1147
1159
  .sky-responsive-container-sm .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links) > sky-page-header,
1148
1160
  .sky-responsive-container-sm .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links) .sky-page-header,
@@ -1233,7 +1245,10 @@ select::-ms-expand {
1233
1245
  .sky-responsive-container-lg .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links):has(sky-page-header-avatar:not(:empty)),
1234
1246
  .sky-responsive-container-lg .sky-layout-host-list:has(> sky-page-content):has(> sky-page-links):has(sky-page-header-avatar:not(:empty)),
1235
1247
  .sky-responsive-container-lg .sky-layout-host-tabs:has(> sky-page-content):has(> sky-page-links):has(sky-page-header-avatar:not(:empty)) {
1236
- grid-template-columns: min-content auto 25%;
1248
+ --sky-layout-host-header-avatar-size: calc(
1249
+ 120px + var(--sky-margin-inline-xl)
1250
+ );
1251
+ grid-template-columns: var(--sky-layout-host-header-avatar-size) calc(75% - var(--sky-layout-host-header-avatar-size)) 25%;
1237
1252
  }
1238
1253
  .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,
1239
1254
  .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,