mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-10-22 10:16:08 +02:00
35 lines
899 B
SCSS
35 lines
899 B
SCSS
/* Demo */
|
|
.box-selector-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
column-gap: 0.5rem;
|
|
row-gap: 0.5rem;
|
|
|
|
height: 8rem;
|
|
width: 8rem;
|
|
}
|
|
|
|
.box-selector {
|
|
border: 1px solid #d1d5db;
|
|
border-radius: 0.25rem;
|
|
padding: .5rem;
|
|
}
|
|
|
|
.box-selector--selected {
|
|
border: 2px solid #3b82f6;
|
|
position: relative;
|
|
|
|
&:before {
|
|
content: '';
|
|
left: 0.25rem;
|
|
position: absolute;
|
|
top: 0.25rem;
|
|
|
|
height: 1rem;
|
|
width: 1rem;
|
|
|
|
background-image: url("data:image/svg+xml,%3Csvg fill='%233b82f6' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'%3E%3C/path%3E%3C/svg%3E");
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
} |