Rep Hold Tier styling
This commit is contained in:
Peter Varaksin
parent
e1cad1e930
commit
0bdf86ee93
4 changed files with 205 additions and 34 deletions
109
scss/mixin.scss
109
scss/mixin.scss
|
|
@ -1,21 +1,3 @@
|
|||
/*
|
||||
* Custom single radio.
|
||||
*/
|
||||
@mixin custom_radio_with_bg($width, $height, $unchecked_background, $checked_background) {
|
||||
|
||||
display: none;
|
||||
|
||||
&:checked {
|
||||
|
||||
& ~ label {
|
||||
background-image: url($unchecked_background);
|
||||
}
|
||||
& + label {
|
||||
background-image: url($checked_background);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Toothradio
|
||||
*/
|
||||
|
|
@ -48,7 +30,18 @@
|
|||
|
||||
/* Hide the browser's default checkbox */
|
||||
input {
|
||||
@include custom_radio_with_bg($width, $height, $unchecked_background, $checked_background);
|
||||
|
||||
display: none;
|
||||
|
||||
&:checked {
|
||||
|
||||
& ~ label {
|
||||
background-image: url($unchecked_background);
|
||||
}
|
||||
& + label {
|
||||
background-image: url($checked_background);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -234,6 +227,9 @@
|
|||
|
||||
}
|
||||
|
||||
/*
|
||||
* Turf Block
|
||||
*/
|
||||
@mixin turf_block($turf_width, $turf_height) {
|
||||
|
||||
$turf_margin: 20px;
|
||||
|
|
@ -321,3 +317,78 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Toothradio single elements
|
||||
*/
|
||||
@mixin toothradio_single($width, $height, $unchecked_background, $checked_background) {
|
||||
|
||||
display: flex;
|
||||
|
||||
label {
|
||||
|
||||
& {
|
||||
height: $height;
|
||||
width: $width;
|
||||
background-image: url($unchecked_background);
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
margin-right: 5px;
|
||||
|
||||
&:last-of-type {
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Hide the browser's default checkbox */
|
||||
input {
|
||||
|
||||
display: none;
|
||||
|
||||
&:checked {
|
||||
& + label {
|
||||
background-image: url($checked_background);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Custom Radio Round
|
||||
*/
|
||||
@mixin custom_radio_round($diameter, $circle_border_color, $default_color, $accent_color) {
|
||||
|
||||
display: flex;
|
||||
|
||||
label {
|
||||
|
||||
&:not([for$="-0"]) {
|
||||
height: $diameter;
|
||||
width: $diameter;
|
||||
background-color: $accent_color;
|
||||
|
||||
vertical-align: middle;
|
||||
border: 2px solid $accent_color;
|
||||
border-radius: $diameter / 2;
|
||||
}
|
||||
}
|
||||
|
||||
/* Hide the browser's default checkbox */
|
||||
input {
|
||||
display: none;
|
||||
|
||||
&:checked {
|
||||
|
||||
& ~ label:not([for$="-0"]) {
|
||||
border-color: $circle_border_color;
|
||||
background-color: $default_color;
|
||||
}
|
||||
& + label:not([for$="-0"]) {
|
||||
background-color: $accent_color;
|
||||
border-color: $accent_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,10 @@
|
|||
@import 'mixin.scss';
|
||||
|
||||
// Colors
|
||||
$lightgray: #CCC;
|
||||
$gray: #999;
|
||||
$red: red;
|
||||
|
||||
/*
|
||||
* General Styles
|
||||
*/
|
||||
|
|
@ -78,6 +83,16 @@
|
|||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.gray-label {
|
||||
background-color: $gray;
|
||||
color: black;
|
||||
font-size: 21px;
|
||||
text-align: center;
|
||||
padding: 0px 5px;
|
||||
height: 30px !important;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.label-stripe {
|
||||
text-transform: uppercase;
|
||||
background-color: #888;
|
||||
|
|
@ -176,7 +191,7 @@
|
|||
|
||||
// Clock
|
||||
#character-health-clock {
|
||||
@include clock(4, 80, white, red);
|
||||
@include clock(4, 80, white, $red);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
|
@ -347,4 +362,24 @@
|
|||
}
|
||||
}
|
||||
|
||||
#crew-hold {
|
||||
border-top: 2px solid black;
|
||||
@include toothradio_single(17px, 50px, "assets/teeth/stresstooth-halfgrey.png", "assets/teeth/stresstooth-red.png");
|
||||
}
|
||||
|
||||
#crew-tier {
|
||||
|
||||
background-color: $gray;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@include custom_radio_round(18px, gray, $lightgray, black);
|
||||
|
||||
> * {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,3 @@
|
|||
/*
|
||||
* Custom single radio.
|
||||
*/
|
||||
/*
|
||||
* Toothradio
|
||||
*/
|
||||
|
|
@ -16,6 +13,15 @@
|
|||
/*
|
||||
* Create Clock
|
||||
*/
|
||||
/*
|
||||
* Turf Block
|
||||
*/
|
||||
/*
|
||||
* Toothradio single elements
|
||||
*/
|
||||
/*
|
||||
* Custom Radio Round
|
||||
*/
|
||||
/*
|
||||
* General Styles
|
||||
*/
|
||||
|
|
@ -78,6 +84,15 @@
|
|||
height: 30px !important;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
* .gray-label {
|
||||
background-color: #999;
|
||||
color: black;
|
||||
font-size: 21px;
|
||||
text-align: center;
|
||||
padding: 0px 5px;
|
||||
height: 30px !important;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
* .label-stripe {
|
||||
text-transform: uppercase;
|
||||
background-color: #888;
|
||||
|
|
@ -630,5 +645,57 @@
|
|||
top: -7px;
|
||||
left: -7px;
|
||||
}
|
||||
* #crew-hold {
|
||||
border-top: 2px solid black;
|
||||
display: flex;
|
||||
/* Hide the browser's default checkbox */
|
||||
}
|
||||
* #crew-hold label {
|
||||
height: 50px;
|
||||
width: 17px;
|
||||
background-image: url("assets/teeth/stresstooth-halfgrey.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
margin-right: 5px;
|
||||
}
|
||||
* #crew-hold label:last-of-type {
|
||||
margin-right: 0px;
|
||||
}
|
||||
* #crew-hold input {
|
||||
display: none;
|
||||
}
|
||||
* #crew-hold input:checked + label {
|
||||
background-image: url("assets/teeth/stresstooth-red.png");
|
||||
}
|
||||
* #crew-tier {
|
||||
background-color: #999;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
/* Hide the browser's default checkbox */
|
||||
}
|
||||
* #crew-tier label:not([for$="-0"]) {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
background-color: black;
|
||||
vertical-align: middle;
|
||||
border: 2px solid black;
|
||||
border-radius: 9px;
|
||||
}
|
||||
* #crew-tier input {
|
||||
display: none;
|
||||
}
|
||||
* #crew-tier input:checked ~ label:not([for$="-0"]) {
|
||||
border-color: gray;
|
||||
background-color: #CCC;
|
||||
}
|
||||
* #crew-tier input:checked + label:not([for$="-0"]) {
|
||||
background-color: black;
|
||||
border-color: black;
|
||||
}
|
||||
* #crew-tier > * {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=style.css.map */
|
||||
|
|
|
|||
|
|
@ -62,19 +62,19 @@
|
|||
<label for="crew-reputation-12"></label>
|
||||
{{/repturf}}
|
||||
{{/multiboxes}}
|
||||
<div class="black-label">Turf</div>
|
||||
<div class="gray-label">Turf</div>
|
||||
</div>
|
||||
|
||||
<div id="crew-hold">
|
||||
<div>Hold</div>
|
||||
<div id="crew-hold" class="flex-horizontal">
|
||||
<div class="black-label">Hold</div>
|
||||
{{#multiboxes data.hold}}
|
||||
<div>
|
||||
<div>Weak</div>
|
||||
<div class="flex-horizontal">
|
||||
<div class="gray-label">Weak</div>
|
||||
<input id="crew-hold-weak" type="radio" name="data.hold" value="weak">
|
||||
<label for="crew-hold-weak"></label>
|
||||
</div>
|
||||
<div>
|
||||
<div>Strong</div>
|
||||
<div class="flex-horizontal">
|
||||
<div class="gray-label">Strong</div>
|
||||
<input id="crew-hold-strong" type="radio" name="data.hold" value="strong">
|
||||
<label for="crew-hold-strong"></label>
|
||||
</div>
|
||||
|
|
@ -83,10 +83,8 @@
|
|||
|
||||
<div id="crew-tier">
|
||||
{{#multiboxes data.tier}}
|
||||
<div>
|
||||
<label for="crew-tier-0">Tier</label>
|
||||
<input id="crew-tier-0" type="radio" name="data.tier" value="0">
|
||||
</div>
|
||||
<input id="crew-tier-0" type="radio" name="data.tier" value="0">
|
||||
<label for="crew-tier-0" class="black-label">Tier</label>
|
||||
<input id="crew-tier-1" type="radio" name="data.tier" value="1">
|
||||
<label for="crew-tier-1"></label>
|
||||
<input id="crew-tier-2" type="radio" name="data.tier" value="2">
|
||||
|
|
|
|||
Reference in a new issue