// Global
$color: (
primary: #bbd85f,
primary-dark: #869F3A,
primary-light: #FFF9B1,
grey: #666,
white: #fff,
yellow: #ffae02,
yellow-dark: #ff8212
);
@function color($color-name) {
@return map-get($color, $color-name)
}
body {
background-color: color(primary);
margin: 0;
font-family: roboto mono;
}
//FAB
.fab-outer {
position: absolute;
position: fixed;
top: 20px;
left: 0;
float: left;
}
.fab {
color: color(grey);
width: 120px;
text-align: right;
margin: 10px 0;
//btn reset
font-size: 18px;
text-decoration: none;
padding: 8px 16px;
border-radius: 0px 4px 4px 0px;
background-color: color(white);
transition: all 0.3s ease-in-out;
display: block;
//position
position: relative;
left: -103px;
transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1);
&:hover {
transform: translatex(103px);
}
}
.fe30 {
font-size: 18px;
width: 180px;
left: -163px;
transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1);
&::after {
display: none;
background-color: none;
content:"";
}
&:hover {
transform: translatex(163px);
&::after {
position: absolute;
left: 50px;
top: 50px;
display: block;
z-index: 1;
}
}
}
.fe30-yellow {
color: color(yellow);
}
//FAB close
.content-outer {
width: 600px;
border: 2px solid color(white);
margin: 20px auto;
}
// typographic
h1 {
font-size: 40px;
font-weight: 600;
line-height: 50px;
margin: 0;
}
h2 {
font-size: 25px;
font-weight: 500;
line-height: 38px;
margin: 0;
}
p {
color: color(grey);
font-size: 16px;
font-weight: 300;
line-height: 20px;
}
.text-small {
font-family: roboto;
font-size: 11px;
font-weight: 700;
position: relative;
}
.text-medium {
font-size: 13px;
font-weight: 400;
}
.condensed {
font-family: Roboto Condensed;
}
.or {
font-size: 13px;
font-weight: 400;
position: relative;
left: 50px;
}
.invisible {
opacity: 0;
}
/// title
.title-outer {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-content: flex-end;
align-items: flex-end;
}
.title {
display: flex;
color: white;
padding: 20px 0 20px 20px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.copyright-outer {
color: color(white);
padding: 0 20px 20px 0;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-between;
align-content: stretch;
align-items: flex-end;
}
.copyright {
a {
font-weight: 700;
//btn reset
text-decoration: none;
padding: 2px 6px;
border-radius: 4px;
color: white;
transition: all 0.3s ease-in-out;
&:hover {
color: color(grey);
}
}
margin: 10px 0 0 0;
}
.symbol {
color: color(grey);
font-family: roboto;
font-size: 17px;
font-weight: 400;
width: 150px;
}
//
.content {
padding: 30px 20px;
background-color: color(white);
}
.border {
background-color: color(primary);
height: 1px;
width: 100%;
}
// text location
.firstChildPseudo {
left: -6px;
top: -10px;
}
.nth-of-type {
left: 155px;
}
.circle-outer {
display: flex;
flex-direction: row;
}
.circle {
border: 1px solid color(grey);
color: color(grey);
font-size: 14px;
font-weight: 500;
margin: 0 5px;
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.selected {
background-color: color(primary);
}
.circle3-parent {
position: relative;
left: 40px;
}
.bar {
position: relative;
}
//circle //
// circle with number
.number {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: stretch;
align-items: flex-start;
p {
margin: 0 17.7px;
}
}
// circle 1
.circle1-bar-center{
width: 0px;
height: 21px;
border: 0.5px solid color(grey);
position: relative;
left: 20px;
}
// circle 2
.circle2-parent {
position: relative;
left: 21px;
}
.circle2-bar-center{
width: 0px;
height: 9px;
border: 0.5px solid color(grey);
position: relative;
left: 41px;
}
.circle2-bar-horizontal {
width: 41px;
height: 0px;
border: 0.5px solid color(grey);
position: relative;
left: 20px;
}
.circle2-bar1 {
width: 0px;
height: 10px;
border: 0.5px solid #666;
position: relative;
left: 20px;
top: -1px;
}
.circle2-bar2 {
width: 0px;
height: 10px;
border: 0.5px solid #666;
position: absolute;
left: 61px;
top: 11px;
}
// circle 3
.circle3-bar-center{
width: 0px;
height: 21px;
border: 0.5px solid #666;
position: relative;
left: 60px;
}
.circle3-bar1 {
width: 0px;
height: 11px;
border: 0.5px solid #666;
position: absolute;
left: 20px;
top: 10px;
}
.circle3-bar2 {
width: 0px;
height: 11px;
border: 0.5px solid #666;
position: absolute;
left: 102px;
top: 10px;
}
.circle3-bar-horizontal {
width: 82px;
height: 0px;
border: 0.5px solid #666;
position: absolute;
left: 20px;
top: 10px;
}
// circle 4
.circle4-parent {
position: relative;
left: 60px;
}
.circle4-bar-center{
width: 0px;
height: 10px;
border: 0.5px solid #666;
position: relative;
left: 80px;
}
.circle4-bar1 {
width: 0px;
height: 12px;
border: 0.5px solid #666;
position: relative;
left: 20px;
top: -1px;
}
.circle4-bar2 {
width: 0px;
height: 14px;
border: 0.5px solid #666;
position: absolute;
left: 61px;
top: 11px;
}
.circle4-bar3 {
width: 0px;
height: 14px;
border: 0.5px solid #666;
position: absolute;
left: 102px;
top: 11px;
}
.circle4-bar4 {
width: 0px;
height: 14px;
border: 0.5px solid #666;
position: absolute;
left: 142px;
top: 11px;
}
.circle4-bar-horizontal {
width: 122px;
height: 0px;
border: 0.5px solid #666;
position: relative;
left: 20px;
}
// circle 5
.circle5-parent {
position: relative;
left: 83px;
}
.circle5-bar-center{
width: 0px;
height: 10px;
border: 0.5px solid #666;
position: relative;
left: 102px;
}
.circle5-bar1 {
width: 0px;
height: 12px;
border: 0.5px solid #666;
position: relative;
left: 20px;
top: -1px;
}
.circle5-bar2 {
width: 0px;
height: 14px;
border: 0.5px solid #666;
position: absolute;
left: 61px;
top: 11px;
}
.circle5-bar3 {
width: 0px;
height: 14px;
border: 0.5px solid #666;
position: absolute;
left: 102px;
top: 11px;
}
.circle5-bar4 {
width: 0px;
height: 14px;
border: 0.5px solid #666;
position: absolute;
left: 142px;
top: 11px;
}
.circle5-bar5 {
width: 0px;
height: 14px;
border: 0.5px solid #666;
position: absolute;
left: 182px;
top: 11px;
}
.circle5-bar-horizontal {
width: 162px;
height: 0px;
border: 0.5px solid #666;
position: relative;
left: 20px;
}
// circle 6
.circle6-parent {
position: relative;
left: 103px;
}
.circle6-bar-center{
width: 0px;
height: 10px;
border: 0.5px solid #666;
position: relative;
left: 122px;
}
.circle6-bar1 {
width: 0px;
height: 12px;
border: 0.5px solid #666;
position: relative;
left: 20px;
top: -1px;
}
.circle6-bar2 {
width: 0px;
height: 14px;
border: 0.5px solid #666;
position: absolute;
left: 61px;
top: 11px;
}
.circle6-bar3 {
width: 0px;
height: 14px;
border: 0.5px solid #666;
position: absolute;
left: 102px;
top: 11px;
}
.circle6-bar4 {
width: 0px;
height: 14px;
border: 0.5px solid #666;
position: absolute;
left: 142px;
top: 11px;
}
.circle6-bar5 {
width: 0px;
height: 14px;
border: 0.5px solid #666;
position: absolute;
left: 182px;
top: 11px;
}
.circle6-bar6 {
width: 0px;
height: 14px;
border: 0.5px solid #666;
position: absolute;
left: 225px;
top: 11px;
}
.circle6-bar-horizontal {
width: 204px;
height: 0px;
border: 0.5px solid #666;
position: relative;
left: 20px;
}
// 2 Level + 4circle
// Level 1
.level-parent1 {
position: relative;
left: 40px;
}
.level-parent1-bar-center{
width: 0px;
height: 10px;
border: 0.5px solid #666;
position: relative;
left: 60px;
}
.level-parent1-bar-horizontal {
width: 80px;
height: 0px;
border: 0.5px solid #666;
position: relative;
left: 20px;
}
.level-parent1-bar1 {
width: 0px;
height: 12px;
border: 0.5px solid #666;
position: relative;
left: 20px;
top: -1px;
}
.level-parent1-bar2 {
width: 0px;
height: 14px;
border: 0.5px solid #666;
position: absolute;
left: 100px;
top: 11px;
}
.levelCircle {
margin: 0 45px;
}
.level1 {
position: relative;
left: 21px;
}
.flex-row {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: stretch;
align-items: flex-start;
}
//arrow
.arrow-outer {
position: relative;
left: 165px;
margin-top: 5px;
}
.arrow1 {
width: 0;
height: 0;
border-right: 6px solid transparent ;
border-bottom: 8px solid #666; //Coloured border
border-left: 6px solid transparent;
position: relative;
left: 15px;
}
.arrow2 {
width: 0;
height: 0;
border-right: 6px solid transparent ;
border-bottom: 8px solid #666; //Coloured border
border-left: 6px solid transparent;
position: relative;
left: 43px;
}
.arrow-bar-center{
width: 0px;
height: 10px;
border: 0.5px solid #666;
position: relative;
left: 41px;
top: 10px;
}
.arrow-bar-horizontal {
width: 41px;
height: 0px;
border: 0.5px solid #666;
position: relative;
left: 20px;
}
.arrow-bar1 {
width: 0px;
height: 10px;
border: 0.5px solid #666;
position: absolute;
left: 20px;
top: 0px;
}
.arrow-bar2 {
width: 0px;
height: 10px;
border: 0.5px solid #666;
position: absolute;
left: 61px;
top: 0px;
}
// etc
.marginRight {
margin-right: 30px;
}
.hello {
position: relative;
left: -142px;
top: 19px;
}
.doTheMagic {
color: white;
font-family: roboto;
font-weight: 400;
line-height: 30px;
width: 550px;
}
//toggle
.toggleWrapper {
background-color: color(primary);
// position: absolute;
// top: 50%;
// left: 50%;
// overflow: hidden;
// padding: 0 200px;
// transform: translate3d(-50%, -50%, 0);
// input {
// position: absolute;
// left: -99em;
// }
}
.toggle {
cursor: pointer;
display: inline-block;
position: relative;
width: 100px;
height: 54px;
background-color: color(primary-dark);
border: 1px solid color(grey);
border-radius: 90px - 6;
transition: background-color 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
&:before {
content: '🕹game';
position: absolute;
left: -100px;
top: 11px;
font-size: 20px;
font-weight: 700;
color: color(white);
}
&:after {
content: '📖reading';
position: absolute;
right: -120px;
top: 12px;
font-size: 20px;
font-weight: 700;
color: color(primary-dark);
}
}
.btn {
display: inline-block;
position: relative;
z-index: 1;
top: 4px;
left: 6px;
width: 50px - 6;
height: 50px - 6;
background-color: color(white);
border: 1px solid color(grey);
border-radius: 50px;
box-shadow: 0 2px 6px rgba(0,0,0,.3);
transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
transform: rotate(-45deg);
}
input:checked {
+ .toggle {
background-color: color(primary-dark);
&:before {
color: color(primary-dark);
}
&:after {
color: color(yellow);
// text-shadow: -1px 0 color(grey), 0 1px color(grey), 1px 0 color(grey), 0 -1px color(grey);
}
.btn {
background-color: color(yellow);
transform: translate3d(44px, 0, 0) rotate(0);
.crater { opacity: 1; }
}
}
}
//button default style
.c-btn {
text-decoration: none;
padding: 2px 12px;
border: 1px solid white;
border-radius: 4px;
color: white;
transition: all 0.3s ease-in-out;
&:hover {
background-color: color(primary-dark);
}
}
.button {
margin: 40px 0;
}
//footer
.footer {
background-color: color(primary);
color: white;
padding: 20px;
}
!
