BREAKING CHANGE: Pre-design-tokens theming is no longer supported. Co-authored-by: Diana Olarte <diana.olarte@edunext.co>
55 lines
1.1 KiB
SCSS
55 lines
1.1 KiB
SCSS
@import "variables";
|
|
|
|
.pgn__selectable_box-set {
|
|
display: grid;
|
|
grid-auto-rows: 1fr;
|
|
grid-gap: var(--pgn-spacing-selectable-box-box-space);
|
|
|
|
@for $i from $min-cols-number through $max-cols-number {
|
|
&.pgn__selectable_box-set--#{$i} {
|
|
grid-template-columns: repeat(#{$i}, 1fr);
|
|
}
|
|
}
|
|
|
|
& > * + * {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.pgn__selectable_box {
|
|
position: relative;
|
|
height: 100%;
|
|
padding: var(--pgn-spacing-selectable-box-padding);
|
|
box-shadow: var(--pgn-elevation-box-shadow-level-1);
|
|
border-radius: var(--pgn-spacing-selectable-box-border-radius);
|
|
text-align: start;
|
|
background: var(--pgn-color-white);
|
|
|
|
&:focus-visible {
|
|
outline: 1px solid var(--pgn-color-primary-700);
|
|
}
|
|
|
|
.pgn__form-radio,
|
|
.pgn__form-checkbox {
|
|
position: absolute;
|
|
top: var(--pgn-spacing-selectable-box-padding);
|
|
inset-inline-end: var(--pgn-spacing-selectable-box-padding);
|
|
|
|
input {
|
|
margin-inline-end: 0;
|
|
}
|
|
}
|
|
|
|
* {
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
.pgn__selectable_box-active {
|
|
outline: 2px solid var(--pgn-color-primary-500);
|
|
}
|
|
|
|
.pgn__selectable_box-invalid {
|
|
outline: 2px solid var(--pgn-color-danger-300);
|
|
}
|