@utahdts/utah-design-system-header 0.6.0-beta.0 → 0.6.0

package/src/css/build/utah-design-system-header.css

@@ -1190,6 +1190,10 @@ elemental html: h1, h2, h3, ul, li, etc.
   box-sizing: border-box;
 }
 
+.utah-design-system pre.pre-block--padded {
+  padding: 0 var(--spacing);
+}
+
 .utah-design-system pre .pre-block__overflow-content {
   width: max-content;
 }
@@ -1898,19 +1902,19 @@ base color swatches for the design system
   font-size: 1.7rem;
 }
 
-.input-wrapper {
+.utah-design-system .input-wrapper {
   margin: 0 0 var(--spacing-s) 0;
 }
 
-.form.form--stacked .input-wrapper {
+.form.form--stacked .utah-design-system .input-wrapper {
   display: flex;
   flex-direction: column;
   gap: 3px;
   align-items: flex-start;
 }
 
-input[type=text],
-textarea {
+.utah-design-system input[type=text],
+.utah-design-system textarea {
   color: var(--gray-color);
   min-height: var(--form-ele-medium);
   border-radius: var(--radius-small);
@@ -1922,24 +1926,24 @@ textarea {
   transition: box-shadow var(--timing-xquick) ease-in-out;
 }
 
-input[type=text]:hover,
-textarea:hover {
+.utah-design-system input[type=text]:hover,
+.utah-design-system textarea:hover {
   box-shadow: var(--hover-gray-color) 0 0 0 5px;
   border-color: black;
 }
 
-input[type=text]:focus-visible,
-textarea:focus-visible {
+.utah-design-system input[type=text]:focus-visible,
+.utah-design-system textarea:focus-visible {
   outline: 2px solid var(--form-ele-color);
   outline-offset: 2px;
   transition: none;
 }
 
-textarea {
+.utah-design-system textarea {
   padding: var(--spacing-xs);
 }
 
-input[type=checkbox] {
+.utah-design-system input[type=checkbox] {
   width: var(--form-checkbox-medium);
   height: var(--form-checkbox-medium);
   position: relative;
@@ -1950,7 +1954,7 @@ input[type=checkbox] {
   appearance: none;
 }
 
-input[type=checkbox]::after {
+.utah-design-system input[type=checkbox]::after {
   content: "";
   display: block;
   position: absolute;
@@ -1964,16 +1968,16 @@ input[type=checkbox]::after {
   transition: box-shadow var(--timing-xquick) ease-in-out;
 }
 
-input[type=checkbox]:hover {
+.utah-design-system input[type=checkbox]:hover {
   border-color: black;
 }
 
-input[type=checkbox]:hover::after {
+.utah-design-system input[type=checkbox]:hover::after {
   box-shadow: var(--hover-gray-color) 0 0 0 7px;
   border-color: black;
 }
 
-input[type=checkbox]::before {
+.utah-design-system input[type=checkbox]::before {
   content: "";
   display: block;
   background: var(--form-ele-color);
@@ -1987,18 +1991,18 @@ input[type=checkbox]::before {
   opacity: 0;
 }
 
-input[type=checkbox]:checked {
+.utah-design-system input[type=checkbox]:checked {
   border-width: 0;
   background-color: var(--form-ele-color);
 }
 
-input[type=checkbox]:checked::before {
+.utah-design-system input[type=checkbox]:checked::before {
   opacity: 1;
   background-size: 80%;
   transition: background-size var(--timing-quick) ease, opacity var(--timing-quick) ease;
 }
 
-.input-wrapper--checkbox {
+.utah-design-system .input-wrapper--checkbox {
   display: flex;
   flex-direction: row-reverse;
   justify-content: flex-end;
@@ -2007,11 +2011,11 @@ input[type=checkbox]:checked::before {
   z-index: 1;
 }
 
-.input-wrapper label {
+.utah-design-system .input-wrapper label {
   padding: 0 0 0 var(--spacing-2xs);
 }
 
-select {
+.utah-design-system select {
   color: var(--gray-color);
   min-height: var(--form-ele-medium);
   border-radius: var(--radius-small);
@@ -2026,18 +2030,18 @@ select {
   transition: box-shadow var(--timing-xquick) ease-in-out;
 }
 
-select:hover {
+.utah-design-system select:hover {
   box-shadow: var(--hover-gray-color) 0 0 0 5px;
   border-color: black;
 }
 
-select:focus-visible {
+.utah-design-system select:focus-visible {
   outline: 2px solid var(--form-ele-color);
   outline-offset: 2px;
   transition: none;
 }
 
-.info-box {
+.utah-design-system .info-box {
   display: flex;
   align-items: center;
   min-height: var(--form-ele-medium);
@@ -2046,7 +2050,7 @@ select:focus-visible {
   border-radius: var(--radius-small);
 }
 
-.info-box::before {
+.utah-design-system .info-box::before {
   content: "";
   display: block;
   width: var(--spacing-xs);
@@ -2056,13 +2060,13 @@ select:focus-visible {
   background-color: var(--secondary-color);
 }
 
-.info-box__content {
+.utah-design-system .info-box__content {
   display: flex;
   align-items: center;
   padding: 0 var(--spacing-s);
 }
 
-input[type=radio] {
+.utah-design-system input[type=radio] {
   appearance: none;
   border-radius: var(--radius-circle);
   border: 1px solid var(--gray-color);
@@ -2073,7 +2077,7 @@ input[type=radio] {
   margin-right: var(--spacing-xs);
 }
 
-input[type=radio]::before {
+.utah-design-system input[type=radio]::before {
   content: "";
   display: block;
   width: 100%;
@@ -2083,16 +2087,16 @@ input[type=radio]::before {
   transition: box-shadow var(--timing-xquick) ease-in-out;
 }
 
-input[type=radio]:hover::before {
+.utah-design-system input[type=radio]:hover::before {
   box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 7px;
 }
 
-input[type=radio]:checked {
+.utah-design-system input[type=radio]:checked {
   background-color: var(--secondary-color);
   border: 1px solid var(--secondary-color);
 }
 
-input[type=radio]:checked::after {
+.utah-design-system input[type=radio]:checked::after {
   content: "";
   display: block;
   width: 50%;
@@ -2105,16 +2109,16 @@ input[type=radio]:checked::after {
   transform: translate(-50%, -50%);
 }
 
-.checkbox:hover ~ span:first-of-type {
+.utah-design-system .checkbox:hover ~ span:first-of-type {
   box-shadow: rgb(240, 241, 242) 0px 0px 0px 7px;
 }
 
-span {
+.utah-design-system span {
   border-radius: 999px;
   box-shadow: rgb(240, 241, 242) 0px 0px 0px 0px;
 }
 
-input[type=checkbox].switch {
+.utah-design-system input[type=checkbox].switch {
   border: 0;
   clip: rect(0 0 0 0);
   height: 1px;
@@ -2125,7 +2129,7 @@ input[type=checkbox].switch {
   width: 1px;
 }
 
-.switch__label {
+.utah-design-system .switch__label {
   position: absolute;
   right: 0;
   transform: translateX(calc(100% + var(--spacing-2xs)));
@@ -2133,7 +2137,7 @@ input[type=checkbox].switch {
   min-width: max-content;
 }
 
-.switch__wrapper {
+.utah-design-system .switch__wrapper {
   min-width: 20px;
   background: #7b7b7b;
   color: white;
@@ -2147,46 +2151,46 @@ input[type=checkbox].switch {
   transition: box-shadow var(--timing-xquick) ease-in-out;
 }
 
-.switch__wrapper--on {
+.utah-design-system .switch__wrapper--on {
   background: var(--form-ele-color);
 }
 
-.switch__wrapper:hover {
+.utah-design-system .switch__wrapper:hover {
   box-shadow: var(--hover-gray-color) 0 0 0 5px;
   border-color: black;
 }
 
-.switch__wrapper:has(input:focus) {
+.utah-design-system .switch__wrapper:has(input:focus) {
   outline: 2px solid var(--form-ele-color);
   outline-offset: 2px;
   transition: none;
 }
 
-.switch--small.switch__wrapper {
+.utah-design-system .switch--small.switch__wrapper {
   min-height: var(--form-ele-small4x);
 }
 
-.switch--small .switch__slider {
+.utah-design-system .switch--small .switch__slider {
   height: var(--form-ele-small4x);
   width: var(--form-ele-small4x);
 }
 
-.switch--small .switch__inner-label {
+.utah-design-system .switch--small .switch__inner-label {
   font-size: var(--font-size-xs);
   height: var(--form-ele-small4x);
   line-height: var(--form-ele-small4x);
 }
 
-.switch--large.switch__wrapper {
+.utah-design-system .switch--large.switch__wrapper {
   min-height: var(--form-ele-small1x);
 }
 
-.switch--large .switch__slider {
+.utah-design-system .switch--large .switch__slider {
   height: var(--form-ele-small1x);
   width: var(--form-ele-small1x);
 }
 
-.switch__slider {
+.utah-design-system .switch__slider {
   height: var(--form-ele-small3x);
   width: var(--form-ele-small3x);
   border-radius: var(--radius-circle);
@@ -2199,19 +2203,19 @@ input[type=checkbox].switch {
   justify-content: center;
 }
 
-.switch__slider--on {
+.utah-design-system .switch__slider--on {
   left: 100%;
   transform: translateX(calc(-100% - 2px));
   background: white;
 }
 
-.switch__slider svg {
+.utah-design-system .switch__slider svg {
   fill: var(--gray-color);
   width: 0.65rem;
   height: 0.65rem;
 }
 
-.switch__inner-label {
+.utah-design-system .switch__inner-label {
   position: relative;
   width: 100%;
   height: var(--form-ele-small3x);
@@ -2219,7 +2223,7 @@ input[type=checkbox].switch {
   line-height: var(--font-size-s);
 }
 
-.switch__inner-label-on, .switch__inner-label-off {
+.utah-design-system .switch__inner-label-on, .utah-design-system .switch__inner-label-off {
   width: calc(100% - var(--form-ele-2small1x));
   position: absolute;
   right: 2px;
@@ -2229,30 +2233,30 @@ input[type=checkbox].switch {
   display: inline-block;
 }
 
-.switch__inner-label-on.show, .switch__inner-label-off.show {
+.utah-design-system .switch__inner-label-on.show, .utah-design-system .switch__inner-label-off.show {
   opacity: 1;
 }
 
-.switch__inner-label-on {
+.utah-design-system .switch__inner-label-on {
   color: white;
   right: unset;
   left: 2px;
 }
 
-.switch--disabled {
+.utah-design-system .switch--disabled {
   background: var(--form-ele-disabled-color);
   cursor: not-allowed;
 }
 
-.switch--disabled.switch__wrapper--on {
+.utah-design-system .switch--disabled.switch__wrapper--on {
   background: var(--form-ele-color-light);
 }
 
-.input-wrapper--switch label {
+.utah-design-system .input-wrapper--switch label {
   padding: var(--spacing-3xs) var(--spacing-xs);
 }
 
-.switch-old {
+.utah-design-system .switch-old {
   display: block;
   box-sizing: border-box;
   border: none;
@@ -2262,25 +2266,25 @@ input[type=checkbox].switch {
   min-height: 20px;
 }
 
-.switch-old:focus,
-.switch-old:hover {
+.utah-design-system .switch-old:focus,
+.utah-design-system .switch-old:hover {
   outline: none;
 }
 
-.switch-old:focus::before,
-.switch-old:hover::before {
+.utah-design-system .switch-old:focus::before,
+.utah-design-system .switch-old:hover::before {
   box-shadow: 0 0 0.5em #2a2a28;
 }
 
-.switch-old::before,
-.switch-old::after {
+.utah-design-system .switch-old::before,
+.utah-design-system .switch-old::after {
   content: "";
   position: absolute;
   height: 16px;
   transition: all 0.25s ease;
 }
 
-.switch-old::before {
+.utah-design-system .switch-old::before {
   left: 0;
   top: 0.2em;
   width: 32px;
@@ -2291,7 +2295,7 @@ input[type=checkbox].switch {
   border-color: #699957;
 }
 
-.switch-old::after {
+.utah-design-system .switch-old::after {
   top: 4px;
   background-color: #fff;
   border-radius: 50%;
@@ -3651,7 +3655,7 @@ variables and settings
   font-size: 1.3rem;
 }
 
-.documentation-template {
+.utah-design-system .documentation-template {
   display: flex;
   flex-direction: row;
   width: 100%;
@@ -3660,39 +3664,39 @@ variables and settings
   align-items: flex-start;
 }
 
-.documentation-template__wrapper {
+.utah-design-system .documentation-template__wrapper {
   display: flex;
   justify-content: center;
 }
 
-.documentation-template__side-panel-left {
+.utah-design-system .documentation-template__side-panel-left {
   border-right: 1px solid var(--gray-border);
   padding: var(--documentation-padding);
   width: var(--documentation-left-width);
 }
 
-.documentation-template__content {
+.utah-design-system .documentation-template__content {
   flex: 1 1 auto;
   max-width: var(--documentation-width);
   padding: var(--documentation-padding);
 }
 
-.documentation-template__content h1 {
+.utah-design-system .documentation-template__content h1 {
   margin: calc(-1 * var(--spacing-xs)) 0 0 0;
 }
 
-.documentation-template__content code svg {
+.utah-design-system .documentation-template__content code svg {
   height: 10px;
 }
 
-.documentation-template__content table .props-code-wrapper {
+.utah-design-system .documentation-template__content table .props-code-wrapper {
   display: flex;
   flex-direction: row;
   gap: var(--spacing-xs);
   flex-wrap: wrap;
 }
 
-.documentation-template__side-panel-right {
+.utah-design-system .documentation-template__side-panel-right {
   position: sticky;
   top: 0;
   border-left: 1px solid var(--gray-border);
@@ -3700,28 +3704,28 @@ variables and settings
   width: var(--documentation-right-width);
 }
 
-.landing-page-template {
+.utah-design-system .landing-page-template {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
 }
 
-.landing-page-template .content-width {
+.utah-design-system .landing-page-template .content-width {
   max-width: var(--content-width-narrow);
 }
 
-input.input--height-small,
-.input--height-small {
+.utah-design-system input.input--height-small,
+.utah-design-system .input--height-small {
   min-height: var(--form-ele-small);
 }
 
-input.input--height-small1x,
-.input--height-small1x {
+.utah-design-system input.input--height-small1x,
+.utah-design-system .input--height-small1x {
   min-height: var(--form-ele-small1x);
 }
 
-.spinner {
+.utah-design-system .spinner {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -3729,23 +3733,23 @@ input.input--height-small1x,
   vertical-align: middle;
 }
 
-.spinner svg {
+.utah-design-system .spinner svg {
   display: block;
 }
 
-.spinner svg path {
+.utah-design-system .spinner svg path {
   fill: none;
 }
 
-.spinner__animation {
+.utah-design-system .spinner__animation {
   animation: spinner-animation 0.5s linear infinite;
 }
 
-.spinner__track {
+.utah-design-system .spinner__track {
   stroke: #b0b0b0;
 }
 
-.spinner__value {
+.utah-design-system .spinner__value {
   stroke: var(--form-ele-color);
   stroke-linecap: round;
   transform-origin: center;
@@ -3760,63 +3764,63 @@ input.input--height-small1x,
     transform: rotate(1turn);
   }
 }
-table {
+.utah-design-system table {
   border-collapse: collapse;
 }
 
-table thead {
+.utah-design-system table thead {
   border-bottom: 1px solid var(--gray-color);
 }
 
-table thead tr th {
+.utah-design-system table thead tr th {
   text-align: center;
   vertical-align: bottom;
   font-weight: bold;
   padding: var(--spacing-s);
 }
 
-table thead tr th.text-left {
+.utah-design-system table thead tr th.text-left {
   text-align: left;
 }
 
-table thead tr th.text-right {
+.utah-design-system table thead tr th.text-right {
   text-align: right;
 }
 
-table tbody tr td {
+.utah-design-system table tbody tr td {
   vertical-align: top;
   padding: var(--spacing-s);
 }
 
-table.table--alt tbody tr:nth-child(2n) td {
+.utah-design-system table.table--alt tbody tr:nth-child(2n) td {
   background-color: #F5F5F5;
 }
 
-table.table--lines-x tbody tr td {
+.utah-design-system table.table--lines-x tbody tr td {
   border-bottom: 1px solid var(--gray-3-1-contrast);
 }
 
-table.table--lines-x tbody tr:last-child td {
+.utah-design-system table.table--lines-x tbody tr:last-child td {
   border-bottom: 1px solid var(--gray-color);
 }
 
-table.table--v-align-center tbody tr td {
+.utah-design-system table.table--v-align-center tbody tr td {
   vertical-align: middle;
 }
 
-table.table--condensed thead tr th {
+.utah-design-system table.table--condensed thead tr th {
   padding: var(--spacing-2xs);
 }
 
-table.table--condensed tbody tr td {
+.utah-design-system table.table--condensed tbody tr td {
   padding: var(--spacing-2xs);
 }
 
-table .table-header {
+.utah-design-system table .table-header {
   position: relative;
 }
 
-table .table-header--sorted::before {
+.utah-design-system table .table-header--sorted::before {
   content: "";
   height: 7px;
   width: 100%;
@@ -3907,7 +3911,7 @@ table .table-header--sorted::before {
 /*
 ############     _popup.scss      ############
 */
-.popup {
+.utah-design-system .popup {
   position: fixed;
   top: 25%;
   left: 2%;
@@ -3917,13 +3921,13 @@ table .table-header--sorted::before {
   z-index: 1000;
 }
 
-.popup__title-bar {
+.utah-design-system .popup__title-bar {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 
-.popup__title {
+.utah-design-system .popup__title {
   padding: var(--spacing);
 }