mirror of
https://github.com/Raghu-Ch/front-end-coding-challenge.git
synced 2026-02-10 04:43:01 -05:00
109 lines
2.5 KiB
SCSS
109 lines
2.5 KiB
SCSS
.menu {
|
|
background-color: rgba(255, 255, 255, 0.8);
|
|
height: 100%;
|
|
left: -20em;
|
|
min-width: 200px;
|
|
padding: 0 1em;
|
|
position: fixed;
|
|
transition: all .6s cubic-bezier(.9,0,.33,1) .2s;
|
|
width: 20em;
|
|
z-index: 1;
|
|
|
|
// styles for the hamburger
|
|
.tab {
|
|
position: absolute;
|
|
width: 50px;
|
|
height: 50px;
|
|
right: -50px;
|
|
cursor: pointer;
|
|
padding: 7px 9px;
|
|
border-left: 0;
|
|
border-radius: 10px 10px 10px 10px;
|
|
transition: right .6s cubic-bezier(.9,0,.33,1) .2s;
|
|
|
|
i {
|
|
position: absolute;
|
|
top: 7px;
|
|
left: 9px;
|
|
transition: opacity .6s cubic-bezier(.9,0,.33,1) .2s;
|
|
font-size: 36px;
|
|
}
|
|
|
|
.open {
|
|
color: rgba(255, 255, 255, 0.4);
|
|
opacity: 1;
|
|
}
|
|
|
|
.close {
|
|
color: rgba(0, 0, 0, 0.4);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
input {
|
|
background-color: rgba(0,0,0,0);
|
|
border-bottom-color: rgba($mojo, .6);
|
|
border-width: 0 0 2px 0;
|
|
font-size: 1.25em;
|
|
font-style: italic;
|
|
width: 250px;
|
|
|
|
text-transform: capitalize;
|
|
|
|
transition: border-bottom-color .6s ease;
|
|
|
|
&.mojo {border-bottom-color: rgba($mojo, .6);}
|
|
&.governor-bay {border-bottom-color: rgba($governor-bay, .6);}
|
|
&.bluewood {border-bottom-color: rgba($bluewood, .6);}
|
|
&.fire-bush {border-bottom-color: rgba($fire-bush, .6);}
|
|
&.burnt-sienna {border-bottom-color: rgba($burnt-sienna, .6);}
|
|
&.wine-berry {border-bottom-color: rgba($wine-berry, .6);}
|
|
&.tom-thumb {border-bottom-color: rgba($tom-thumb, .6);}
|
|
&.thunder {border-bottom-color: rgba($thunder, .6);}
|
|
&.vista {border-bottom-color: rgba($vista, .6);}
|
|
}
|
|
|
|
// styles for the theme selector
|
|
.theme{
|
|
border-radius: 15px;
|
|
overflow: hidden;
|
|
width: 75%;
|
|
margin: auto;
|
|
padding: 0;
|
|
|
|
.color {
|
|
width: 33%;
|
|
margin: 1px;
|
|
height: 60px;
|
|
position: relative;
|
|
float: left;
|
|
cursor: move;
|
|
|
|
&:after {content: "\00a0";}
|
|
|
|
&.mojo {background: $mojo;}
|
|
&.governor-bay {background: $governor-bay;}
|
|
&.bluewood {background: $bluewood;}
|
|
&.fire-bush {background: $fire-bush;}
|
|
&.burnt-sienna {background: $burnt-sienna;}
|
|
&.wine-berry {background: $wine-berry;}
|
|
&.tom-thumb {background: $tom-thumb;}
|
|
&.thunder {background: $thunder;}
|
|
&.vista {background: $vista;}
|
|
}
|
|
}
|
|
|
|
// styles when menu is open
|
|
&.open {
|
|
left: 0;
|
|
box-shadow: 0 0 20px 10px rgba(27, 255, 34, 0.3);
|
|
|
|
.tab {
|
|
top: 25px;
|
|
right: 0px;
|
|
|
|
.open {opacity: 0;}
|
|
.close {opacity: 1;}
|
|
}
|
|
}
|
|
} |