uberwald/l5rx-chiaroscuro
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

merge

Browse Source
This commit is contained in:
Vlyan
2020-12-08 18:48:02 +01:00
parent a82804c1d6 b345503043
commit 443ada32b0
40 changed files with 615 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files

158
system/styles/scss/rings.scss
View File

@@ -1,9 +1,151 @@
//SCSS
// l5re5.scss
.testing {
width: percentage(1/7);
/** Rings **/
.rings {
display: flex;
flex-wrap: wrap;
color: $white;
// All
#earth,
#air,
#water,
#fire,
#void {
position: relative;
flex: 1 1 50%;
text-align: center;
i.i_earth,
i.i_water,
i.i_fire,
i.i_air,
i.i_void {
font-size: 5rem;
line-height: 4.75rem;
}
label {
position: relative;
width: 5rem;
line-height: 0;
float: right;
}
input {
position: absolute;
height: 2rem;
width: 2rem;
border-radius: 100%;
top: 0;
left: 0;
border: 2px solid $l5r5e-title;
color: $white;
&:hover {
border: 2px solid $red;
text-shadow: 0 0 6px $red;
box-shadow: 0 0 6px inset $red;
}
}
}
// Earth
#earth {
float: right;
color: $l5r5e-earth;
input {
top: auto;
right: 0;
bottom: -1rem;
left: auto;
background: $l5r5e-earth;
}
label {
strong {
position: absolute;
bottom: 0.75rem;
left: -1.5rem;
}
}
}
// Air
#air {
color: $l5r5e-air;
input {
top: auto;
right: auto;
bottom: -1rem;
left: 0;
background: $l5r5e-air;
}
label {
float: left;
strong {
position: absolute;
bottom: 0.75rem;
right: -1rem;
}
}
}
// Water
#water {
float: right;
color: $l5r5e-water;
padding-right: 2rem;
input {
top: 17%;
right: -1.25rem;
bottom: auto;
left: auto;
background: $l5r5e-water;
}
label {
strong {
position: absolute;
bottom: -0.75rem;
right: 2rem;
}
}
}
// Fire
#fire {
color: $l5r5e-fire;
padding-left: 2rem;
input {
top: 17%;
right: auto;
bottom: auto;
left: -1.25rem;
background: $l5r5e-fire;
}
label {
float: left;
strong {
position: absolute;
bottom: -0.75rem;
right: 2rem;
}
}
}
// Void
#void {
top: -2rem;
margin: 0 calc(50% - 2.5rem);
color: $l5r5e-void;
input {
top: -1rem;
right: auto;
bottom: auto;
left: 30%;
background: $l5r5e-void;
}
label {
strong {
position: absolute;
bottom: -0.75rem;
left: 1.75rem;
}
}
}
}
// test
.testing {
width: percentage(2/7);
}