Merge remote-tracking branch 'origin/master'
This commit is contained in:
Vedde
commit
a6c20f8ee8
|
|
@ -503,3 +503,303 @@ main {
|
|||
}
|
||||
}
|
||||
|
||||
.mock-up-link {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.mock-up-link {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.main-container-wrapper {
|
||||
background-color: #F8FAFA;
|
||||
min-width: 320px;
|
||||
min-height: 568px;
|
||||
max-width: 414px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 415px) {
|
||||
.main-container-wrapper {
|
||||
box-shadow: 0px 32px 47px rgba(32, 23, 23, 0.09);
|
||||
margin: 24px auto;
|
||||
}
|
||||
}
|
||||
|
||||
.header__btn {
|
||||
background-color: #00788a;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
|
||||
cursor: pointer;
|
||||
height: 80px;
|
||||
padding-top: 18px;
|
||||
position: absolute;
|
||||
top: -25px;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.header__btn:hover,
|
||||
.header__btn:focus {
|
||||
background: #005561;
|
||||
transition: all 0.3s ease-in;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.header__btn .icon {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.header__btn--left {
|
||||
left: -25px;
|
||||
padding-left: 38px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.header__btn--right {
|
||||
padding-right: 32px;
|
||||
right: -25px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.calendar-container {
|
||||
background-color: #fff;
|
||||
padding: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.calendar-container__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.calendar-container__btn {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
outline: none;
|
||||
color: #E9E8E8;
|
||||
}
|
||||
|
||||
.calendar-container__btn:hover,
|
||||
.calendar-container__btn:focus {
|
||||
color: #9FAAB7;
|
||||
transition: all 0.3s ease-in;
|
||||
}
|
||||
|
||||
.calendar-container__title {
|
||||
color: #222741;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.calendar-table {
|
||||
margin-top: 12px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.calendar-table__item {
|
||||
border: 2px solid transparent;
|
||||
border-radius: 50%;
|
||||
color: #424588;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.calendar-table__item:hover {
|
||||
background: RGBA(0, 120, 138, 0.6);
|
||||
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
|
||||
transition: 0.2s all ease-in;
|
||||
}
|
||||
|
||||
.calendar-table__item:hover > span {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.calendar-table__row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.calendar-table__header {
|
||||
border-bottom: 2px solid #F2F6F8;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.calendar-table__header .calendar-table__col {
|
||||
display: inline-block;
|
||||
color: #99A4AE;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
padding: 12px 3px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
width: 40px;
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
@media (min-width: 360px) {
|
||||
.calendar-table__header .calendar-table__col {
|
||||
width: 46px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 410px) {
|
||||
.calendar-table__header .calendar-table__col {
|
||||
width: 54px;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-table__body .calendar-table__col {
|
||||
width: 40px;
|
||||
height: 42px;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
@media (min-width: 360px) {
|
||||
.calendar-table__body .calendar-table__col {
|
||||
width: 46px;
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 410px) {
|
||||
.calendar-table__body .calendar-table__col {
|
||||
width: 54px;
|
||||
height: 56px;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-table__today .calendar-table__item {
|
||||
border-color: #FEFEFE;
|
||||
background-color: #00788a;
|
||||
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.calendar-table__event .calendar-table__item {
|
||||
background-color: #00788a;
|
||||
border-color: #FEFEFE;
|
||||
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.calendar-table__event--long {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.calendar-table__event--long .calendar-table__item {
|
||||
border-radius: 0;
|
||||
border-width: 2px 0;
|
||||
}
|
||||
|
||||
.calendar-table__event--start .calendar-table__item {
|
||||
border-left: 2px solid #fff;
|
||||
border-radius: 50% 0 0 50%;
|
||||
}
|
||||
|
||||
.calendar-table__event--start.calendar-table__col:last-child .calendar-table__item {
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.calendar-table__event--end .calendar-table__item {
|
||||
border-right: 2px solid #fff;
|
||||
border-radius: 0 50% 50% 0;
|
||||
}
|
||||
|
||||
.calendar-table__event--end.calendar-table__col:first-child .calendar-table__item {
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.calendar-table__inactive .calendar-table__item {
|
||||
color: #DCDCE3;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.calendar-table__inactive .calendar-table__item:hover {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.calendar-table__inactive.calendar-table__event .calendar-table__item {
|
||||
color: #fff;
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
.calendar-table__inactive.calendar-table__event .calendar-table__item:hover {
|
||||
background: #00788a;
|
||||
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__title {
|
||||
color: #BEC1CA;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.events__tag {
|
||||
background: #00788a;
|
||||
border: 2px solid #FEFEFE;
|
||||
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 20px;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
width: 60px;
|
||||
margin-left: 16px;
|
||||
padding: 5px 2px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.events__tag--highlighted {
|
||||
background: #FDCA40;
|
||||
}
|
||||
|
||||
.events__item {
|
||||
background: #fff;
|
||||
border-left: 8px solid #00788a;
|
||||
border-radius: 2px;
|
||||
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;
|
||||
}
|
||||
|
||||
.events__item--left {
|
||||
width: calc(100% - 76px);
|
||||
}
|
||||
|
||||
.events__name {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: #222741;
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.events__date {
|
||||
font-size: 12px;
|
||||
color: #9FAAB7;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -12,6 +12,8 @@ function toggleMenu() {
|
|||
var buttonElement = document.getElementById('menuIcon');
|
||||
|
||||
var htmlElement = document.getElementsByTagName('html')[0];
|
||||
var headerElement = document.getElementsByTagName('header')[0];
|
||||
var bodyElement = document.getElementsByTagName('body')[0];
|
||||
var logoElement = document.getElementById('sdeLogo');
|
||||
var mainElement = document.getElementsByTagName('main')[0];
|
||||
|
||||
|
|
@ -20,6 +22,8 @@ function toggleMenu() {
|
|||
if(buttonElement.alt === '-')
|
||||
{
|
||||
htmlElement.style.backgroundColor = 'rgb(0, 120, 138)';
|
||||
bodyElement.style.backgroundColor = 'rgb(0, 120, 138)';
|
||||
headerElement.style.backgroundColor = 'rgb(0, 120, 138)';
|
||||
logoElement.src = '/images/logos/Logo-hvid.svg';
|
||||
menu.classList.remove('d-none');
|
||||
mainElement.classList.add('d-none');
|
||||
|
|
@ -29,6 +33,8 @@ function toggleMenu() {
|
|||
else
|
||||
{
|
||||
htmlElement.style.backgroundColor = 'rgb(255, 255, 255)';
|
||||
bodyElement.style.backgroundColor = 'rgb(255, 255, 255)';
|
||||
headerElement.style.backgroundColor = 'rgb(255, 255, 255)';
|
||||
logoElement.src = '/images/logos/Logo-normal.svg';
|
||||
menu.classList.add('d-none');
|
||||
mainElement.classList.remove('d-none');
|
||||
|
|
|
|||
|
|
@ -63,3 +63,411 @@ and (max-width : 900px)
|
|||
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: 12px 3px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
width: 40px;
|
||||
height: 38px;
|
||||
|
||||
@include mq(360) {
|
||||
width: 46px;
|
||||
}
|
||||
|
||||
@include mq(410) {
|
||||
width: 54px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include e(body) {
|
||||
.calendar-table__col {
|
||||
width: 40px;
|
||||
height: 42px;
|
||||
padding-bottom: 2px;
|
||||
|
||||
@include mq(360) {
|
||||
width: 46px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,12 +12,15 @@
|
|||
{{--Vagttelefon--}}
|
||||
{{--@extends("webapp.vagttelefon.index")--}}
|
||||
|
||||
{{--Booking Liste--}}
|
||||
{{----}}@extends("webapp.booking.index")
|
||||
|
||||
{{----}}
|
||||
{{------Admin Panel
|
||||
{{----}}
|
||||
|
||||
{{--Index--}}
|
||||
{{----}}@extends("admin.index")
|
||||
{{--@extends("admin.index")--}}
|
||||
|
||||
{{--Create User--}}
|
||||
{{--@extends("admin.users.create")--}}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,245 @@
|
|||
@extends("webapp.layout.base")
|
||||
@extends("webapp.layout.header")
|
||||
@section("title")
|
||||
Booking Liste
|
||||
@endsection
|
||||
|
||||
@section("content")
|
||||
<main>
|
||||
<h1 class="text-center sde-blue mb-0">Booking Liste</h1>
|
||||
<div class="col w-100 mt-auto">
|
||||
<div class="calendar-container">
|
||||
<div class="calendar-container__header">
|
||||
<button class="calendar-container__btn calendar-container__btn--left" title="Previous">
|
||||
<i class="icon ion-ios-arrow-back"></i>
|
||||
</button>
|
||||
<h2 class="calendar-container__title">{Måned} {År}</h2>
|
||||
<button class="calendar-container__btn calendar-container__btn--right" title="Next">
|
||||
<i class="icon ion-ios-arrow-forward"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="calendar-container__body">
|
||||
<div class="calendar-table">
|
||||
<div class="calendar-table__header">
|
||||
<div class="calendar-table__row">
|
||||
<div class="calendar-table__col">Man</div>
|
||||
<div class="calendar-table__col">Tir</div>
|
||||
<div class="calendar-table__col">Ons</div>
|
||||
<div class="calendar-table__col">Tor</div>
|
||||
<div class="calendar-table__col">Fre</div>
|
||||
<div class="calendar-table__col">Lør</div>
|
||||
<div class="calendar-table__col">Søn</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="calendar-table__body">
|
||||
<div class="calendar-table__row">
|
||||
<div class="calendar-table__col calendar-table__inactive">
|
||||
<div class="calendar-table__item">
|
||||
<span>30</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="calendar-table__col calendar-table__today">
|
||||
<div class="calendar-table__item">
|
||||
<span>1</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="calendar-table__col">
|
||||
<div class="calendar-table__item">
|
||||
<span>2</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="calendar-table__col">
|
||||
<div class="calendar-table__item">
|
||||
<span>3</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="calendar-table__col">
|
||||
<div class="calendar-table__item">
|
||||
<span>4</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="calendar-table__col">
|
||||
<div class="calendar-table__item">
|
||||
<span>5</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="calendar-table__col">
|
||||
<div class="calendar-table__item">
|
||||
<span>6</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="calendar-table__row">
|
||||
<div class="calendar-table__col">
|
||||
<div class="calendar-table__item">
|
||||
<span>7</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="calendar-table__col">
|
||||
<div class="calendar-table__item">
|
||||
<span>8</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="calendar-table__col">
|
||||
<div class="calendar-table__item">
|
||||
<span>9</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="calendar-table__col">
|
||||
<div class="calendar-table__item">
|
||||
<span>10</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="calendar-table__col">
|
||||
<div class="calendar-table__item">
|
||||
<span>11</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="calendar-table__col">
|
||||
<div class="calendar-table__item">
|
||||
<span>12</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="calendar-table__col">
|
||||
<div class="calendar-table__item">
|
||||
<span>13</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="calendar-table__row">
|
||||
<div class="calendar-table__col">
|
||||
<div class="calendar-table__item">
|
||||
<span>14</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="calendar-table__col">
|
||||
<div class="calendar-table__item">
|
||||
<span>15</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="calendar-table__col">
|
||||
<div class="calendar-table__item">
|
||||
<span>16</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="calendar-table__col">
|
||||
<div class="calendar-table__item">
|
||||
<span>17</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="calendar-table__col">
|
||||
<div class="calendar-table__item">
|
||||
<span>18</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="calendar-table__col">
|
||||
<div class="calendar-table__item">
|
||||
<span>19</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="calendar-table__col">
|
||||
<div class="calendar-table__item">
|
||||
<span>20</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="calendar-table__row">
|
||||
<div class="calendar-table__col">
|
||||
<div class="calendar-table__item">
|
||||
<span>21</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="calendar-table__col">
|
||||
<div class="calendar-table__item">
|
||||
<span>22</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="calendar-table__col">
|
||||
<div class="calendar-table__item">
|
||||
<span>23</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="calendar-table__col">
|
||||
<div class="calendar-table__item">
|
||||
<span>24</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="calendar-table__col">
|
||||
<div class="calendar-table__item">
|
||||
<span>25</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="calendar-table__col">
|
||||
<div class="calendar-table__item">
|
||||
<span>26</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="calendar-table__col">
|
||||
<div class="calendar-table__item">
|
||||
<span>27</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="calendar-table__row">
|
||||
<div class="calendar-table__col">
|
||||
<div class="calendar-table__item">
|
||||
<span>28</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="calendar-table__col">
|
||||
<div class="calendar-table__item">
|
||||
<span>29</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="calendar-table__col">
|
||||
<div class="calendar-table__item">
|
||||
<span>30</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="calendar-table__col">
|
||||
<div class="calendar-table__item">
|
||||
<span>31</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="calendar-table__col calendar-table__inactive">
|
||||
<div class="calendar-table__item">
|
||||
<span>1</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="calendar-table__col calendar-table__inactive">
|
||||
<div class="calendar-table__item">
|
||||
<span>2</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="calendar-table__col calendar-table__inactive">
|
||||
<div class="calendar-table__item">
|
||||
<span>3</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="events-container">
|
||||
<span class="events__title">Tider</span>
|
||||
<ul class="events__list">
|
||||
<li class="events__item">
|
||||
<div class="events__item--left">
|
||||
<span class="events__name">Vaskemaskine Tid</span>
|
||||
<span class="events__date">{Dato}</span>
|
||||
</div>
|
||||
<span class="events__tag">Book</span>
|
||||
</li>
|
||||
<li class="events__item">
|
||||
<div class="events__item--left">
|
||||
<span class="events__name">Vaskemaskine Tid</span>
|
||||
<span class="events__date">{Dato}</span>
|
||||
</div>
|
||||
<span class="events__tag">Book</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
@endsection
|
||||
Loading…
Reference in New Issue