diff --git a/src/web/assets/authmethodsetup/dist/css/auth.css.map b/src/web/assets/authmethodsetup/dist/css/auth.css.map index 21f8fcc038c..50fc0770288 100644 --- a/src/web/assets/authmethodsetup/dist/css/auth.css.map +++ b/src/web/assets/authmethodsetup/dist/css/auth.css.map @@ -1,5 +1 @@ -<<<<<<< HEAD -{"version":3,"file":"css/auth.css","mappings":"AAKE,gCAGE,mBAFA,aACA,qBAGA,aADA,6BACA,CAEA,mCACE,2BAGF,oDAEE,aACA,mBACA,cAHA,2BAGA,CAEA,iIAGE,+CADA,+BACA,CAIJ,oDAGE,mBAIA,sCANA,oBACA,qBAMA,gBAJA,cAEA,gBADA,2BAGA,CAEA,gEAIE,sCADA,qDADA,4CAGA,kBAJA,0CAIA,CAEA,uEAGE,mBADA,uBAEA,SAAQ,CAHR,iBAGA,CAOV,2BAIE,mBAHA,aACA,sBAGA,aAFA,uBAGA,kBAEA,8DAIE,sCADA,kBADA,YAGA,kBAJA,UAIA,CAEA,qEAEE,mBAEA,eACA,iBAFA,UAFA,iBAIA,CAIJ,gEACE,gCAIJ,mCC2GE,4EAEA,yBD1GA,mBADA,cACA,CAEA,6BALF,mCAMI,+BAIJ,qCACE,aACA","sources":["webpack:///./css/auth.scss","webpack:///../../../../../packages/craftcms-sass/_mixins.scss"],"sourcesContent":["@charset \"UTF-8\";\n\n@import '@craftcms/sass/mixins';\n\n#auth-method-setup {\n .auth-method {\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--l);\n\n h3 {\n margin-block-end: var(--xs);\n }\n\n .auth-method-footer {\n margin-block-start: var(--s);\n display: flex;\n flex-direction: row;\n gap: var(--xs);\n\n .auth-method-active,\n .btn {\n height: var(--touch-target-size);\n border-radius: calc(var(--touch-target-size) / 2);\n }\n }\n\n .auth-method-active {\n display: inline-flex;\n flex-flow: row nowrap;\n align-items: center;\n gap: var(--xs);\n padding-inline: 1px var(--s);\n padding-block: 0;\n border: 1px solid var(--enabled-color);\n font-weight: 500;\n\n [data-icon] {\n width: calc(var(--touch-target-size) - 4px);\n height: calc(var(--touch-target-size) - 4px);\n border-radius: calc(var(--touch-target-size) / 2 - 2px);\n background-color: var(--enabled-color);\n text-align: center;\n\n &::before {\n position: relative;\n inset-block-start: -2px;\n color: var(--white);\n opacity: 1;\n }\n }\n }\n }\n}\n\n.auth-method-setup-success {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: var(--s);\n text-align: center;\n\n .auth-method-setup-success-graphic {\n width: 50px;\n height: 50px;\n border-radius: 50%;\n background-color: var(--enabled-color);\n text-align: center;\n\n &::before {\n position: relative;\n color: var(--white);\n opacity: 1;\n font-size: 34px;\n line-height: 50px;\n }\n }\n\n h1.auth-method-setup-success-message {\n border-block-end: none !important;\n }\n}\n\nul.auth-method-recovery-codes-list {\n @include fixed-width-font;\n max-width: 20em;\n margin-inline: auto;\n\n @container (min-width: 20em) {\n columns: 2;\n }\n}\n\n.auth-method-recovery-codes-download {\n display: flex;\n justify-content: center;\n}\n","@use 'sass:color';\n@use 'sass:list';\n@use 'sass:string';\n$white: #fff;\n$black: #000;\n\n$grey050: hsl(212, 60%, 97%);\n$grey100: hsl(212, 50%, 93%);\n$grey200: hsl(212, 30%, 85%);\n$grey300: hsl(211, 13%, 65%);\n$grey350: hsl(211, 11%, 59%);\n$grey400: hsl(210, 10%, 53%);\n$grey500: hsl(211, 12%, 43%);\n$grey550: hsl(210, 13%, 40%);\n$grey600: hsl(209, 14%, 37%);\n$grey700: hsl(209, 18%, 30%);\n$grey800: hsl(209, 20%, 25%);\n$grey900: hsl(210, 24%, 16%);\n$grey1000: hsl(210, 24%, 10%);\n\n$red050: #fef2f2;\n$red100: #fee2e2;\n$red200: #fecaca;\n$red300: #fca5a5;\n$red400: #f87171;\n$red500: #ef4444;\n$red600: #dc2626;\n$red700: #b91c1c;\n$red800: #991b1b;\n$red900: #7f1d1d;\n\n$orange050: #fff7ed;\n$orange100: #ffedd5;\n$orange200: #fed7aa;\n$orange300: #fdba74;\n$orange400: #fb923c;\n$orange500: #f97316;\n$orange600: #ea580c;\n$orange700: #c2410c;\n$orange800: #9a3412;\n$orange900: #7c2d12;\n\n$yellow050: #fefce8;\n$yellow100: #fef9c3;\n$yellow200: #fef08a;\n$yellow300: #fde047;\n$yellow400: #facc15;\n$yellow500: #eab308;\n$yellow600: #ca8a04;\n$yellow700: #a16207;\n$yellow800: #854d0e;\n$yellow900: #713f12;\n\n$green050: #f0fdf4;\n$green100: #dcfce7;\n$green200: #bbf7d0;\n$green300: #86efac;\n$green400: #4ade80;\n$green500: #22c55e;\n$green600: #16a34a;\n$green700: #15803d;\n$green800: #166534;\n$green900: #14532d;\n\n$teal050: #f0fdfa;\n$teal100: #ccfbf1;\n$teal200: #99f6e4;\n$teal300: #5eead4;\n$teal400: #2dd4bf;\n$teal500: #14b8a6;\n$teal550: #11a697;\n$teal600: #0d9488;\n$teal700: #0f766e;\n$teal800: #115e59;\n$teal900: #134e4a;\n\n$cyan050: #ecfeff;\n$cyan100: #cffafe;\n$cyan200: #a5f3fc;\n$cyan300: #67e8f9;\n$cyan400: #22d3ee;\n$cyan500: #06b6d4;\n$cyan600: #0891b2;\n$cyan700: #0e7490;\n$cyan800: #155e75;\n$cyan900: #164e63;\n\n$blue050: #eff6ff;\n$blue100: #dbeafe;\n$blue200: #bfdbfe;\n$blue300: #93c5fd;\n$blue400: #60a5fa;\n$blue500: #3b82f6;\n$blue600: #2563eb;\n$blue700: #1d4ed8;\n$blue800: #1e40af;\n$blue900: #1e3a8a;\n\n$violet050: #f5f3ff;\n$violet100: #ede9fe;\n$violet200: #ddd6fe;\n$violet300: #c4b5fd;\n$violet400: #a78bfa;\n$violet500: #8b5cf6;\n$violet600: #7c3aed;\n$violet700: #6d28d9;\n$violet800: #5b21b6;\n$violet900: #4c1d95;\n\n$pink050: #fdf2f8;\n$pink100: #fce7f3;\n$pink200: #fbcfe8;\n$pink300: #f9a8d4;\n$pink400: #f472b6;\n$pink500: #ec4899;\n$pink600: #db2777;\n$pink700: #be185d;\n$pink800: #9d174d;\n$pink900: #831843;\n\n// submit button colors\n$primaryColor: $red600;\n$secondaryColor: $grey500;\n\n$inputColor: hsl(212, 25%, 50%);\n\n// text colors\n$textColor: $grey700;\n$mediumDarkTextColor: $grey550;\n$mediumTextColor: $grey550;\n$lightTextColor: $grey500;\n$linkColor: #1f5fea;\n\n// menu colors\n$menuOptionColor: $textColor;\n$menuOptionActiveColor: $textColor;\n$menuOptionActiveBackgroundColor: $grey050;\n\n// hairline colors\n$hairlineColor: color.adjust($grey800, $alpha: -0.9);\n$mediumHairlineColor: color.adjust($grey600, $alpha: -0.75);\n$darkHairlineColor: color.adjust($grey400, $alpha: -0.5);\n\n// focus colors\n$lightFocusColor: $blue300;\n$mediumFocusColor: $blue500;\n$darkFocusColor: #0f74b1;\n\n// focus rings\n$lightFocusRing:\n 0 0 0 1px $lightFocusColor,\n 0 0 0 3px color.adjust($lightFocusColor, $alpha: -0.3);\n$mediumFocusRing:\n 0 0 0 1px $mediumFocusColor,\n 0 0 0 3px color.adjust($mediumFocusColor, $alpha: -0.3);\n$darkFocusRing:\n 0 0 0 1px $darkFocusColor,\n 0 0 0 3px color.adjust($darkFocusColor, $alpha: -0.3);\n\n// selection colors\n$lightSelColor: $grey200;\n$darkSelColor: $grey500;\n\n// alert/notice colors\n$errorColor: $red600;\n$warningColor: $yellow800;\n$successColor: $teal500;\n$noticeColor: $blue800;\n\n// UI element styles\n$smallBorderRadius: 3px;\n$mediumBorderRadius: 4px;\n$largeBorderRadius: 5px;\n\n$menuBorderRadius: $mediumBorderRadius;\n\n@mixin sans-serif-font {\n font-family:\n system-ui,\n BlinkMacSystemFont,\n -apple-system,\n 'Segoe UI',\n 'Roboto',\n 'Oxygen',\n 'Ubuntu',\n 'Cantarell',\n 'Fira Sans',\n 'Droid Sans',\n 'Helvetica Neue',\n sans-serif;\n}\n\n@mixin fixed-width-font {\n font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier,\n monospace;\n font-size: 0.9em !important;\n}\n\n@function toRem($values...) {\n @warn \"torem mixin is deprecated. Use calc($value / 16 * 1rem) instead.\";\n $max: list.length($values);\n $remValues: '';\n\n @for $i from 1 through $max {\n $remValues: #{$remValues + calc(list.nth($values, $i) / 16)}rem;\n\n @if $i < $max {\n $remValues: #{$remValues + ' '};\n }\n }\n\n @return $remValues;\n}\n\n@mixin fontSize($size) {\n @warn \"fontsize mixin is deprecated. Use CSS values instead.\";\n font-size: toRem($size);\n}\n\n// Other\n\n@mixin focus-styles {\n body:not(.reduce-focus-visibility) &:focus,\n body.reduce-focus-visibility &:focus-visible {\n @content;\n }\n}\n\n@mixin svg-mask($color) {\n rect,\n circle,\n ellipse,\n line,\n polyline,\n polygon,\n path,\n text {\n fill: $color;\n stroke-width: 0;\n }\n}\n\n@mixin icon {\n font-family: 'Craft';\n speak: never;\n -webkit-font-feature-settings: 'liga', 'dlig';\n -moz-font-feature-settings: 'liga=1, dlig=1';\n -moz-font-feature-settings: 'liga', 'dlig';\n -ms-font-feature-settings: 'liga', 'dlig';\n -o-font-feature-settings: 'liga', 'dlig';\n font-feature-settings: 'liga', 'dlig';\n text-rendering: optimizeLegibility;\n font-weight: normal;\n font-variant: normal;\n text-transform: none;\n line-height: 1;\n direction: ltr; // Fixes a rendering issue in Chrome/Win\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n\n display: inline-block;\n text-align: center;\n font-style: normal;\n vertical-align: middle;\n word-wrap: normal !important;\n user-select: none;\n}\n\n@mixin angle($dir: down, $color: currentColor, $width: calc(2rem / 16)) {\n display: block;\n content: '';\n font-size: 0;\n width: calc(7rem / 16);\n height: calc(7rem / 16);\n border: solid $color;\n border-width: 0 $width $width 0;\n opacity: 0.8;\n position: relative;\n\n @if $dir == up {\n transform: rotate(225deg);\n inset-block-start: 2px;\n } @else if $dir == down {\n transform: rotate(45deg);\n } @else if $dir == left {\n body.ltr & {\n transform: rotate(135deg);\n }\n body.rtl & {\n transform: rotate(-45deg);\n }\n } @else if $dir == right {\n body.ltr & {\n transform: rotate(-45deg);\n }\n body.rtl & {\n transform: rotate(135deg);\n }\n }\n}\n\n@mixin clearafter {\n content: '';\n display: block;\n height: 0;\n clear: both;\n visibility: hidden;\n}\n\n@mixin shadow {\n box-shadow: 0 1px 5px -1px color.adjust($grey900, $alpha: -0.8);\n}\n\n@mixin pane {\n background: $white;\n box-shadow:\n 0 0 0 1px $grey200,\n 0 2px 12px color.adjust($grey200, $alpha: -0.5);\n\n &:focus {\n box-shadow: var(--focus-ring);\n }\n}\n\n@mixin modal {\n border-radius: $largeBorderRadius;\n background-color: $white;\n box-shadow: 0 25px 100px color.adjust($grey900, $alpha: -0.5) !important;\n}\n\n@mixin light-on-dark-text() {\n // Make light on dark text sharp on Macs\n // (sub-pixel antialiasing looks too bold/blurry with light text on dark background)\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n}\n\n@mixin light-focus-ring() {\n --focus-ring: 0 0 0 1px\n hsl(\n #{color.hue($blue200)},\n #{color.saturation($blue200)},\n #{color.lightness($blue200)}\n ),\n 0 0 0 3px hsla(var(--light-focus-hsl), 1);\n}\n\n@mixin dark-btn-light-bg-focus-ring() {\n --focus-ring: 0 0 0 1px\n hsl(\n #{color.hue($blue200)},\n #{color.saturation($blue200)},\n #{color.lightness($blue200)}\n ),\n 0 0 0 3px hsla(var(--dark-focus-hsl), 0.8);\n}\n\n@mixin custom-color-focus-ring($primary, $secondary: null) {\n @if $secondary != null {\n --focus-ring: 0 0 0 1px #{$primary}, 0 0 0 3px #{$secondary};\n } @else {\n --focus-ring: 0 0 0 3px #{$primary};\n }\n}\n\n@mixin two-color-focus-ring($light-button: true) {\n // Creates a two-color focus ring, with a white\n // If button is light, the dark box shadow is adjacent to the button\n // Else the light box shadow is adjacent to the button\n --light-color: var(--white);\n --dark-color: var(--gray-800);\n\n @if $light-button {\n --focus-ring: 0 0 0 3px var(--dark-color), 0 0 0 6px var(--light-color);\n } @else {\n --focus-ring: 0 0 0 3px var(--light-color), 0 0 0 6px var(--dark-color);\n }\n}\n\n// RTL stuff\n\n@mixin left($left) {\n @warn \"left mixin is deprecated. Use inset-inline-start instead.\";\n inset-inline-start: $left;\n}\n\n@mixin right($right) {\n @warn \"right mixin is deprecated. Use inset-inline-end instead.\";\n inset-inline-end: $right;\n}\n\n@mixin alignleft {\n @warn \"alignleft mixin is deprecated. Use text-align: start instead.\";\n text-align: start;\n}\n\n@mixin alignright {\n @warn \"alignright mixin is deprecated. Use text-align: end instead.\";\n text-align: end;\n}\n\n@mixin border-left($params...) {\n @warn \"border-left mixin is deprecated. Use border-inline-start instead.\";\n border-inline-start: $params;\n}\n\n@mixin border-right($params...) {\n @warn \"border-right mixin is deprecated. Use border-inline-end instead.\";\n border-inline-end: $params;\n}\n\n@mixin border-left-width($param) {\n @warn \"border-left-width mixin is deprecated. Use border-inline-start-width instead.\";\n border-inline-start-width: $param;\n}\n\n@mixin border-right-width($param) {\n @warn \"border-right-width mixin is deprecated. Use border-inline-end-width instead.\";\n border-inline-end-width: $param;\n}\n\n@mixin border-radius($tl, $tr, $br, $bl) {\n @warn \"border-radius mixin is deprecated. Use logical border properties instead.\";\n border-start-start-radius: $tl;\n border-start-end-radius: $tr;\n border-end-end-radius: $br;\n border-end-start-radius: $bl;\n}\n\n@mixin border-top-left-radius($params...) {\n @warn \"border-top-left-radius mixin is deprecated. Use border-start-start-radius instead.\";\n border-start-start-radius: $params;\n}\n\n@mixin border-top-right-radius($params...) {\n @warn \"border-top-right-radius mixin is deprecated. Use border-end-start-radius instead.\";\n border-start-end-radius: $params;\n}\n\n@mixin border-bottom-left-radius($params...) {\n @warn \"border-bottom-left-radius mixin is deprecated. Use border-start-end-radius instead.\";\n border-start-end-radius: $params;\n}\n\n@mixin border-bottom-right-radius($params...) {\n @warn \"border-bottom-right-radius mixin is deprecated. Use border-end-end-radius instead.\";\n border-end-end-radius: $params;\n}\n\n@mixin floatleft {\n @warn \"floatleft mixin is deprecated. Use float: inline-start instead.\";\n float: inline-start;\n}\n\n@mixin floatright {\n @warn \"floatright mixin is deprecated. Use float: inline-end instead.\";\n float: inline-end;\n}\n\n@mixin margin($t, $r, $b, $l, $important: '') {\n @warn \"margin mixin is deprecated. Use logical margin properties instead.\";\n margin-block: $t $b string.unquote($important);\n margin-inline: $l $r string.unquote($important);\n}\n\n@mixin margin-left($margin...) {\n @warn \"margin-left mixin is deprecated. Use margin-inline-start instead.\";\n margin-inline-start: $margin;\n}\n\n@mixin margin-right($margin...) {\n @warn \"margin-left mixin is deprecated. Use margin-inline-end instead.\";\n margin-inline-end: $margin;\n}\n\n@mixin padding($t, $r, $b, $l, $important: '') {\n @warn \"padding mixin is deprecated. Use padding logical properties instead.\";\n padding-block: $t $b string.unquote($important);\n padding-inline: $l $r string.unquote($important);\n}\n\n@mixin padding-left($padding...) {\n @warn \"padding-left mixin is deprecated. Use padding-inline-start properties instead.\";\n padding-inline-start: $padding;\n}\n\n@mixin padding-right($padding...) {\n @warn \"padding-right mixin is deprecated. Use padding-inline-end properties instead.\";\n padding-inline-end: $padding;\n}\n\n// Misc\n\n@mixin dark-inputs {\n @include placeholder-styles($grey400);\n\n .btn,\n .select:not(.selectize) select {\n background-color: $grey200;\n\n &:focus,\n &:hover {\n background-color: color.adjust($grey200, $lightness: -5%);\n }\n\n &:active,\n &.active,\n &[aria-expanded='true'] {\n background-color: color.adjust($grey200, $lightness: -10%);\n }\n }\n\n .text {\n background-color: $grey200;\n\n &:focus {\n background-color: color.adjust($grey200, $lightness: -5%);\n }\n }\n}\n\n@mixin header-btn {\n width: calc(30rem / 16);\n height: calc(30rem / 16);\n padding-left: 0;\n padding-right: 0;\n\n &:not(:hover):not(:active):not(.active):not([aria-expanded='true']) {\n background-color: transparent;\n }\n &:not(:active):not(.active):not([aria-expanded='true']):hover {\n background-color: color.adjust($grey300, $alpha: -0.85);\n }\n}\n\n@mixin h6-styles {\n margin: 14px 0 3px;\n font-size: 11px;\n line-height: 1.2;\n color: $lightTextColor;\n text-transform: uppercase;\n}\n\n@mixin token-styles {\n display: inline-block;\n border-radius: $smallBorderRadius;\n padding: 3px 7px;\n font-size: 12px;\n line-height: 14px;\n color: $textColor;\n background-color: $grey100;\n}\n\n@mixin active-token-styles {\n background-color: $grey200;\n}\n\n@mixin menu-styles {\n z-index: 100;\n border-radius: $menuBorderRadius;\n padding: 0 14px;\n overflow: auto;\n background: $white;\n user-select: none;\n box-shadow:\n 0 0 0 1px color.adjust($grey900, $alpha: -0.9),\n 0 5px 20px color.adjust($grey900, $alpha: -0.75);\n}\n\n@mixin menu-item-styles {\n margin: 0 -14px;\n padding: 10px 14px;\n color: $menuOptionColor;\n text-decoration: none;\n white-space: nowrap;\n}\n\n@mixin menu-item-active-styles {\n color: var(--white) !important;\n --medium-text-color: rgba(255, 255, 255, 0.8);\n --light-text-color: rgba(255, 255, 255, 0.8);\n background-color: var(--dark-sel-color);\n\n svg {\n @include svg-mask(var(--white));\n }\n}\n\n@mixin disclosure-link-hover-styles {\n color: $menuOptionColor;\n background-color: $grey050;\n}\n\n@mixin input-styles {\n border-radius: $smallBorderRadius;\n border: 1px solid color.adjust($inputColor, $alpha: -0.75);\n background-color: hsl(212, 50%, 99%);\n background-clip: padding-box;\n}\n\n@mixin input-focused-styles {\n box-shadow: var(--focus-ring);\n}\n\n@mixin placeholder-styles($color) {\n input::-webkit-input-placeholder,\n textarea::-webkit-input-placeholder {\n color: $color;\n }\n\n input:-ms-input-placeholder,\n textarea:-ms-input-placeholder {\n color: $color;\n }\n\n input::-ms-input-placeholder,\n textarea::-ms-input-placeholder {\n color: $color;\n }\n\n input:-moz-placeholder,\n textarea:-moz-placeholder {\n color: $color;\n }\n\n input::-moz-placeholder,\n textarea::-moz-placeholder {\n color: $color;\n }\n\n input::placeholder,\n textarea::placeholder {\n color: $color;\n }\n}\n\n@mixin select-styles {\n position: relative;\n border-radius: $largeBorderRadius;\n white-space: nowrap;\n}\n\n@mixin select-container-styles {\n max-width: 100%;\n position: relative;\n :not(.flex) > & {\n display: inline-block;\n }\n}\n\n@mixin select-arrow-styles {\n @include angle;\n position: absolute;\n z-index: 1;\n inset-block-start: calc(50% - 5px);\n inset-inline-end: 9px;\n user-select: none;\n pointer-events: none;\n color: var(--ui-control-color);\n}\n\n@mixin select-input-styles {\n display: block;\n position: relative;\n max-width: 100%;\n border: none;\n padding-block: 7px;\n padding-inline: 10px 22px;\n font-size: 14px;\n line-height: 20px;\n color: $textColor;\n background-color: hsl(212, 25%, 90%);\n appearance: none;\n // from https://stackoverflow.com/a/15933790/1688568\n &::-ms-expand {\n display: none;\n }\n}\n\n@mixin select-input-fullwidth-styles {\n min-width: 100%;\n}\n\n@mixin select-input-focused-styles {\n outline-color: transparent;\n background-color: hsl(212, 25%, 85%);\n box-shadow: var(--focus-ring);\n}\n\n@mixin touch-target {\n height: var(--touch-target-size);\n width: var(--touch-target-size);\n}\n\n// https://tailwindcss.com/docs/screen-readers#undoing-screen-reader-only-elements\n@mixin visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n}\n\n@mixin not-visually-hidden {\n position: static;\n width: auto;\n height: auto;\n padding: 0;\n margin: 0;\n overflow: visible;\n clip: auto;\n white-space: normal;\n}\n\n@mixin readable {\n font-size: 16px;\n line-height: 22px;\n\n h1,\n .h1,\n h2,\n .h2,\n h3,\n .h3,\n h4,\n .h4,\n h5,\n .h5,\n h6,\n .h6 {\n margin: 24px 0 16px;\n font-weight: 600;\n }\n\n h1,\n .h1 {\n font-size: 32px;\n line-height: 40px;\n color: #000;\n }\n\n h2,\n .h2 {\n font-size: 24px;\n line-height: 30px;\n }\n\n h3,\n .h3 {\n font-size: 20px;\n line-height: 24px;\n }\n\n h4,\n .h4 {\n font-size: 16px;\n line-height: 20px;\n }\n\n h5,\n .h5 {\n font-size: 14px;\n line-height: 18px;\n }\n\n h6,\n .h6 {\n font-size: 13.6px;\n line-height: 17px;\n color: $mediumTextColor;\n }\n\n ul,\n ol {\n margin: 1em 0;\n padding-inline-start: 2em;\n }\n\n ul li {\n list-style-type: disc;\n }\n\n li + li {\n margin-top: 0.25em;\n }\n\n .tip-dismiss-btn {\n position: absolute;\n top: 12px;\n inset-inline-end: 12px;\n\n & + p {\n margin-top: 0;\n }\n }\n\n blockquote {\n margin: 16px 0;\n\n &:not(.note) {\n padding: 0 16px;\n color: $mediumTextColor;\n border-inline-start: 4px solid $hairlineColor;\n }\n\n &.note {\n position: relative;\n border-radius: 4px;\n padding: 1em;\n padding-inline-start: 50px;\n border: 1px solid;\n\n &.dismissible {\n padding-inline-end: 36px;\n }\n\n &:not(.tip):not(.warning) {\n border-color: $errorColor;\n color: #bf503f;\n\n &:before {\n content: 'alert';\n color: $errorColor;\n }\n }\n\n &.tip {\n border-color: $linkColor;\n color: $linkColor;\n\n &:before {\n content: 'lightbulb';\n color: $linkColor;\n }\n }\n\n &.warning {\n border-color: $warningColor;\n color: #cf783a;\n\n &:before {\n content: 'alert';\n color: $warningColor;\n }\n }\n\n &:before {\n @include icon;\n opacity: 1;\n position: absolute;\n top: 15px;\n inset-inline-start: 16px;\n font-size: 24px;\n width: 24px;\n }\n\n a[href] {\n color: currentColor;\n text-decoration: underline;\n }\n }\n }\n\n .go:after {\n font-size: 14px;\n }\n}\n\n@mixin checkered-bg($size) {\n // h/t https://gist.github.com/dfrankland/f6fed3e3ccc42e3de482b324126f9542\n $halfSize: $size * 0.5;\n background-image: linear-gradient(\n 45deg,\n #{color.adjust($grey300, $alpha: -0.75)} 25%,\n transparent 25%\n ),\n linear-gradient(\n 135deg,\n #{color.adjust($grey300, $alpha: -0.75)} 25%,\n transparent 25%\n ),\n linear-gradient(\n 45deg,\n transparent 75%,\n #{color.adjust($grey300, $alpha: -0.75)} 75%\n ),\n linear-gradient(\n 135deg,\n transparent 75%,\n #{color.adjust($grey300, $alpha: -0.75)} 75%\n );\n background-size: $size $size;\n background-position:\n 0 0,\n $halfSize 0,\n $halfSize -#{$halfSize},\n 0 $halfSize;\n}\n"],"names":[],"sourceRoot":""} -======= -{"version":3,"file":"css/auth.css","mappings":"AAKE,gCAGE,mBAFA,aACA,qBAGA,aADA,6BACA,CAEA,mCACE,2BAGF,oDAEE,aACA,mBACA,cAHA,2BAGA,CAEA,iIAGE,+CADA,+BACA,CAIJ,oDAGE,mBAIA,sCANA,oBACA,qBAMA,gBAJA,cAEA,gBADA,2BAGA,CAEA,gEAIE,sCADA,qDADA,4CAGA,kBAJA,0CAIA,CAEA,uEAGE,mBADA,uBAEA,SAAQ,CAHR,iBAGA,CAOV,2BAIE,mBAHA,aACA,sBAGA,aAFA,sBAEA,CAEA,8DAIE,sCADA,kBADA,YAGA,kBAJA,UAIA,CAEA,qEAEE,mBAEA,eACA,iBAFA,UAFA,iBAIA,CAIJ,gEACE,gCAIJ,mCACE,YAAa,CACb,cAAe,CACf,aCyGA,4EAEA,yBDvGA,yBAGA,sBAFA,gDACA,4CAJA,eACA,mBAFA,uCC0GA,CDjGA,sCACE,kBAIJ,qCACE,aACA","sources":["webpack:///./css/auth.scss","webpack:///../../../../../packages/craftcms-sass/_mixins.scss"],"sourcesContent":["@charset \"UTF-8\";\n\n@import '@craftcms/sass/mixins';\n\n#auth-method-setup {\n .auth-method {\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--l);\n\n h3 {\n margin-block-end: var(--xs);\n }\n\n .auth-method-footer {\n margin-block-start: var(--s);\n display: flex;\n flex-direction: row;\n gap: var(--xs);\n\n .auth-method-active,\n .btn {\n height: var(--touch-target-size);\n border-radius: calc(var(--touch-target-size) / 2);\n }\n }\n\n .auth-method-active {\n display: inline-flex;\n flex-flow: row nowrap;\n align-items: center;\n gap: var(--xs);\n padding-inline: 1px var(--s);\n padding-block: 0;\n border: 1px solid var(--enabled-color);\n font-weight: 500;\n\n [data-icon] {\n width: calc(var(--touch-target-size) - 4px);\n height: calc(var(--touch-target-size) - 4px);\n border-radius: calc(var(--touch-target-size) / 2 - 2px);\n background-color: var(--enabled-color);\n text-align: center;\n\n &::before {\n position: relative;\n inset-block-start: -2px;\n color: var(--white);\n opacity: 1;\n }\n }\n }\n }\n}\n\n.auth-method-setup-success {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: var(--s);\n\n .auth-method-setup-success-graphic {\n width: 50px;\n height: 50px;\n border-radius: 50%;\n background-color: var(--enabled-color);\n text-align: center;\n\n &::before {\n position: relative;\n color: var(--white);\n opacity: 1;\n font-size: 34px;\n line-height: 50px;\n }\n }\n\n h1.auth-method-setup-success-message {\n border-block-end: none !important;\n }\n}\n\nul.auth-method-recovery-codes-list {\n --width: 12em;\n --gap: var(--s);\n display: grid;\n width: calc(var(--width) * 2 + var(--gap));\n margin-block: 0;\n margin-inline: auto;\n gap: var(--gap) !important;\n grid-template-columns: var(--width) var(--width);\n grid-template-rows: auto auto auto auto auto;\n grid-auto-flow: column;\n @include fixed-width-font;\n\n li {\n text-align: center;\n }\n}\n\n.auth-method-recovery-codes-download {\n display: flex;\n justify-content: center;\n}\n","@use 'sass:color';\n@use 'sass:list';\n@use 'sass:string';\n$white: #fff;\n$black: #000;\n\n$grey050: hsl(212, 60%, 97%);\n$grey100: hsl(212, 50%, 93%);\n$grey200: hsl(212, 30%, 85%);\n$grey300: hsl(211, 13%, 65%);\n$grey350: hsl(211, 11%, 59%);\n$grey400: hsl(210, 10%, 53%);\n$grey500: hsl(211, 12%, 43%);\n$grey550: hsl(210, 13%, 40%);\n$grey600: hsl(209, 14%, 37%);\n$grey700: hsl(209, 18%, 30%);\n$grey800: hsl(209, 20%, 25%);\n$grey900: hsl(210, 24%, 16%);\n$grey1000: hsl(210, 24%, 10%);\n\n$red050: #fef2f2;\n$red100: #fee2e2;\n$red200: #fecaca;\n$red300: #fca5a5;\n$red400: #f87171;\n$red500: #ef4444;\n$red600: #dc2626;\n$red700: #b91c1c;\n$red800: #991b1b;\n$red900: #7f1d1d;\n\n$orange050: #fff7ed;\n$orange100: #ffedd5;\n$orange200: #fed7aa;\n$orange300: #fdba74;\n$orange400: #fb923c;\n$orange500: #f97316;\n$orange600: #ea580c;\n$orange700: #c2410c;\n$orange800: #9a3412;\n$orange900: #7c2d12;\n\n$yellow050: #fefce8;\n$yellow100: #fef9c3;\n$yellow200: #fef08a;\n$yellow300: #fde047;\n$yellow400: #facc15;\n$yellow500: #eab308;\n$yellow600: #ca8a04;\n$yellow700: #a16207;\n$yellow800: #854d0e;\n$yellow900: #713f12;\n\n$green050: #f0fdf4;\n$green100: #dcfce7;\n$green200: #bbf7d0;\n$green300: #86efac;\n$green400: #4ade80;\n$green500: #22c55e;\n$green600: #16a34a;\n$green700: #15803d;\n$green800: #166534;\n$green900: #14532d;\n\n$teal050: #f0fdfa;\n$teal100: #ccfbf1;\n$teal200: #99f6e4;\n$teal300: #5eead4;\n$teal400: #2dd4bf;\n$teal500: #14b8a6;\n$teal550: #11a697;\n$teal600: #0d9488;\n$teal700: #0f766e;\n$teal800: #115e59;\n$teal900: #134e4a;\n\n$cyan050: #ecfeff;\n$cyan100: #cffafe;\n$cyan200: #a5f3fc;\n$cyan300: #67e8f9;\n$cyan400: #22d3ee;\n$cyan500: #06b6d4;\n$cyan600: #0891b2;\n$cyan700: #0e7490;\n$cyan800: #155e75;\n$cyan900: #164e63;\n\n$blue050: #eff6ff;\n$blue100: #dbeafe;\n$blue200: #bfdbfe;\n$blue300: #93c5fd;\n$blue400: #60a5fa;\n$blue500: #3b82f6;\n$blue600: #2563eb;\n$blue700: #1d4ed8;\n$blue800: #1e40af;\n$blue900: #1e3a8a;\n\n$violet050: #f5f3ff;\n$violet100: #ede9fe;\n$violet200: #ddd6fe;\n$violet300: #c4b5fd;\n$violet400: #a78bfa;\n$violet500: #8b5cf6;\n$violet600: #7c3aed;\n$violet700: #6d28d9;\n$violet800: #5b21b6;\n$violet900: #4c1d95;\n\n$pink050: #fdf2f8;\n$pink100: #fce7f3;\n$pink200: #fbcfe8;\n$pink300: #f9a8d4;\n$pink400: #f472b6;\n$pink500: #ec4899;\n$pink600: #db2777;\n$pink700: #be185d;\n$pink800: #9d174d;\n$pink900: #831843;\n\n// submit button colors\n$primaryColor: $red600;\n$secondaryColor: $grey500;\n\n$inputColor: hsl(212, 25%, 50%);\n\n// text colors\n$textColor: $grey700;\n$mediumDarkTextColor: $grey550;\n$mediumTextColor: $grey550;\n$lightTextColor: $grey500;\n$linkColor: #1f5fea;\n\n// menu colors\n$menuOptionColor: $textColor;\n$menuOptionActiveColor: $textColor;\n$menuOptionActiveBackgroundColor: $grey050;\n\n// hairline colors\n$hairlineColor: color.adjust($grey800, $alpha: -0.9);\n$mediumHairlineColor: color.adjust($grey600, $alpha: -0.75);\n$darkHairlineColor: color.adjust($grey400, $alpha: -0.5);\n\n// focus colors\n$lightFocusColor: $blue300;\n$mediumFocusColor: $blue500;\n$darkFocusColor: #0f74b1;\n\n// focus rings\n$lightFocusRing:\n 0 0 0 1px $lightFocusColor,\n 0 0 0 3px color.adjust($lightFocusColor, $alpha: -0.3);\n$mediumFocusRing:\n 0 0 0 1px $mediumFocusColor,\n 0 0 0 3px color.adjust($mediumFocusColor, $alpha: -0.3);\n$darkFocusRing:\n 0 0 0 1px $darkFocusColor,\n 0 0 0 3px color.adjust($darkFocusColor, $alpha: -0.3);\n\n// selection colors\n$lightSelColor: $grey200;\n$darkSelColor: $grey500;\n\n// alert/notice colors\n$errorColor: $red600;\n$warningColor: $yellow800;\n$successColor: $teal500;\n$noticeColor: $blue800;\n\n// UI element styles\n$smallBorderRadius: 3px;\n$mediumBorderRadius: 4px;\n$largeBorderRadius: 5px;\n\n$menuBorderRadius: $mediumBorderRadius;\n\n@mixin sans-serif-font {\n font-family:\n system-ui,\n BlinkMacSystemFont,\n -apple-system,\n 'Segoe UI',\n 'Roboto',\n 'Oxygen',\n 'Ubuntu',\n 'Cantarell',\n 'Fira Sans',\n 'Droid Sans',\n 'Helvetica Neue',\n sans-serif;\n}\n\n@mixin fixed-width-font {\n font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier,\n monospace;\n font-size: 0.9em !important;\n}\n\n@function toRem($values...) {\n @warn \"torem mixin is deprecated. Use calc($value / 16 * 1rem) instead.\";\n $max: list.length($values);\n $remValues: '';\n\n @for $i from 1 through $max {\n $remValues: #{$remValues + calc(list.nth($values, $i) / 16)}rem;\n\n @if $i < $max {\n $remValues: #{$remValues + ' '};\n }\n }\n\n @return $remValues;\n}\n\n@mixin fontSize($size) {\n @warn \"fontsize mixin is deprecated. Use CSS values instead.\";\n font-size: toRem($size);\n}\n\n// Other\n\n@mixin focus-styles {\n body:not(.reduce-focus-visibility) &:focus,\n body.reduce-focus-visibility &:focus-visible {\n @content;\n }\n}\n\n@mixin svg-mask($color) {\n rect,\n circle,\n ellipse,\n line,\n polyline,\n polygon,\n path,\n text {\n fill: $color;\n stroke-width: 0;\n }\n}\n\n@mixin icon {\n font-family: 'Craft';\n speak: never;\n -webkit-font-feature-settings: 'liga', 'dlig';\n -moz-font-feature-settings: 'liga=1, dlig=1';\n -moz-font-feature-settings: 'liga', 'dlig';\n -ms-font-feature-settings: 'liga', 'dlig';\n -o-font-feature-settings: 'liga', 'dlig';\n font-feature-settings: 'liga', 'dlig';\n text-rendering: optimizeLegibility;\n font-weight: normal;\n font-variant: normal;\n text-transform: none;\n line-height: 1;\n direction: ltr; // Fixes a rendering issue in Chrome/Win\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n\n display: inline-block;\n text-align: center;\n font-style: normal;\n vertical-align: middle;\n word-wrap: normal !important;\n user-select: none;\n}\n\n@mixin angle($dir: down, $color: currentColor, $width: calc(2rem / 16)) {\n display: block;\n content: '';\n font-size: 0;\n width: calc(7rem / 16);\n height: calc(7rem / 16);\n border: solid $color;\n border-width: 0 $width $width 0;\n opacity: 0.8;\n position: relative;\n\n @if $dir == up {\n transform: rotate(225deg);\n inset-block-start: 2px;\n } @else if $dir == down {\n transform: rotate(45deg);\n } @else if $dir == left {\n body.ltr & {\n transform: rotate(135deg);\n }\n body.rtl & {\n transform: rotate(-45deg);\n }\n } @else if $dir == right {\n body.ltr & {\n transform: rotate(-45deg);\n }\n body.rtl & {\n transform: rotate(135deg);\n }\n }\n}\n\n@mixin clearafter {\n content: '';\n display: block;\n height: 0;\n clear: both;\n visibility: hidden;\n}\n\n@mixin shadow {\n box-shadow: 0 1px 5px -1px color.adjust($grey900, $alpha: -0.8);\n}\n\n@mixin pane {\n background: $white;\n box-shadow:\n 0 0 0 1px $grey200,\n 0 2px 12px color.adjust($grey200, $alpha: -0.5);\n\n &:focus {\n box-shadow: var(--focus-ring);\n }\n}\n\n@mixin modal {\n border-radius: $largeBorderRadius;\n background-color: $white;\n box-shadow: 0 25px 100px color.adjust($grey900, $alpha: -0.5) !important;\n}\n\n@mixin light-on-dark-text() {\n // Make light on dark text sharp on Macs\n // (sub-pixel antialiasing looks too bold/blurry with light text on dark background)\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n}\n\n@mixin light-focus-ring() {\n --focus-ring: 0 0 0 1px\n hsl(\n #{color.hue($blue200)},\n #{color.saturation($blue200)},\n #{color.lightness($blue200)}\n ),\n 0 0 0 3px hsla(var(--light-focus-hsl), 1);\n}\n\n@mixin dark-btn-light-bg-focus-ring() {\n --focus-ring: 0 0 0 1px\n hsl(\n #{color.hue($blue200)},\n #{color.saturation($blue200)},\n #{color.lightness($blue200)}\n ),\n 0 0 0 3px hsla(var(--dark-focus-hsl), 0.8);\n}\n\n@mixin custom-color-focus-ring($primary, $secondary: null) {\n @if $secondary != null {\n --focus-ring: 0 0 0 1px #{$primary}, 0 0 0 3px #{$secondary};\n } @else {\n --focus-ring: 0 0 0 3px #{$primary};\n }\n}\n\n@mixin two-color-focus-ring($light-button: true) {\n // Creates a two-color focus ring, with a white\n // If button is light, the dark box shadow is adjacent to the button\n // Else the light box shadow is adjacent to the button\n --light-color: var(--white);\n --dark-color: var(--gray-800);\n\n @if $light-button {\n --focus-ring: 0 0 0 3px var(--dark-color), 0 0 0 6px var(--light-color);\n } @else {\n --focus-ring: 0 0 0 3px var(--light-color), 0 0 0 6px var(--dark-color);\n }\n}\n\n// RTL stuff\n\n@mixin left($left) {\n @warn \"left mixin is deprecated. Use inset-inline-start instead.\";\n inset-inline-start: $left;\n}\n\n@mixin right($right) {\n @warn \"right mixin is deprecated. Use inset-inline-end instead.\";\n inset-inline-end: $right;\n}\n\n@mixin alignleft {\n @warn \"alignleft mixin is deprecated. Use text-align: start instead.\";\n text-align: start;\n}\n\n@mixin alignright {\n @warn \"alignright mixin is deprecated. Use text-align: end instead.\";\n text-align: end;\n}\n\n@mixin border-left($params...) {\n @warn \"border-left mixin is deprecated. Use border-inline-start instead.\";\n border-inline-start: $params;\n}\n\n@mixin border-right($params...) {\n @warn \"border-right mixin is deprecated. Use border-inline-end instead.\";\n border-inline-end: $params;\n}\n\n@mixin border-left-width($param) {\n @warn \"border-left-width mixin is deprecated. Use border-inline-start-width instead.\";\n border-inline-start-width: $param;\n}\n\n@mixin border-right-width($param) {\n @warn \"border-right-width mixin is deprecated. Use border-inline-end-width instead.\";\n border-inline-end-width: $param;\n}\n\n@mixin border-radius($tl, $tr, $br, $bl) {\n @warn \"border-radius mixin is deprecated. Use logical border properties instead.\";\n border-start-start-radius: $tl;\n border-start-end-radius: $tr;\n border-end-end-radius: $br;\n border-end-start-radius: $bl;\n}\n\n@mixin border-top-left-radius($params...) {\n @warn \"border-top-left-radius mixin is deprecated. Use border-start-start-radius instead.\";\n border-start-start-radius: $params;\n}\n\n@mixin border-top-right-radius($params...) {\n @warn \"border-top-right-radius mixin is deprecated. Use border-end-start-radius instead.\";\n border-start-end-radius: $params;\n}\n\n@mixin border-bottom-left-radius($params...) {\n @warn \"border-bottom-left-radius mixin is deprecated. Use border-start-end-radius instead.\";\n border-start-end-radius: $params;\n}\n\n@mixin border-bottom-right-radius($params...) {\n @warn \"border-bottom-right-radius mixin is deprecated. Use border-end-end-radius instead.\";\n border-end-end-radius: $params;\n}\n\n@mixin floatleft {\n @warn \"floatleft mixin is deprecated. Use float: inline-start instead.\";\n float: inline-start;\n}\n\n@mixin floatright {\n @warn \"floatright mixin is deprecated. Use float: inline-end instead.\";\n float: inline-end;\n}\n\n@mixin margin($t, $r, $b, $l, $important: '') {\n @warn \"margin mixin is deprecated. Use logical margin properties instead.\";\n margin-block: $t $b string.unquote($important);\n margin-inline: $l $r string.unquote($important);\n}\n\n@mixin margin-left($margin...) {\n @warn \"margin-left mixin is deprecated. Use margin-inline-start instead.\";\n margin-inline-start: $margin;\n}\n\n@mixin margin-right($margin...) {\n @warn \"margin-left mixin is deprecated. Use margin-inline-end instead.\";\n margin-inline-end: $margin;\n}\n\n@mixin padding($t, $r, $b, $l, $important: '') {\n @warn \"padding mixin is deprecated. Use padding logical properties instead.\";\n padding-block: $t $b string.unquote($important);\n padding-inline: $l $r string.unquote($important);\n}\n\n@mixin padding-left($padding...) {\n @warn \"padding-left mixin is deprecated. Use padding-inline-start properties instead.\";\n padding-inline-start: $padding;\n}\n\n@mixin padding-right($padding...) {\n @warn \"padding-right mixin is deprecated. Use padding-inline-end properties instead.\";\n padding-inline-end: $padding;\n}\n\n// Misc\n\n@mixin dark-inputs {\n @include placeholder-styles($grey400);\n\n .btn,\n .select:not(.selectize) select {\n background-color: $grey200;\n\n &:focus,\n &:hover {\n background-color: color.adjust($grey200, $lightness: -5%);\n }\n\n &:active,\n &.active,\n &[aria-expanded='true'] {\n background-color: color.adjust($grey200, $lightness: -10%);\n }\n }\n\n .text {\n background-color: $grey200;\n\n &:focus {\n background-color: color.adjust($grey200, $lightness: -5%);\n }\n }\n}\n\n@mixin header-btn {\n width: calc(30rem / 16);\n height: calc(30rem / 16);\n padding-left: 0;\n padding-right: 0;\n\n &:not(:hover):not(:active):not(.active):not([aria-expanded='true']) {\n background-color: transparent;\n }\n &:not(:active):not(.active):not([aria-expanded='true']):hover {\n background-color: color.adjust($grey300, $alpha: -0.85);\n }\n}\n\n@mixin h6-styles {\n margin: 14px 0 3px;\n font-size: 11px;\n line-height: 1.2;\n color: $lightTextColor;\n text-transform: uppercase;\n}\n\n@mixin token-styles {\n display: inline-block;\n border-radius: $smallBorderRadius;\n padding: 3px 7px;\n font-size: 12px;\n line-height: 14px;\n color: $textColor;\n background-color: $grey100;\n}\n\n@mixin active-token-styles {\n background-color: $grey200;\n}\n\n@mixin menu-styles {\n z-index: 100;\n border-radius: $menuBorderRadius;\n padding: 0 14px;\n overflow: auto;\n background: $white;\n user-select: none;\n box-shadow:\n 0 0 0 1px color.adjust($grey900, $alpha: -0.9),\n 0 5px 20px color.adjust($grey900, $alpha: -0.75);\n}\n\n@mixin menu-item-styles {\n margin: 0 -14px;\n padding: 10px 14px;\n color: $menuOptionColor;\n text-decoration: none;\n white-space: nowrap;\n}\n\n@mixin menu-item-active-styles {\n color: var(--white) !important;\n --medium-text-color: rgba(255, 255, 255, 0.8);\n --light-text-color: rgba(255, 255, 255, 0.8);\n background-color: var(--dark-sel-color);\n\n svg {\n @include svg-mask(var(--white));\n }\n}\n\n@mixin disclosure-link-hover-styles {\n color: $menuOptionColor;\n background-color: $grey050;\n}\n\n@mixin input-styles {\n border-radius: $smallBorderRadius;\n border: 1px solid color.adjust($inputColor, $alpha: -0.75);\n background-color: hsl(212, 50%, 99%);\n background-clip: padding-box;\n}\n\n@mixin input-focused-styles {\n box-shadow: var(--focus-ring);\n}\n\n@mixin placeholder-styles($color) {\n input::-webkit-input-placeholder,\n textarea::-webkit-input-placeholder {\n color: $color;\n }\n\n input:-ms-input-placeholder,\n textarea:-ms-input-placeholder {\n color: $color;\n }\n\n input::-ms-input-placeholder,\n textarea::-ms-input-placeholder {\n color: $color;\n }\n\n input:-moz-placeholder,\n textarea:-moz-placeholder {\n color: $color;\n }\n\n input::-moz-placeholder,\n textarea::-moz-placeholder {\n color: $color;\n }\n\n input::placeholder,\n textarea::placeholder {\n color: $color;\n }\n}\n\n@mixin select-styles {\n position: relative;\n border-radius: $largeBorderRadius;\n white-space: nowrap;\n}\n\n@mixin select-container-styles {\n max-width: 100%;\n position: relative;\n :not(.flex) > & {\n display: inline-block;\n }\n}\n\n@mixin select-arrow-styles {\n @include angle;\n position: absolute;\n z-index: 1;\n inset-block-start: calc(50% - 5px);\n inset-inline-end: 9px;\n user-select: none;\n pointer-events: none;\n color: var(--ui-control-color);\n}\n\n@mixin select-input-styles {\n display: block;\n position: relative;\n max-width: 100%;\n border: none;\n padding-block: 7px;\n padding-inline: 10px 22px;\n font-size: 14px;\n line-height: 20px;\n color: $textColor;\n background-color: hsl(212, 25%, 90%);\n appearance: none;\n // from https://stackoverflow.com/a/15933790/1688568\n &::-ms-expand {\n display: none;\n }\n}\n\n@mixin select-input-fullwidth-styles {\n min-width: 100%;\n}\n\n@mixin select-input-focused-styles {\n outline-color: transparent;\n background-color: hsl(212, 25%, 85%);\n box-shadow: var(--focus-ring);\n}\n\n@mixin touch-target {\n height: var(--touch-target-size);\n width: var(--touch-target-size);\n}\n\n// https://tailwindcss.com/docs/screen-readers#undoing-screen-reader-only-elements\n@mixin visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n}\n\n@mixin not-visually-hidden {\n position: static;\n width: auto;\n height: auto;\n padding: 0;\n margin: 0;\n overflow: visible;\n clip: auto;\n white-space: normal;\n}\n\n@mixin readable {\n font-size: 16px;\n line-height: 22px;\n\n h1,\n .h1,\n h2,\n .h2,\n h3,\n .h3,\n h4,\n .h4,\n h5,\n .h5,\n h6,\n .h6 {\n margin: 24px 0 16px;\n font-weight: 600;\n }\n\n h1,\n .h1 {\n font-size: 32px;\n line-height: 40px;\n color: #000;\n }\n\n h2,\n .h2 {\n font-size: 24px;\n line-height: 30px;\n }\n\n h3,\n .h3 {\n font-size: 20px;\n line-height: 24px;\n }\n\n h4,\n .h4 {\n font-size: 16px;\n line-height: 20px;\n }\n\n h5,\n .h5 {\n font-size: 14px;\n line-height: 18px;\n }\n\n h6,\n .h6 {\n font-size: 13.6px;\n line-height: 17px;\n color: $mediumTextColor;\n }\n\n ul,\n ol {\n margin: 1em 0;\n padding-inline-start: 2em;\n }\n\n ul li {\n list-style-type: disc;\n }\n\n li + li {\n margin-top: 0.25em;\n }\n\n .tip-dismiss-btn {\n position: absolute;\n top: 12px;\n inset-inline-end: 12px;\n\n & + p {\n margin-top: 0;\n }\n }\n\n blockquote {\n margin: 16px 0;\n\n &:not(.note) {\n padding: 0 16px;\n color: $mediumTextColor;\n border-inline-start: 4px solid $hairlineColor;\n }\n\n &.note {\n position: relative;\n border-radius: 4px;\n padding: 1em;\n padding-inline-start: 50px;\n border: 1px solid;\n\n &.dismissible {\n padding-inline-end: 36px;\n }\n\n &:not(.tip):not(.warning) {\n border-color: $errorColor;\n color: #bf503f;\n\n &:before {\n content: 'alert';\n color: $errorColor;\n }\n }\n\n &.tip {\n border-color: $linkColor;\n color: $linkColor;\n\n &:before {\n content: 'lightbulb';\n color: $linkColor;\n }\n }\n\n &.warning {\n border-color: $warningColor;\n color: #cf783a;\n\n &:before {\n content: 'alert';\n color: $warningColor;\n }\n }\n\n &:before {\n @include icon;\n opacity: 1;\n position: absolute;\n top: 15px;\n inset-inline-start: 16px;\n font-size: 24px;\n width: 24px;\n }\n\n a[href] {\n color: currentColor;\n text-decoration: underline;\n }\n }\n }\n\n .go:after {\n font-size: 14px;\n }\n}\n\n@mixin checkered-bg($size) {\n // h/t https://gist.github.com/dfrankland/f6fed3e3ccc42e3de482b324126f9542\n $halfSize: $size * 0.5;\n background-image: linear-gradient(\n 45deg,\n #{color.adjust($grey300, $alpha: -0.75)} 25%,\n transparent 25%\n ),\n linear-gradient(\n 135deg,\n #{color.adjust($grey300, $alpha: -0.75)} 25%,\n transparent 25%\n ),\n linear-gradient(\n 45deg,\n transparent 75%,\n #{color.adjust($grey300, $alpha: -0.75)} 75%\n ),\n linear-gradient(\n 135deg,\n transparent 75%,\n #{color.adjust($grey300, $alpha: -0.75)} 75%\n );\n background-size: $size $size;\n background-position:\n 0 0,\n $halfSize 0,\n $halfSize -#{$halfSize},\n 0 $halfSize;\n}\n"],"names":[],"sourceRoot":""} ->>>>>>> 5.x +{"version":3,"file":"css/auth.css","mappings":"AAKE,gCAGE,mBAFA,aACA,qBAGA,aADA,6BACA,CAEA,mCACE,2BAGF,oDAEE,aACA,mBACA,cAHA,2BAGA,CAEA,iIAGE,+CADA,+BACA,CAIJ,oDAGE,mBAIA,sCANA,oBACA,qBAMA,gBAJA,cAEA,gBADA,2BAGA,CAEA,gEAIE,sCADA,qDADA,4CAGA,kBAJA,0CAIA,CAEA,uEAGE,mBADA,uBAEA,SAAQ,CAHR,iBAGA,CAOV,2BAIE,mBAHA,aACA,sBAGA,aAFA,uBAGA,kBAEA,8DAIE,sCADA,kBADA,YAGA,kBAJA,UAIA,CAEA,qEAEE,mBAEA,eACA,iBAFA,UAFA,iBAIA,CAIJ,gEACE,gCAIJ,mCC2GE,4EAEA,yBD1GA,mBADA,cACA,CAEA,6BALF,mCAMI,+BAIJ,qCACE,aACA","sources":["webpack:///./css/auth.scss","webpack:///../../../../../packages/craftcms-sass/_mixins.scss"],"sourcesContent":["@charset \"UTF-8\";\n\n@import '@craftcms/sass/mixins';\n\n#auth-method-setup {\n .auth-method {\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--l);\n\n h3 {\n margin-block-end: var(--xs);\n }\n\n .auth-method-footer {\n margin-block-start: var(--s);\n display: flex;\n flex-direction: row;\n gap: var(--xs);\n\n .auth-method-active,\n .btn {\n height: var(--touch-target-size);\n border-radius: calc(var(--touch-target-size) / 2);\n }\n }\n\n .auth-method-active {\n display: inline-flex;\n flex-flow: row nowrap;\n align-items: center;\n gap: var(--xs);\n padding-inline: 1px var(--s);\n padding-block: 0;\n border: 1px solid var(--enabled-color);\n font-weight: 500;\n\n [data-icon] {\n width: calc(var(--touch-target-size) - 4px);\n height: calc(var(--touch-target-size) - 4px);\n border-radius: calc(var(--touch-target-size) / 2 - 2px);\n background-color: var(--enabled-color);\n text-align: center;\n\n &::before {\n position: relative;\n inset-block-start: -2px;\n color: var(--white);\n opacity: 1;\n }\n }\n }\n }\n}\n\n.auth-method-setup-success {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: var(--s);\n text-align: center;\n\n .auth-method-setup-success-graphic {\n width: 50px;\n height: 50px;\n border-radius: 50%;\n background-color: var(--enabled-color);\n text-align: center;\n\n &::before {\n position: relative;\n color: var(--white);\n opacity: 1;\n font-size: 34px;\n line-height: 50px;\n }\n }\n\n h1.auth-method-setup-success-message {\n border-block-end: none !important;\n }\n}\n\nul.auth-method-recovery-codes-list {\n @include fixed-width-font;\n max-width: 20em;\n margin-inline: auto;\n\n @container (min-width: 20em) {\n columns: 2;\n }\n}\n\n.auth-method-recovery-codes-download {\n display: flex;\n justify-content: center;\n}\n","@use 'sass:color';\n@use 'sass:list';\n@use 'sass:string';\n$white: #fff;\n$black: #000;\n\n$grey050: hsl(212, 60%, 97%);\n$grey100: hsl(212, 50%, 93%);\n$grey200: hsl(212, 30%, 85%);\n$grey300: hsl(211, 13%, 65%);\n$grey350: hsl(211, 11%, 59%);\n$grey400: hsl(210, 10%, 53%);\n$grey500: hsl(211, 12%, 43%);\n$grey550: hsl(210, 13%, 40%);\n$grey600: hsl(209, 14%, 37%);\n$grey700: hsl(209, 18%, 30%);\n$grey800: hsl(209, 20%, 25%);\n$grey900: hsl(210, 24%, 16%);\n$grey1000: hsl(210, 24%, 10%);\n\n$red050: #fef2f2;\n$red100: #fee2e2;\n$red200: #fecaca;\n$red300: #fca5a5;\n$red400: #f87171;\n$red500: #ef4444;\n$red600: #dc2626;\n$red700: #b91c1c;\n$red800: #991b1b;\n$red900: #7f1d1d;\n\n$orange050: #fff7ed;\n$orange100: #ffedd5;\n$orange200: #fed7aa;\n$orange300: #fdba74;\n$orange400: #fb923c;\n$orange500: #f97316;\n$orange600: #ea580c;\n$orange700: #c2410c;\n$orange800: #9a3412;\n$orange900: #7c2d12;\n\n$yellow050: #fefce8;\n$yellow100: #fef9c3;\n$yellow200: #fef08a;\n$yellow300: #fde047;\n$yellow400: #facc15;\n$yellow500: #eab308;\n$yellow600: #ca8a04;\n$yellow700: #a16207;\n$yellow800: #854d0e;\n$yellow900: #713f12;\n\n$green050: #f0fdf4;\n$green100: #dcfce7;\n$green200: #bbf7d0;\n$green300: #86efac;\n$green400: #4ade80;\n$green500: #22c55e;\n$green600: #16a34a;\n$green700: #15803d;\n$green800: #166534;\n$green900: #14532d;\n\n$teal050: #f0fdfa;\n$teal100: #ccfbf1;\n$teal200: #99f6e4;\n$teal300: #5eead4;\n$teal400: #2dd4bf;\n$teal500: #14b8a6;\n$teal550: #11a697;\n$teal600: #0d9488;\n$teal700: #0f766e;\n$teal800: #115e59;\n$teal900: #134e4a;\n\n$cyan050: #ecfeff;\n$cyan100: #cffafe;\n$cyan200: #a5f3fc;\n$cyan300: #67e8f9;\n$cyan400: #22d3ee;\n$cyan500: #06b6d4;\n$cyan600: #0891b2;\n$cyan700: #0e7490;\n$cyan800: #155e75;\n$cyan900: #164e63;\n\n$blue050: #eff6ff;\n$blue100: #dbeafe;\n$blue200: #bfdbfe;\n$blue300: #93c5fd;\n$blue400: #60a5fa;\n$blue500: #3b82f6;\n$blue600: #2563eb;\n$blue700: #1d4ed8;\n$blue800: #1e40af;\n$blue900: #1e3a8a;\n\n$violet050: #f5f3ff;\n$violet100: #ede9fe;\n$violet200: #ddd6fe;\n$violet300: #c4b5fd;\n$violet400: #a78bfa;\n$violet500: #8b5cf6;\n$violet600: #7c3aed;\n$violet700: #6d28d9;\n$violet800: #5b21b6;\n$violet900: #4c1d95;\n\n$pink050: #fdf2f8;\n$pink100: #fce7f3;\n$pink200: #fbcfe8;\n$pink300: #f9a8d4;\n$pink400: #f472b6;\n$pink500: #ec4899;\n$pink600: #db2777;\n$pink700: #be185d;\n$pink800: #9d174d;\n$pink900: #831843;\n\n// submit button colors\n$primaryColor: $red600;\n$secondaryColor: $grey500;\n\n$inputColor: hsl(212, 25%, 50%);\n\n// text colors\n$textColor: $grey700;\n$mediumDarkTextColor: $grey550;\n$mediumTextColor: $grey550;\n$lightTextColor: $grey500;\n$linkColor: #1f5fea;\n\n// menu colors\n$menuOptionColor: $textColor;\n$menuOptionActiveColor: $textColor;\n$menuOptionActiveBackgroundColor: $grey050;\n\n// hairline colors\n$hairlineColor: color.adjust($grey800, $alpha: -0.9);\n$mediumHairlineColor: color.adjust($grey600, $alpha: -0.75);\n$darkHairlineColor: color.adjust($grey400, $alpha: -0.5);\n\n// focus colors\n$lightFocusColor: $blue300;\n$mediumFocusColor: $blue500;\n$darkFocusColor: #0f74b1;\n\n// focus rings\n$lightFocusRing:\n 0 0 0 1px $lightFocusColor,\n 0 0 0 3px color.adjust($lightFocusColor, $alpha: -0.3);\n$mediumFocusRing:\n 0 0 0 1px $mediumFocusColor,\n 0 0 0 3px color.adjust($mediumFocusColor, $alpha: -0.3);\n$darkFocusRing:\n 0 0 0 1px $darkFocusColor,\n 0 0 0 3px color.adjust($darkFocusColor, $alpha: -0.3);\n\n// selection colors\n$lightSelColor: $grey200;\n$darkSelColor: $grey500;\n\n// alert/notice colors\n$errorColor: $red600;\n$warningColor: $yellow800;\n$successColor: $teal500;\n$noticeColor: $blue800;\n\n// UI element styles\n$smallBorderRadius: 3px;\n$mediumBorderRadius: 4px;\n$largeBorderRadius: 5px;\n\n$menuBorderRadius: $mediumBorderRadius;\n\n@mixin sans-serif-font {\n font-family:\n system-ui,\n BlinkMacSystemFont,\n -apple-system,\n 'Segoe UI',\n 'Roboto',\n 'Oxygen',\n 'Ubuntu',\n 'Cantarell',\n 'Fira Sans',\n 'Droid Sans',\n 'Helvetica Neue',\n sans-serif;\n}\n\n@mixin fixed-width-font {\n font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier,\n monospace;\n font-size: 0.9em !important;\n}\n\n@function toRem($values...) {\n @warn \"torem mixin is deprecated. Use calc($value / 16 * 1rem) instead.\";\n $max: list.length($values);\n $remValues: '';\n\n @for $i from 1 through $max {\n $remValues: #{$remValues + calc(list.nth($values, $i) / 16)}rem;\n\n @if $i < $max {\n $remValues: #{$remValues + ' '};\n }\n }\n\n @return $remValues;\n}\n\n@mixin fontSize($size) {\n @warn \"fontsize mixin is deprecated. Use CSS values instead.\";\n font-size: toRem($size);\n}\n\n// Other\n\n@mixin focus-styles {\n body:not(.reduce-focus-visibility) &:focus,\n body.reduce-focus-visibility &:focus-visible {\n @content;\n }\n}\n\n@mixin svg-mask($color) {\n rect,\n circle,\n ellipse,\n line,\n polyline,\n polygon,\n path,\n text {\n fill: $color;\n stroke-width: 0;\n }\n}\n\n@mixin icon {\n font-family: 'Craft';\n speak: never;\n -webkit-font-feature-settings: 'liga', 'dlig';\n -moz-font-feature-settings: 'liga=1, dlig=1';\n -moz-font-feature-settings: 'liga', 'dlig';\n -ms-font-feature-settings: 'liga', 'dlig';\n -o-font-feature-settings: 'liga', 'dlig';\n font-feature-settings: 'liga', 'dlig';\n text-rendering: optimizeLegibility;\n font-weight: normal;\n font-variant: normal;\n text-transform: none;\n line-height: 1;\n direction: ltr; // Fixes a rendering issue in Chrome/Win\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n\n display: inline-block;\n text-align: center;\n font-style: normal;\n vertical-align: middle;\n word-wrap: normal !important;\n user-select: none;\n}\n\n@mixin angle($dir: down, $color: currentColor, $width: calc(2rem / 16)) {\n display: block;\n content: '';\n font-size: 0;\n width: calc(7rem / 16);\n height: calc(7rem / 16);\n border: solid $color;\n border-width: 0 $width $width 0;\n opacity: 0.8;\n position: relative;\n\n @if $dir == up {\n transform: rotate(225deg);\n inset-block-start: 2px;\n } @else if $dir == down {\n transform: rotate(45deg);\n } @else if $dir == left {\n body.ltr & {\n transform: rotate(135deg);\n }\n body.rtl & {\n transform: rotate(-45deg);\n }\n } @else if $dir == right {\n body.ltr & {\n transform: rotate(-45deg);\n }\n body.rtl & {\n transform: rotate(135deg);\n }\n }\n}\n\n@mixin clearafter {\n content: '';\n display: block;\n height: 0;\n clear: both;\n visibility: hidden;\n}\n\n@mixin shadow {\n box-shadow: 0 1px 5px -1px color.adjust($grey900, $alpha: -0.8);\n}\n\n@mixin pane {\n background: $white;\n box-shadow:\n 0 0 0 1px $grey200,\n 0 2px 12px color.adjust($grey200, $alpha: -0.5);\n\n &:focus {\n box-shadow: var(--focus-ring);\n }\n}\n\n@mixin modal {\n border-radius: $largeBorderRadius;\n background-color: $white;\n box-shadow: 0 25px 100px color.adjust($grey900, $alpha: -0.5) !important;\n}\n\n@mixin light-on-dark-text() {\n // Make light on dark text sharp on Macs\n // (sub-pixel antialiasing looks too bold/blurry with light text on dark background)\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n}\n\n@mixin light-focus-ring() {\n --focus-ring: 0 0 0 1px\n hsl(\n #{color.hue($blue200)},\n #{color.saturation($blue200)},\n #{color.lightness($blue200)}\n ),\n 0 0 0 3px hsla(var(--light-focus-hsl), 1);\n}\n\n@mixin dark-btn-light-bg-focus-ring() {\n --focus-ring: 0 0 0 1px\n hsl(\n #{color.hue($blue200)},\n #{color.saturation($blue200)},\n #{color.lightness($blue200)}\n ),\n 0 0 0 3px hsla(var(--dark-focus-hsl), 0.8);\n}\n\n@mixin custom-color-focus-ring($primary, $secondary: null) {\n @if $secondary != null {\n --focus-ring: 0 0 0 1px #{$primary}, 0 0 0 3px #{$secondary};\n } @else {\n --focus-ring: 0 0 0 3px #{$primary};\n }\n}\n\n@mixin two-color-focus-ring($light-button: true) {\n // Creates a two-color focus ring, with a white\n // If button is light, the dark box shadow is adjacent to the button\n // Else the light box shadow is adjacent to the button\n --light-color: var(--white);\n --dark-color: var(--gray-800);\n\n @if $light-button {\n --focus-ring: 0 0 0 3px var(--dark-color), 0 0 0 6px var(--light-color);\n } @else {\n --focus-ring: 0 0 0 3px var(--light-color), 0 0 0 6px var(--dark-color);\n }\n}\n\n// RTL stuff\n\n@mixin left($left) {\n @warn \"left mixin is deprecated. Use inset-inline-start instead.\";\n inset-inline-start: $left;\n}\n\n@mixin right($right) {\n @warn \"right mixin is deprecated. Use inset-inline-end instead.\";\n inset-inline-end: $right;\n}\n\n@mixin alignleft {\n @warn \"alignleft mixin is deprecated. Use text-align: start instead.\";\n text-align: start;\n}\n\n@mixin alignright {\n @warn \"alignright mixin is deprecated. Use text-align: end instead.\";\n text-align: end;\n}\n\n@mixin border-left($params...) {\n @warn \"border-left mixin is deprecated. Use border-inline-start instead.\";\n border-inline-start: $params;\n}\n\n@mixin border-right($params...) {\n @warn \"border-right mixin is deprecated. Use border-inline-end instead.\";\n border-inline-end: $params;\n}\n\n@mixin border-left-width($param) {\n @warn \"border-left-width mixin is deprecated. Use border-inline-start-width instead.\";\n border-inline-start-width: $param;\n}\n\n@mixin border-right-width($param) {\n @warn \"border-right-width mixin is deprecated. Use border-inline-end-width instead.\";\n border-inline-end-width: $param;\n}\n\n@mixin border-radius($tl, $tr, $br, $bl) {\n @warn \"border-radius mixin is deprecated. Use logical border properties instead.\";\n border-start-start-radius: $tl;\n border-start-end-radius: $tr;\n border-end-end-radius: $br;\n border-end-start-radius: $bl;\n}\n\n@mixin border-top-left-radius($params...) {\n @warn \"border-top-left-radius mixin is deprecated. Use border-start-start-radius instead.\";\n border-start-start-radius: $params;\n}\n\n@mixin border-top-right-radius($params...) {\n @warn \"border-top-right-radius mixin is deprecated. Use border-end-start-radius instead.\";\n border-start-end-radius: $params;\n}\n\n@mixin border-bottom-left-radius($params...) {\n @warn \"border-bottom-left-radius mixin is deprecated. Use border-start-end-radius instead.\";\n border-start-end-radius: $params;\n}\n\n@mixin border-bottom-right-radius($params...) {\n @warn \"border-bottom-right-radius mixin is deprecated. Use border-end-end-radius instead.\";\n border-end-end-radius: $params;\n}\n\n@mixin floatleft {\n @warn \"floatleft mixin is deprecated. Use float: inline-start instead.\";\n float: inline-start;\n}\n\n@mixin floatright {\n @warn \"floatright mixin is deprecated. Use float: inline-end instead.\";\n float: inline-end;\n}\n\n@mixin margin($t, $r, $b, $l, $important: '') {\n @warn \"margin mixin is deprecated. Use logical margin properties instead.\";\n margin-block: $t $b string.unquote($important);\n margin-inline: $l $r string.unquote($important);\n}\n\n@mixin margin-left($margin...) {\n @warn \"margin-left mixin is deprecated. Use margin-inline-start instead.\";\n margin-inline-start: $margin;\n}\n\n@mixin margin-right($margin...) {\n @warn \"margin-left mixin is deprecated. Use margin-inline-end instead.\";\n margin-inline-end: $margin;\n}\n\n@mixin padding($t, $r, $b, $l, $important: '') {\n @warn \"padding mixin is deprecated. Use padding logical properties instead.\";\n padding-block: $t $b string.unquote($important);\n padding-inline: $l $r string.unquote($important);\n}\n\n@mixin padding-left($padding...) {\n @warn \"padding-left mixin is deprecated. Use padding-inline-start properties instead.\";\n padding-inline-start: $padding;\n}\n\n@mixin padding-right($padding...) {\n @warn \"padding-right mixin is deprecated. Use padding-inline-end properties instead.\";\n padding-inline-end: $padding;\n}\n\n// Misc\n\n@mixin dark-inputs {\n @include placeholder-styles($grey400);\n\n .btn,\n .select:not(.selectize) select {\n background-color: $grey200;\n\n &:focus,\n &:hover {\n background-color: color.adjust($grey200, $lightness: -5%);\n }\n\n &:active,\n &.active,\n &[aria-expanded='true'] {\n background-color: color.adjust($grey200, $lightness: -10%);\n }\n }\n\n .text {\n background-color: $grey200;\n\n &:focus {\n background-color: color.adjust($grey200, $lightness: -5%);\n }\n }\n}\n\n@mixin header-btn {\n width: calc(30rem / 16);\n height: calc(30rem / 16);\n padding-left: 0;\n padding-right: 0;\n\n &:not(:hover):not(:active):not(.active):not([aria-expanded='true']) {\n background-color: transparent;\n }\n &:not(:active):not(.active):not([aria-expanded='true']):hover {\n background-color: color.adjust($grey300, $alpha: -0.85);\n }\n}\n\n@mixin h6-styles {\n margin: 14px 0 3px;\n font-size: 11px;\n line-height: 1.2;\n color: $lightTextColor;\n text-transform: uppercase;\n}\n\n@mixin token-styles {\n display: inline-block;\n border-radius: $smallBorderRadius;\n padding: 3px 7px;\n font-size: 12px;\n line-height: 14px;\n color: $textColor;\n background-color: $grey100;\n}\n\n@mixin active-token-styles {\n background-color: $grey200;\n}\n\n@mixin menu-styles {\n z-index: 100;\n border-radius: $menuBorderRadius;\n padding: 0 14px;\n overflow: auto;\n background: $white;\n user-select: none;\n box-shadow:\n 0 0 0 1px color.adjust($grey900, $alpha: -0.9),\n 0 5px 20px color.adjust($grey900, $alpha: -0.75);\n}\n\n@mixin menu-item-styles {\n margin: 0 -14px;\n padding: 10px 14px;\n color: $menuOptionColor;\n text-decoration: none;\n white-space: nowrap;\n}\n\n@mixin menu-item-active-styles {\n color: var(--white) !important;\n --medium-text-color: rgba(255, 255, 255, 0.8);\n --light-text-color: rgba(255, 255, 255, 0.8);\n background-color: var(--dark-sel-color);\n\n svg {\n @include svg-mask(var(--white));\n }\n}\n\n@mixin disclosure-link-hover-styles {\n color: $menuOptionColor;\n background-color: $grey050;\n}\n\n@mixin input-styles {\n border-radius: $smallBorderRadius;\n border: 1px solid color.adjust($inputColor, $alpha: -0.75);\n background-color: hsl(212, 50%, 99%);\n background-clip: padding-box;\n}\n\n@mixin input-focused-styles {\n box-shadow: var(--focus-ring);\n}\n\n@mixin placeholder-styles($color) {\n input::-webkit-input-placeholder,\n textarea::-webkit-input-placeholder {\n color: $color;\n }\n\n input:-ms-input-placeholder,\n textarea:-ms-input-placeholder {\n color: $color;\n }\n\n input::-ms-input-placeholder,\n textarea::-ms-input-placeholder {\n color: $color;\n }\n\n input:-moz-placeholder,\n textarea:-moz-placeholder {\n color: $color;\n }\n\n input::-moz-placeholder,\n textarea::-moz-placeholder {\n color: $color;\n }\n\n input::placeholder,\n textarea::placeholder {\n color: $color;\n }\n}\n\n@mixin select-styles {\n position: relative;\n border-radius: $largeBorderRadius;\n white-space: nowrap;\n}\n\n@mixin select-container-styles {\n max-width: 100%;\n position: relative;\n :not(.flex) > & {\n display: inline-block;\n }\n}\n\n@mixin select-arrow-styles {\n @include angle;\n position: absolute;\n z-index: 1;\n inset-block-start: calc(50% - 5px);\n inset-inline-end: 9px;\n user-select: none;\n pointer-events: none;\n color: var(--ui-control-color);\n}\n\n@mixin select-input-styles {\n display: block;\n position: relative;\n max-width: 100%;\n border: none;\n padding-block: 7px;\n padding-inline: 10px 22px;\n font-size: 14px;\n line-height: 20px;\n color: $textColor;\n background-color: hsl(212, 25%, 90%);\n appearance: none;\n // from https://stackoverflow.com/a/15933790/1688568\n &::-ms-expand {\n display: none;\n }\n}\n\n@mixin select-input-fullwidth-styles {\n min-width: 100%;\n}\n\n@mixin select-input-focused-styles {\n outline-color: transparent;\n background-color: hsl(212, 25%, 85%);\n box-shadow: var(--focus-ring);\n}\n\n@mixin touch-target {\n height: var(--touch-target-size);\n width: var(--touch-target-size);\n}\n\n// https://tailwindcss.com/docs/screen-readers#undoing-screen-reader-only-elements\n@mixin visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n}\n\n@mixin not-visually-hidden {\n position: static;\n width: auto;\n height: auto;\n padding: 0;\n margin: 0;\n overflow: visible;\n clip: auto;\n white-space: normal;\n}\n\n@mixin readable {\n font-size: 16px;\n line-height: 22px;\n\n h1,\n .h1,\n h2,\n .h2,\n h3,\n .h3,\n h4,\n .h4,\n h5,\n .h5,\n h6,\n .h6 {\n margin: 24px 0 16px;\n font-weight: 600;\n }\n\n h1,\n .h1 {\n font-size: 32px;\n line-height: 40px;\n color: #000;\n }\n\n h2,\n .h2 {\n font-size: 24px;\n line-height: 30px;\n }\n\n h3,\n .h3 {\n font-size: 20px;\n line-height: 24px;\n }\n\n h4,\n .h4 {\n font-size: 16px;\n line-height: 20px;\n }\n\n h5,\n .h5 {\n font-size: 14px;\n line-height: 18px;\n }\n\n h6,\n .h6 {\n font-size: 13.6px;\n line-height: 17px;\n color: $mediumTextColor;\n }\n\n ul,\n ol {\n margin: 1em 0;\n padding-inline-start: 2em;\n }\n\n ul li {\n list-style-type: disc;\n }\n\n li + li {\n margin-top: 0.25em;\n }\n\n .tip-dismiss-btn {\n position: absolute;\n top: 12px;\n inset-inline-end: 12px;\n\n & + p {\n margin-top: 0;\n }\n }\n\n blockquote {\n margin: 16px 0;\n\n &:not(.note) {\n padding: 0 16px;\n color: $mediumTextColor;\n border-inline-start: 4px solid $hairlineColor;\n }\n\n &.note {\n position: relative;\n border-radius: 4px;\n padding: 1em;\n padding-inline-start: 50px;\n border: 1px solid;\n\n &.dismissible {\n padding-inline-end: 36px;\n }\n\n &:not(.tip):not(.warning) {\n border-color: $errorColor;\n color: #bf503f;\n\n &:before {\n content: 'alert';\n color: $errorColor;\n }\n }\n\n &.tip {\n border-color: $linkColor;\n color: $linkColor;\n\n &:before {\n content: 'lightbulb';\n color: $linkColor;\n }\n }\n\n &.warning {\n border-color: $warningColor;\n color: #cf783a;\n\n &:before {\n content: 'alert';\n color: $warningColor;\n }\n }\n\n &:before {\n @include icon;\n opacity: 1;\n position: absolute;\n top: 15px;\n inset-inline-start: 16px;\n font-size: 24px;\n width: 24px;\n }\n\n a[href] {\n color: currentColor;\n text-decoration: underline;\n }\n }\n }\n\n .go:after {\n font-size: 14px;\n }\n}\n\n@mixin checkered-bg($size) {\n // h/t https://gist.github.com/dfrankland/f6fed3e3ccc42e3de482b324126f9542\n $halfSize: $size * 0.5;\n background-image: linear-gradient(\n 45deg,\n #{color.adjust($grey300, $alpha: -0.75)} 25%,\n transparent 25%\n ),\n linear-gradient(\n 135deg,\n #{color.adjust($grey300, $alpha: -0.75)} 25%,\n transparent 25%\n ),\n linear-gradient(\n 45deg,\n transparent 75%,\n #{color.adjust($grey300, $alpha: -0.75)} 75%\n ),\n linear-gradient(\n 135deg,\n transparent 75%,\n #{color.adjust($grey300, $alpha: -0.75)} 75%\n );\n background-size: $size $size;\n background-position:\n 0 0,\n $halfSize 0,\n $halfSize -#{$halfSize},\n 0 $halfSize;\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/src/web/assets/cp/dist/cp.js b/src/web/assets/cp/dist/cp.js index 1782716a484..d037a13a3d2 100644 --- a/src/web/assets/cp/dist/cp.js +++ b/src/web/assets/cp/dist/cp.js @@ -1,3 +1,3 @@ /*! For license information please see cp.js.LICENSE.txt */ -(function(){var __webpack_modules__={463:function(){Craft.Accordion=Garnish.Base.extend({$trigger:null,targetSelector:null,_$target:null,init:function(t){var e=this;this.$trigger=$(t),this.$trigger.data("accordion")&&(console.warn("Double-instantiating an accordion trigger on an element"),this.$trigger.data("accordion").destroy()),this.$trigger.data("accordion",this),this.targetSelector=this.$trigger.attr("aria-controls")?"#".concat(this.$trigger.attr("aria-controls")):null,this.targetSelector&&(this._$target=$(this.targetSelector)),this.addListener(this.$trigger,"click","onTriggerClick"),this.addListener(this.$trigger,"keypress",(function(t){var n=t.keyCode;n!==Garnish.SPACE_KEY&&n!==Garnish.RETURN_KEY||(t.preventDefault(),e.onTriggerClick())}))},onTriggerClick:function(){"true"===this.$trigger.attr("aria-expanded")?this.hideTarget(this._$target):this.showTarget(this._$target)},showTarget:function(t){var e=this;if(t&&t.length){this.showTarget._currentHeight=t.height(),t.removeClass("hidden"),this.$trigger.removeClass("collapsed").addClass("expanded").attr("aria-expanded","true");for(var n=0;n=this.settings.maxItems)){var e=$(t).appendTo(this.$tbody),n=e.find(".delete");this.settings.sortable&&this.sorter.addItems(e),this.$deleteBtns=this.$deleteBtns.add(n),this.addListener(n,"click","handleDeleteBtnClick"),this.totalItems++,this.updateUI()}},reorderItems:function(){var t=this;if(this.settings.sortable){for(var e=[],n=0;n=this.settings.maxItems?$(this.settings.newItemBtnSelector).addClass("hidden"):$(this.settings.newItemBtnSelector).removeClass("hidden"))}},{defaults:{tableSelector:null,noItemsSelector:null,newItemBtnSelector:null,idAttribute:"data-id",nameAttribute:"data-name",sortable:!1,allowDeleteAll:!0,minItems:0,maxItems:null,reorderAction:null,deleteAction:null,reorderSuccessMessage:Craft.t("app","New order saved."),reorderFailMessage:Craft.t("app","Couldn’t save new order."),confirmDeleteMessage:Craft.t("app","Are you sure you want to delete “{name}”?"),deleteSuccessMessage:Craft.t("app","“{name}” deleted."),deleteFailMessage:Craft.t("app","Couldn’t delete “{name}”."),onReorderItems:$.noop,onDeleteItem:$.noop}})},6872:function(){Craft.AssetImageEditor=Garnish.Modal.extend({$body:null,$footer:null,$imageTools:null,$buttons:null,$cancelBtn:null,$replaceBtn:null,$saveBtn:null,$focalPointBtn:null,$editorContainer:null,$straighten:null,$croppingCanvas:null,$spinner:null,$constraintContainer:null,$constraintRadioInputs:null,$customConstraints:null,canvas:null,image:null,viewport:null,focalPoint:null,grid:null,croppingCanvas:null,clipper:null,croppingRectangle:null,cropperHandles:null,cropperGrid:null,croppingShade:null,imageStraightenAngle:0,viewportRotation:0,originalWidth:0,originalHeight:0,imageVerticeCoords:null,zoomRatio:1,animationInProgress:!1,currentView:"",assetId:null,cacheBust:null,draggingCropper:!1,scalingCropper:!1,draggingFocal:!1,previousMouseX:0,previousMouseY:0,shiftKeyHeld:!1,editorHeight:0,editorWidth:0,cropperState:!1,scaleFactor:1,flipData:{},focalPointState:!1,maxImageSize:null,lastLoadedDimensions:null,imageIsLoading:!1,mouseMoveEvent:null,croppingConstraint:!1,constraintOrientation:"landscape",showingCustomConstraint:!1,saving:!1,renderImage:null,renderCropper:null,_queue:null,init:function(t,e){var n=this;this._queue=new Craft.Queue,this.cacheBust=Date.now(),this.setSettings(e,Craft.AssetImageEditor.defaults),null===this.settings.allowDegreeFractions&&(this.settings.allowDegreeFractions=Craft.isImagick),Garnish.prefersReducedMotion()&&(this.settings.animationDuration=1),this.assetId=t,this.flipData={x:0,y:0},this.$container=$('').appendTo(Garnish.$bod),this.$body=$('
').appendTo(this.$container),this.$footer=$('