474 lines
10 KiB
SCSS
474 lines
10 KiB
SCSS
main {
|
|
max-width: 900px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
margin: auto;
|
|
padding: 0 1.25rem 0 1.25rem;
|
|
}
|
|
|
|
// Mobile
|
|
@media only screen
|
|
and (max-width : 900px)
|
|
{
|
|
main {
|
|
max-width: 460px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
margin: auto;
|
|
padding: 0 1.25rem 0 1.25rem;
|
|
}
|
|
|
|
.brand {
|
|
padding: 0 1rem 0 1rem;
|
|
margin: 7rem 0 5rem 0;
|
|
}
|
|
|
|
header, #menu {
|
|
padding: 1.25rem 1.75rem 0 1.75rem;
|
|
}
|
|
|
|
#menu {
|
|
padding-top: 4rem;
|
|
}
|
|
|
|
#menu > a {
|
|
color: white;
|
|
font-size: 8vw;
|
|
font-weight: 600;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
#menu > a > img {
|
|
height: 1em;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 12vw;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 8vw;
|
|
}
|
|
|
|
span {
|
|
font-size: 12px;
|
|
}
|
|
|
|
p {
|
|
font-size: 4vw;
|
|
}
|
|
}
|
|
|
|
|
|
//Don't mind me
|
|
//Text
|
|
$base__font-size: 16px;
|
|
|
|
$font-family--montserrat: 'Montserrat', sans-serif;
|
|
$font-family--primary : $font-family--montserrat;
|
|
|
|
//Colors
|
|
$white: #fff;
|
|
$black: #222741;
|
|
$gray: #99A4AE;
|
|
$blue: #00788a;
|
|
$yellow: #FDCA40;
|
|
$green: #86D8C9;
|
|
|
|
//Color Palette
|
|
$palettes: (
|
|
gray-shades: (
|
|
darker: #9FAAB7,
|
|
base: #99A4AE,
|
|
light: #DCDCE3,
|
|
lighter: #BEC1CA,
|
|
lightest: #F2F6F8
|
|
)
|
|
);
|
|
|
|
// Color usages
|
|
$main-background-color: #F8FAFA;
|
|
$calendar-item-border: #FEFEFE;
|
|
$calendar-item-text: #424588;
|
|
$calendar-button-color: #E9E8E8;
|
|
|
|
//Font size variables
|
|
$lg-font-size: 20px;
|
|
$default-font-size: 14px;
|
|
$sm-font-size: 12px;
|
|
$xsm-font-size: 10px;
|
|
|
|
//Font weight variables
|
|
$font-weight--bold: 700;
|
|
$font-weight--semi-bold: 600;
|
|
$font-weight--regular: 400;
|
|
|
|
//Color Usage
|
|
$primary-color: $blue;
|
|
|
|
@function palette($palette, $shade: base){
|
|
@return map-get(map-get($palettes, $palette), $shade);
|
|
}
|
|
// Retrieved from https://github.com/sshikhrakar/Sass-Starter/
|
|
// BEM(Block Element Modifier) Naming Convention
|
|
// For Element
|
|
// $element - Just the element name for the parent block (doesn't require the parent Block name)
|
|
// @usage - `.Nav {@include e(item){...}}`
|
|
@mixin e($element){
|
|
&__#{$element}{
|
|
@content;
|
|
}
|
|
}
|
|
|
|
// For Modifier
|
|
// $modifier - Just the modifier name for the parent block or element
|
|
// @usage - `.Nav {@include e(item) {@include m(active) {...}}}`
|
|
@mixin m($modifier){
|
|
&--#{$modifier}{
|
|
@content;
|
|
}
|
|
}
|
|
|
|
// Media Query
|
|
@mixin mq($break){
|
|
@if type-of($break) == 'number' {
|
|
@media(min-width: $break + 'px') {
|
|
@content;
|
|
}
|
|
}
|
|
@else {
|
|
@error "No value could be retrieved for '#{$break}'";
|
|
}
|
|
}
|
|
|
|
.mock-up-link {
|
|
display: none;
|
|
|
|
@include mq(768) {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.main-container-wrapper {
|
|
background-color: $main-background-color;
|
|
min-width: 320px;
|
|
min-height: 568px;
|
|
max-width: 414px;
|
|
overflow-y: auto;
|
|
|
|
@include mq(415) {
|
|
-moz-box-shadow: 0px 32px 47px rgba(32, 23, 23, 0.09);
|
|
-webkit-box-shadow: 0px 32px 47px rgba(32, 23, 23, 0.09);
|
|
box-shadow: 0px 32px 47px rgba(32, 23, 23, 0.09);
|
|
margin: 24px auto;
|
|
}
|
|
}
|
|
|
|
.header {
|
|
@include e(btn) {
|
|
background-color: $primary-color;
|
|
border: 2px solid $white;
|
|
border-radius: 50%;
|
|
-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
|
|
-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
|
|
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
|
|
cursor: pointer;
|
|
height: 80px;
|
|
padding-top: 18px;
|
|
position: absolute;
|
|
top: -25px;
|
|
width: 80px;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
background: darken($primary-color, 8%);
|
|
transition: all 0.3s ease-in;
|
|
outline: none;
|
|
}
|
|
|
|
.icon {
|
|
display: inline-block;
|
|
}
|
|
|
|
@include m(left) {
|
|
left: -25px;
|
|
padding-left: 38px;
|
|
text-align: left;
|
|
}
|
|
|
|
@include m(right) {
|
|
padding-right: 32px;
|
|
right: -25px;
|
|
text-align: right;
|
|
}
|
|
}
|
|
}
|
|
|
|
.calendar-container {
|
|
background-color: $white;
|
|
padding: 16px;
|
|
margin-bottom: 24px;
|
|
|
|
@include e(header) {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
@include e(btn) {
|
|
background: transparent;
|
|
border: 0;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
outline: none;
|
|
color: $calendar-button-color;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: palette(gray-shades, darker);
|
|
transition: all 0.3s ease-in;
|
|
}
|
|
}
|
|
|
|
@include e(title) {
|
|
color: $black;
|
|
font-size: $lg-font-size;
|
|
font-weight: $font-weight--bold;
|
|
}
|
|
}
|
|
|
|
.calendar-table {
|
|
margin-top: 12px;
|
|
width: 100%;
|
|
|
|
@include e(item) {
|
|
border: 2px solid transparent;
|
|
border-radius: 50%;
|
|
color: $calendar-item-text;
|
|
font-size: $sm-font-size;
|
|
font-weight: $font-weight--bold;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
background: RGBA(0, 120, 138, 0.6);
|
|
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
|
|
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
|
|
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
|
|
transition: 0.2s all ease-in;
|
|
}
|
|
|
|
&:hover > span {
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
@include e(row) {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
@include e(header) {
|
|
border-bottom: 2px solid palette(gray-shades, lightest);
|
|
margin-bottom: 4px;
|
|
|
|
.calendar-table__col {
|
|
display: inline-block;
|
|
color: $gray;
|
|
font-size: $sm-font-size;
|
|
font-weight: $font-weight--bold;
|
|
padding: 6px 3px;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
width: 40px;
|
|
height: 18px;
|
|
|
|
@include mq(360) {
|
|
width: 46px;
|
|
}
|
|
|
|
@include mq(410) {
|
|
width: 47.5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include e(body) {
|
|
.calendar-table__col {
|
|
width: 40px;
|
|
height: 42px;
|
|
padding-bottom: 2px;
|
|
|
|
@include mq(360) {
|
|
width: 46px;
|
|
height: 24px;
|
|
}
|
|
|
|
@include mq(410) {
|
|
width: 54px;
|
|
height: 56px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include e(today) {
|
|
.calendar-table__item {
|
|
border-color: $calendar-item-border;
|
|
background-color: $blue;
|
|
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
|
|
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
|
|
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
|
|
}
|
|
}
|
|
|
|
@include e(event) {
|
|
.calendar-table__item {
|
|
background-color: $blue;
|
|
border-color: $calendar-item-border;
|
|
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
|
|
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
|
|
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
|
|
color: $white;
|
|
}
|
|
|
|
@include m(long) {
|
|
overflow-x: hidden;
|
|
|
|
.calendar-table__item {
|
|
border-radius: 0;
|
|
border-width: 2px 0;
|
|
}
|
|
}
|
|
|
|
@include m(start) {
|
|
.calendar-table__item {
|
|
border-left: 2px solid $white;
|
|
border-radius: 50% 0 0 50%;
|
|
}
|
|
|
|
&.calendar-table__col:last-child {
|
|
.calendar-table__item {
|
|
border-width: 2px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include m(end) {
|
|
.calendar-table__item {
|
|
border-right: 2px solid $white;
|
|
border-radius: 0 50% 50% 0;
|
|
}
|
|
|
|
&.calendar-table__col:first-child {
|
|
.calendar-table__item {
|
|
border-width: 2px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include e(inactive) {
|
|
.calendar-table__item {
|
|
color: palette(gray-shades, light);
|
|
cursor: default;
|
|
|
|
&:hover {
|
|
background: transparent;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
&.calendar-table__event {
|
|
.calendar-table__item {
|
|
color: $white;
|
|
opacity: 0.25;
|
|
|
|
&:hover {
|
|
background: $blue;
|
|
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
|
|
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
|
|
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.calendar-table__today > .calendar-table__item > span {
|
|
color: white;
|
|
}
|
|
|
|
.events-container {
|
|
padding: 0 15px;
|
|
}
|
|
|
|
.events {
|
|
@include e(title) {
|
|
color: palette(gray-shades, lighter);
|
|
display: inline-block;
|
|
font-size: $default-font-size;
|
|
font-weight: $font-weight--semi-bold;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
@include e(tag) {
|
|
background: $blue;
|
|
border: 2px solid $calendar-item-border;
|
|
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
|
|
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
|
|
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
|
|
border-radius: 20px;
|
|
color: $white;
|
|
font-size: $xsm-font-size;
|
|
font-weight: $font-weight--semi-bold;
|
|
width: 60px;
|
|
margin-left: 16px;
|
|
padding: 5px 2px;
|
|
text-align: center;
|
|
|
|
@include m(highlighted) {
|
|
background: $yellow;
|
|
}
|
|
}
|
|
|
|
@include e(item) {
|
|
background: $white;
|
|
border-left: 8px solid $primary-color;
|
|
border-radius: 2px;
|
|
-moz-box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.05);
|
|
-webkit-box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.05);
|
|
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.05);
|
|
padding: 15px 16px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 16px;
|
|
|
|
@include m(left) {
|
|
width: calc(100% - 76px);
|
|
}
|
|
}
|
|
|
|
@include e(name) {
|
|
font-size: $sm-font-size;
|
|
font-weight: $font-weight--bold;
|
|
color: $black;
|
|
display: block;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
@include e(date) {
|
|
font-size: $sm-font-size;
|
|
color: palette(gray-shades, darker);
|
|
display: inline-block;
|
|
}
|
|
}
|