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; } h2 { font-size: 10vw; } h3 { font-size: 8vw; } span { font-size: 12px; } p { font-size: 4vw; } .links { position: absolute; width: calc(100% - 40px); bottom: 8px; height: 2rem; justify-content: center; } } //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; .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; } @include e(title) { color: $black; font-size: $lg-font-size; font-weight: $font-weight--bold; } } .calendar-table__col.selected > .calendar-table__item { color: white; } .calendar-table { margin-top: 12px; width: 100%; @include e(item) { 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 > 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(350) { width: 46px; height: 20.7px; } @include mq(390) { width: 56px; height: 25.2px; } } } @include e(body) { .calendar-table__col { width: 40px; height: 40px; border-radius: 50%; @include mq(350) { width: 46px; height: 46px; } @include mq(390) { width: 56px; height: 56px; } @include mq(410) { width: 56px; height: 56px; } @include mq(460) { width: 61px; height: 61px; } } .calendar-table__col.selected { background: $blue; transition: all 0.3s ease-in; outline: none; } } @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; } } @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 { display: flex; flex-direction: column; padding: 0 15px; padding-bottom: 1rem; } .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; } }