210 lines
5.6 KiB
SCSS
210 lines
5.6 KiB
SCSS
div.maitrises {
|
|
@include col(100%, calc((100% / 3) - 10px));
|
|
|
|
flex-wrap: wrap;
|
|
|
|
div.col {
|
|
div.header {
|
|
@include button {
|
|
margin-left:auto;
|
|
};
|
|
|
|
display:flex;
|
|
width:100%;
|
|
justify-content: space-between;
|
|
|
|
input {
|
|
padding: 0px;
|
|
width: 50px;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
border: 0px;
|
|
}
|
|
}
|
|
|
|
h1 {
|
|
width:100%;
|
|
font-weight:bold;
|
|
text-transform: uppercase;
|
|
font-size:18px;
|
|
line-height:18px;
|
|
margin-top:15px;
|
|
padding-bottom:2px;
|
|
}
|
|
|
|
div.rank {
|
|
display:flex;
|
|
width:100%;
|
|
justify-content: space-between;
|
|
margin-top:5px;
|
|
|
|
>span {
|
|
font-size:15px;
|
|
letter-spacing: 1px;
|
|
padding-left:5px;
|
|
}
|
|
|
|
div {
|
|
display:flex;
|
|
justify-content: space-between;
|
|
width:60px;
|
|
align-items:center;
|
|
|
|
label {
|
|
position:relative;
|
|
width:16px;
|
|
|
|
input[type="checkbox"] {
|
|
position:absolute;
|
|
width:16px;
|
|
height:16px;
|
|
opacity: 0;
|
|
}
|
|
|
|
span {
|
|
display:block;
|
|
width:12px;
|
|
height:12px;
|
|
|
|
&::before {
|
|
content:"";
|
|
display:blocK;
|
|
width:12px;
|
|
height:12px;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.brown {
|
|
div.header {
|
|
button[type="roll"] {
|
|
color:$brown1;
|
|
}
|
|
|
|
input {
|
|
color: $brown1;
|
|
}
|
|
}
|
|
|
|
h1 {
|
|
color:$brown1;
|
|
border-bottom:2px solid $brown1;
|
|
}
|
|
|
|
div.rank {
|
|
>span {
|
|
color:$brown1;
|
|
}
|
|
|
|
div {
|
|
input[type="hidden"][value="1"] ~ label:nth-of-type(1) > span::before,
|
|
input[type="hidden"][value="2"] ~ label:nth-of-type(1) > span::before,
|
|
input[type="hidden"][value="2"] ~ label:nth-of-type(2) > span::before,
|
|
input[type="hidden"][value="3"] ~ label:nth-of-type(1) > span::before,
|
|
input[type="hidden"][value="3"] ~ label:nth-of-type(2) > span::before,
|
|
input[type="hidden"][value="3"] ~ label:nth-of-type(3) > span::before {
|
|
background:$brown1;
|
|
}
|
|
|
|
label {
|
|
span {
|
|
|
|
&::before {
|
|
border:2px solid $brown1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.grey {
|
|
div.header {
|
|
button[type="roll"] {
|
|
color:$grey1;
|
|
}
|
|
|
|
input {
|
|
color: $grey1;
|
|
}
|
|
}
|
|
|
|
h1 {
|
|
color:$grey1;
|
|
border-bottom:2px solid $grey1;
|
|
}
|
|
|
|
div.rank {
|
|
>span {
|
|
color:$grey1;
|
|
}
|
|
|
|
div {
|
|
input[type="hidden"][value="1"] ~ label:nth-of-type(1) > span::before,
|
|
input[type="hidden"][value="2"] ~ label:nth-of-type(1) > span::before,
|
|
input[type="hidden"][value="2"] ~ label:nth-of-type(2) > span::before,
|
|
input[type="hidden"][value="3"] ~ label:nth-of-type(1) > span::before,
|
|
input[type="hidden"][value="3"] ~ label:nth-of-type(2) > span::before,
|
|
input[type="hidden"][value="3"] ~ label:nth-of-type(3) > span::before {
|
|
background:$grey1;
|
|
}
|
|
|
|
label {
|
|
span {
|
|
|
|
&::before {
|
|
border:2px solid $grey1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.blue {
|
|
div.header {
|
|
button[type="roll"] {
|
|
color:$blue2;
|
|
}
|
|
|
|
input {
|
|
color: $blue2;
|
|
}
|
|
}
|
|
|
|
h1 {
|
|
color:$blue2;
|
|
border-bottom:2px solid $blue2;
|
|
}
|
|
|
|
div.rank {
|
|
>span {
|
|
color:$blue2;
|
|
}
|
|
|
|
div {
|
|
input[type="hidden"][value="1"] ~ label:nth-of-type(1) > span::before,
|
|
input[type="hidden"][value="2"] ~ label:nth-of-type(1) > span::before,
|
|
input[type="hidden"][value="2"] ~ label:nth-of-type(2) > span::before,
|
|
input[type="hidden"][value="3"] ~ label:nth-of-type(1) > span::before,
|
|
input[type="hidden"][value="3"] ~ label:nth-of-type(2) > span::before,
|
|
input[type="hidden"][value="3"] ~ label:nth-of-type(3) > span::before {
|
|
background:$blue2;
|
|
}
|
|
|
|
label {
|
|
span {
|
|
|
|
&::before {
|
|
border:2px solid $blue2;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} |