561 lines
12 KiB
SCSS
Executable File
561 lines
12 KiB
SCSS
Executable File
@import '../../../../../codyhouse-framework/main/assets/css/style.scss'; // ⚠️ make sure to import the CodyHouse framework
|
|
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600'); // custom font
|
|
|
|
// --------------------------------
|
|
|
|
// Schedule Template - by CodyHouse.co
|
|
|
|
// --------------------------------
|
|
|
|
:root {
|
|
// colors
|
|
@include defineColorHSL(--cd-color-event-1, 199, 25%, 46%); // Smalt Blue
|
|
@include defineColorHSL(--cd-color-event-2, 271, 23%, 26%); // Martinique
|
|
@include defineColorHSL(--cd-color-event-3, 162, 14%, 68%); // Edward
|
|
@include defineColorHSL(--cd-color-event-4, 31, 89%, 68%); // Rajah
|
|
@include defineColorHSL(--cd-color-text, 0, 0%, 13%); // Black
|
|
@include defineColorHSL(--cd-color-border, 0, 0%, 92%); // Grey
|
|
|
|
// font
|
|
--font-primary: 'Source Sans Pro', sans-serif;
|
|
|
|
//schedule template
|
|
--schedule-rows-number: 19;
|
|
--schedule-rows-height: 50px;
|
|
}
|
|
|
|
body {
|
|
color: var(--cd-color-text);
|
|
}
|
|
|
|
a {
|
|
color: var(--cd-color-event-3);
|
|
}
|
|
|
|
.cd-schedule {
|
|
position: relative;
|
|
|
|
&::before { // never visible - this is used in js to check the current MQ
|
|
content: 'mobile';
|
|
display: none;
|
|
}
|
|
|
|
.js & {
|
|
@include breakpoint(md) {
|
|
width: calc(100% - 2*var(--component-padding));
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
max-width: var(--max-width-xl);
|
|
|
|
&::before {
|
|
content: 'desktop';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.cd-schedule__timeline { // events time
|
|
display: none;
|
|
|
|
.js & {
|
|
@include breakpoint(md) {
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
padding-top: var(--schedule-rows-height);
|
|
|
|
li {
|
|
position: relative;
|
|
height: var(--schedule-rows-height);
|
|
|
|
&::after { // this is used to create the table horizontal lines
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 1px;
|
|
background: var(--cd-color-border);
|
|
}
|
|
|
|
&:last-of-type::after {
|
|
display: none;
|
|
}
|
|
|
|
span {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include breakpoint(lg) {
|
|
li {
|
|
|
|
&::after {
|
|
width: calc(100% - 60px);
|
|
left: 60px;
|
|
}
|
|
|
|
span {
|
|
display: inline-block;
|
|
transform: translateY(-50%);
|
|
font-size: var(--text-sm);
|
|
}
|
|
|
|
&:nth-of-type(2n) span {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.cd-schedule__events {
|
|
position: relative;
|
|
z-index: 1;
|
|
|
|
.js & {
|
|
@include breakpoint(md) {
|
|
width: 100%;
|
|
|
|
> ul {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
}
|
|
}
|
|
|
|
@include breakpoint(lg) {
|
|
width: calc(100% - 60px); // 60px is the .cd-schedule__timeline > li::after element left
|
|
margin-left: 60px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.cd-schedule__group { // group of same day events
|
|
margin-bottom: var(--space-lg);
|
|
|
|
.js & {
|
|
@include breakpoint(md) {
|
|
flex-basis: 0;
|
|
flex-grow: 1;
|
|
border: 1px solid var(--cd-color-border);
|
|
margin-bottom: 0; // reset style
|
|
|
|
&:not(:first-of-type) {
|
|
border-left-width: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.cd-schedule__group > ul {
|
|
position: relative;
|
|
padding: 0 var(--component-padding);
|
|
display: flex;
|
|
overflow-x: scroll;
|
|
-webkit-overflow-scrolling: touch;
|
|
|
|
&::after { // never visible - used to add a right padding to .cd-schedule__group > ul
|
|
display: inline-block;
|
|
content: '-';
|
|
width: 1px;
|
|
height: 100%;
|
|
opacity: 0;
|
|
color: transparent;
|
|
}
|
|
|
|
.js & {
|
|
@include breakpoint(md) {
|
|
height: calc(var(--schedule-rows-height)*var(--schedule-rows-number));
|
|
overflow: visible;
|
|
padding: 0;
|
|
|
|
&::after { // reset style
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.cd-schedule__top-info { // day label
|
|
width: 100%;
|
|
padding: 0 var(--component-padding);
|
|
|
|
> span {
|
|
display: inline-block;
|
|
margin-bottom: var(--space-sm);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.js & {
|
|
@include breakpoint(md) {
|
|
// vertically center its content
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: var(--schedule-rows-height);
|
|
border-bottom: 1px solid var(--cd-color-border);
|
|
padding: 0; // reset style
|
|
|
|
> span {
|
|
font-weight: normal;
|
|
font-size: var(--text-sm);
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.cd-schedule__event {
|
|
flex-shrink: 0; // force them to stay on one line
|
|
float: left; // flex fallback
|
|
height: 150px;
|
|
width: 70%;
|
|
max-width: 300px;
|
|
margin-right: var(--space-md);
|
|
transition: opacity .2s, background .2s;
|
|
|
|
a {
|
|
display: block;
|
|
height: 100%;
|
|
padding: var(--space-sm);
|
|
box-shadow: inset 0 -3px 0 rgba(#000, .2);
|
|
text-decoration: none;
|
|
}
|
|
|
|
a::before { // event start/end date
|
|
content: attr(data-start)' - 'attr(data-end);
|
|
}
|
|
|
|
.js & {
|
|
@include breakpoint(sm) {
|
|
width: 40%;
|
|
}
|
|
|
|
@include breakpoint(md) {
|
|
position: absolute;
|
|
z-index: 3;
|
|
width: calc(100% + 2px); // top position and height will be set using js
|
|
left: -1px;
|
|
max-width: none; // reset style
|
|
margin-right: 0;
|
|
|
|
a {
|
|
padding: var(--space-sm);
|
|
box-shadow: 0 10px 20px rgba(#000, .1), inset 0 -3px 0 rgba(#000, .2);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.js {
|
|
@include breakpoint(md) {
|
|
.cd-schedule__event--selected { // classes added when an user select the event
|
|
visibility: hidden;
|
|
}
|
|
|
|
.cd-schedule--loading .cd-schedule__event {
|
|
// the class .cd-schedule--loading is added by default to the .cd-schedule element
|
|
// it is removed as soon as the single events are placed in the schedule plan (using javascript)
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.cd-schedule__name, // event name in the schedule template
|
|
.cd-schedule__event a::before, // event date in the schedule template
|
|
.cd-schedule-modal__name, // event name in the modal element
|
|
.cd-schedule-modal__date { // event date in the modal element
|
|
display: block;
|
|
color: var(--color-white);
|
|
font-weight: bold;
|
|
@include fontSmooth;
|
|
}
|
|
|
|
.cd-schedule__name,
|
|
.cd-schedule-modal__name {
|
|
font-size: var(--text-lg);
|
|
|
|
@include breakpoint(md) {
|
|
font-size: calc(var(--text-sm)*1.2);
|
|
}
|
|
}
|
|
|
|
.cd-schedule-modal__date, // not included in the the HTML but added using JavScript
|
|
.cd-schedule__event a::before {
|
|
opacity: .7;
|
|
margin-bottom: var(--space-xxxs);
|
|
|
|
@include breakpoint(md) {
|
|
font-size: calc(var(--text-xs)*1.05);
|
|
margin-bottom: var(--space-xxxxs);
|
|
}
|
|
}
|
|
|
|
.cd-schedule__event [data-event="event-1"],
|
|
.cd-schedule-modal[data-event="event-1"] .cd-schedule-modal__header-bg {
|
|
// this is used to set a background color for the event and the modal window
|
|
background: var(--cd-color-event-1);
|
|
}
|
|
|
|
.cd-schedule__event [data-event="event-2"],
|
|
.cd-schedule-modal[data-event="event-2"] .cd-schedule-modal__header-bg {
|
|
background: var(--cd-color-event-2);
|
|
}
|
|
|
|
.cd-schedule__event [data-event="event-3"],
|
|
.cd-schedule-modal[data-event="event-3"] .cd-schedule-modal__header-bg {
|
|
background: var(--cd-color-event-3);
|
|
}
|
|
|
|
.cd-schedule__event [data-event="event-4"],
|
|
.cd-schedule-modal[data-event="event-4"] .cd-schedule-modal__header-bg {
|
|
background: var(--cd-color-event-4);
|
|
}
|
|
|
|
.cd-schedule-modal {
|
|
position: fixed;
|
|
z-index: 3;
|
|
top: 0;
|
|
right: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
visibility: hidden;
|
|
transform: translateZ(0); // Force Hardware acceleration
|
|
|
|
transform: translateX(100%);
|
|
transition: transform .4s, visibility .4s;
|
|
transition-timing-function: cubic-bezier(.5,0,.1,1);
|
|
|
|
@include breakpoint(md) {
|
|
// reset style
|
|
right: auto;
|
|
width: auto;
|
|
height: auto;
|
|
transform: translateX(0);
|
|
will-change: transform, width, height;
|
|
transition: height .4s, width .4s, transform .4s, visibility .4s;
|
|
transition-timing-function: cubic-bezier(.5,0,.1,1);
|
|
}
|
|
}
|
|
|
|
.cd-schedule-modal__header {
|
|
position: relative;
|
|
height: 70px;
|
|
display: flex;
|
|
align-content: center;
|
|
width: 100%;
|
|
|
|
@include breakpoint(md) {
|
|
position: absolute;
|
|
display: block;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.cd-schedule-modal__content {
|
|
position: relative;
|
|
z-index: 3;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: var(--space-sm) var(--component-padding);
|
|
|
|
@include breakpoint(md) {
|
|
// reset style
|
|
display: block;
|
|
padding: var(--space-sm);
|
|
}
|
|
}
|
|
|
|
.cd-schedule-modal__body {
|
|
position: relative;
|
|
width: 100%;
|
|
height: calc(100% - 70px); // 70px is the .cd-schedule-modal__header height
|
|
|
|
@include breakpoint(md) {
|
|
height: 100%;
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
.cd-schedule-modal__event-info {
|
|
position: relative;
|
|
z-index: 2;
|
|
line-height: var(--body-line-height);
|
|
height: 100%;
|
|
overflow: hidden;
|
|
font-size: calc(var(--text-sm) * 1.2);
|
|
|
|
> div {
|
|
overflow: auto;
|
|
height: 100%;
|
|
padding: var(--space-md) var(--component-padding);
|
|
}
|
|
|
|
@include breakpoint(md) {
|
|
opacity: 0;
|
|
font-size: var(--text-sm);
|
|
|
|
> div {
|
|
padding: calc(var(--space-md)*1.3) calc(var(--space-lg)*1.2) calc(var(--space-md)*1.3) calc(var(--space-md)*1.3);
|
|
}
|
|
}
|
|
}
|
|
|
|
.cd-schedule-modal__header-bg,
|
|
.cd-schedule-modal__body-bg { // these are the morphing backgrounds - visible on desktop only
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
@include breakpoint(md) {
|
|
// Force Hardware acceleration
|
|
transform: translateZ(0);
|
|
will-change: transform;
|
|
backface-visibility: hidden;
|
|
}
|
|
}
|
|
|
|
.cd-schedule-modal__header-bg {
|
|
z-index: 2;
|
|
transform-origin: top center;
|
|
|
|
@include breakpoint(md) {
|
|
transition: transform .4s;
|
|
transition-timing-function: cubic-bezier(.5,0,.1,1);
|
|
}
|
|
}
|
|
|
|
.cd-schedule-modal__body-bg {
|
|
z-index: 1;
|
|
background: var(--color-white);
|
|
transform-origin: top left;
|
|
|
|
@include breakpoint(md) {
|
|
opacity: 0;
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
.cd-schedule-modal--no-transition {
|
|
transition: none;
|
|
|
|
.cd-schedule-modal__header-bg,
|
|
.cd-schedule-modal__body-bg {
|
|
transition: none !important;
|
|
}
|
|
}
|
|
|
|
.cd-schedule-modal__date {
|
|
display: none;
|
|
|
|
@include breakpoint(md) {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.cd-schedule-modal__close { // close modal icon
|
|
position: absolute;
|
|
z-index: 3;
|
|
top: 0;
|
|
right: 0;
|
|
height: 70px;
|
|
width: 70px;
|
|
background: alpha(var(--color-black), .1);
|
|
|
|
&::before, &::after { // these are the two lines of the 'X' icon
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 2px;
|
|
height: 22px;
|
|
background: var(--color-white);
|
|
backface-visibility: hidden;
|
|
}
|
|
|
|
&::before {
|
|
transform: translateX(-50%) translateY(-50%) rotate(45deg);
|
|
}
|
|
|
|
&::after {
|
|
transform: translateX(-50%) translateY(-50%) rotate(-45deg);
|
|
}
|
|
|
|
@include breakpoint(md) {
|
|
width: 40px;
|
|
height: 40px;
|
|
background: transparent;
|
|
opacity: 0;
|
|
|
|
&::after, &::before {
|
|
background: var(--cd-color-text);
|
|
height: 16px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.cd-schedule-modal--open { // this class is added as soon as an event is selected
|
|
transform: translateX(0);
|
|
visibility: visible;
|
|
|
|
.cd-schedule-modal__event-info > div { // smooth scroll on iOS touch deviceS
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
}
|
|
|
|
@include breakpoint(md) {
|
|
.cd-schedule-modal--animation-completed .cd-schedule-modal__close,
|
|
.cd-schedule-modal--content-loaded.cd-schedule-modal--animation-completed .cd-schedule-modal__event-info {
|
|
// the .cd-schedule-modal--animation-completed class is added when the modal animation is completed
|
|
// the .cd-schedule-modal--content-loaded class is added when the modal content has been loaded (using ajax)
|
|
opacity: 1;
|
|
transition: opacity .2s;
|
|
}
|
|
|
|
.cd-schedule-modal--open .cd-schedule-modal__body-bg {
|
|
opacity: 1;
|
|
transition: transform .4s;
|
|
transition-timing-function: cubic-bezier(.5,0,.1,1);
|
|
}
|
|
}
|
|
|
|
.cd-schedule__cover-layer { // layer between the content and the modal window
|
|
position: fixed;
|
|
z-index: 2;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
background: alpha(var(--color-black), 0.8);
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: opacity .4s, visibility .4s;
|
|
}
|
|
|
|
.cd-schedule-modal--open + .cd-schedule__cover-layer {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
//demo style
|
|
.cd-main-header h1 {
|
|
color: var(--cd-color-text);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.cd-article-link {
|
|
font-size: var(--text-sm);
|
|
transition: opacity .2s;
|
|
|
|
&:hover {
|
|
opacity: 0.8;
|
|
}
|
|
} |