diff --git a/console/src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component.scss b/console/src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component.scss index c46ee15bc..d1d660688 100644 --- a/console/src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component.scss +++ b/console/src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component.scss @@ -1,21 +1,3 @@ -.auth-method-radio-button-wrapper { - display: flex; - flex-direction: row; - flex-wrap: nowrap; - overflow-x: auto; - overflow-y: hidden; - margin: 0; - padding-bottom: 0.5rem; - padding-top: 1rem; - - &.compact { - display: grid; - grid-template-columns: 1fr 1fr; - column-gap: 1rem; - row-gap: 1rem; - } -} - @mixin app-auth-method-radio-theme($theme) { $primary: map-get($theme, primary); $primary-color: map-get($primary, 500); @@ -23,144 +5,162 @@ $background: map-get($theme, background); $border-color: if($is-dark-theme, rgba(#8795a1, 0.2), rgba(#8795a1, 0.2)); - input[type='radio'] { - appearance: none; - opacity: 0; - display: none; - box-sizing: border-box; - - &:focus { - border: 1px solid if($is-dark-theme, white, black); - } - } - - input:checked + label { - border-color: $primary-color; - border-width: 2px; - box-shadow: 0 0 6px rgb(0 0 0 / 10%); - - .cnsl-radio-header span { - color: if($is-dark-theme, white, white); - } - } - - .cnsl-radio-button { - margin: 0.5rem; - border-radius: 0.5rem; - border: 1px solid $border-color; + .auth-method-radio-button-wrapper { display: flex; - flex-direction: column; - background-color: map-get($background, cards); - flex: 0 1 230px; - box-sizing: border-box; - cursor: pointer; - position: relative; - padding-bottom: 1rem; - - &.first { - margin-left: 0; - } - - &.last { - margin-right: 0; - } - - .recommended { - position: absolute; - bottom: 0; - left: 50%; - transform: translateY(50%) translateX(-50%); - border-radius: 50vw; - font-size: 11px; - background: white; - color: black; - padding: 3px 1rem; - box-shadow: 0 0 6px rgb(0 0 0 / 10%); - white-space: nowrap; - border: 1px solid $border-color; - - &.not { - background: rgb(144 75 75); - color: white; - } - } - - .cnsl-radio-header { - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - background: rgb(80, 110, 110); - border-top-left-radius: 6px; - border-top-right-radius: 6px; - position: relative; - - .current { - position: absolute; - bottom: 0.5rem; - left: 50%; - transform: translateX(-50%); - display: block; - color: #ffffff90; - white-space: nowrap; - font-size: 12px; - } - - span { - margin: 2rem; - font-size: 30px; - color: if($is-dark-theme, #00000050, #ffffff50); - } - } + flex-direction: row; + flex-wrap: nowrap; + overflow-x: auto; + overflow-y: hidden; + margin: 0; + padding-bottom: 0.5rem; + padding-top: 1rem; &.compact { - margin: 0; - width: 230px; + display: grid; + grid-template-columns: 1fr 1fr; + column-gap: 1rem; + row-gap: 1rem; + } - .cnsl-radio-header { - span { - margin: 1rem 0 1.5rem 0; - } + input[type='radio'] { + appearance: none; + opacity: 0; + display: none; + box-sizing: border-box; + + &:focus { + border: 1px solid if($is-dark-theme, white, black); } } - p { - text-align: center; - padding: 0 1rem; + input:checked + label { + border-color: $primary-color; + border-width: 2px; + box-shadow: 0 0 6px rgb(0 0 0 / 10%); + + .cnsl-radio-header span { + color: if($is-dark-theme, white, white); + } } - .type-desc { - font-size: 14px; - } + .cnsl-radio-button { + margin: 0.5rem; + border-radius: 0.5rem; + border: 1px solid $border-color; + display: flex; + flex-direction: column; + background-color: map-get($background, cards); + flex: 0 1 230px; + box-sizing: border-box; + cursor: pointer; + position: relative; + padding-bottom: 1rem; - .fill-space { - flex: 1; - } + &.first { + margin-left: 0; + } - .app-specs { - display: block; - padding: 1rem 0; - margin: 0 1rem; + &.last { + margin-right: 0; + } - .row { + .recommended { + position: absolute; + bottom: 0; + left: 50%; + transform: translateY(50%) translateX(-50%); + border-radius: 50vw; + font-size: 11px; + background: white; + color: black; + padding: 3px 1rem; + box-shadow: 0 0 6px rgb(0 0 0 / 10%); + white-space: nowrap; + border: 1px solid $border-color; + + &.not { + background: rgb(144 75 75); + color: white; + } + } + + .cnsl-radio-header { display: flex; - justify-content: space-between; align-items: center; - font-size: 12px; - margin: 3px 0; + justify-content: center; + flex-direction: column; + background: rgb(80, 110, 110); + border-top-left-radius: 6px; + border-top-right-radius: 6px; + position: relative; + + .current { + position: absolute; + bottom: 0.5rem; + left: 50%; + transform: translateX(-50%); + display: block; + color: #ffffff90; + white-space: nowrap; + font-size: 12px; + } span { - white-space: nowrap; + margin: 2rem; + font-size: 30px; + color: if($is-dark-theme, #00000050, #ffffff50); } + } - .space { - margin-left: 0.5rem; + &.compact { + margin: 0; + width: 230px; + + .cnsl-radio-header { + span { + margin: 1rem 0 1.5rem 0; + } } + } - .row-entry { - margin-right: 1rem; - overflow: hidden; - text-overflow: ellipsis; + p { + text-align: center; + padding: 0 1rem; + } + + .type-desc { + font-size: 14px; + } + + .fill-space { + flex: 1; + } + + .app-specs { + display: block; + padding: 1rem 0; + margin: 0 1rem; + + .row { + display: flex; + justify-content: space-between; + align-items: center; + font-size: 12px; + margin: 3px 0; + + span { + white-space: nowrap; + } + + .space { + margin-left: 0.5rem; + } + + .row-entry { + margin-right: 1rem; + overflow: hidden; + text-overflow: ellipsis; + } } } }