Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI

CodeMyUI/index.html

Created May 18, 2017 23:46
Star
Embed
What would you like to do?
Learn more about clone URLs
Download ZIP
Windows Fluent Design Calendar
Raw
index.html
<main class="calendar-contain">
<section class="title-bar">
<button class="title-bar__burger">
<span class="burger__lines">Toggle Menu</span>
</button>
<span class="title-bar__year">
Calendar > May 2017
</span>
<span class="title-bar__month">
Month
</span>
<div class="title-bar__controls">
<div class="title-bar__minimize"></div>
<div class="title-bar__maximize"></div>
<div class="title-bar__close"></div>
</div>
</section>
<aside class="calendar__sidebar">
<div class="sidebar__nav">
<!-- Icons by Icons8 -->
<span class="sidebar__nav-item"><img class="icon icons8-Plus-Math" width="22px" height="22px" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAWUlEQVRYR+2WMQoAIAgA9f+PrsWmEMQSEa7Z8rzEUmle2pxfABhvYFkPpQtJb7TEAGAAAxgoM3AO/v1YXoPPm4TtANHKy64AAAxgAANjDERB3bjXXzEA8w1s3k4WIU0YaEoAAAAASUVORK5CYII="></span>
<span class="sidebar__nav-item"><img class="icon icons8-Share" width="22px" height="22px" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAB+klEQVRYR+2W0VEdMQxFDxUQKoBUkFABUAFQAaGDUEFCBQkVABUAFRAqgFRAUgFQQTJnxprx2/V67f3h5+nnzfNK8vXVteQN3tk23nl/1gCWMrAD/AD2UwlvgTPgtbekSwB8AJ4Bf3Nz84+9IJYAuAJOgAfgKGNgD7gGvvSwsATAH2Ab2MpOKxsvgN9kodl6AHha6279tRyAa5ZFE4R6UBez1gogaM8T/gKO08JNJsjw+ZmAVEG0AMg3Pwf8/wRsDjK/AZ+TBr6lbxfA1xqCOQDS7um0A8BTa1L+fSBC/0u/lsfJ0mQ55gCE4KyplPaYJ1czVWHWAHidLoG/mfB6AIQgvTGnqXSj+BoAaTusBTegCRbusnKthNUABP157Rv2XHGxVd/XylAD8C+lmtNJDVQ0KH2KeaaSDxuL104hhsrnmIhh5bWMxmWHHMWXABjwODFsdhtAdMWXANSGzaSYMkpCvE3DqgQgar902DiW7ZKl+JEWSgBKCUITttvhO2Coh1r8qKeUAASFpWHTMu+jhKX4UQmnRFgaNp7Ufu9Aqpk+MYxyP9mTyZVnW+0a2vu9RrZSBeWLJ9qr31wTqKaf3+18ce0iRtr1s7WP3ow9TcauJr0CqpkbullMzqpzD4BIZHLBeOpPafF3OqWbCrLZlgBoTt7iuAawZuA/xAh3Ifk/Dm0AAAAASUVORK5CYII="></span>
<span class="sidebar__nav-item"><img class="icon icons8-Up" width="22px" height="22px" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAxklEQVRYR+3VwQ2DMAyF4Z8NOkI36AodpZ2sjMAoHaWdoJWlIEXI4RHnwMWROAH2ZxuSiZPXdHJ+EjDagUcZ4Rwd5QjAkr9K4icQQkQBdfK1+BAiAvCShxG9gG3b6xGExtED8Gb+K6VbnNA3cRTQCl4DzNKNOALYC7oFdCMUQFXkAboQCvAGbkDrF2sBasQXuAIfb7NSgAtwB5bGTrcHWBFWhF3uUgC1wyqAen/4NExAdiA7kB3IDmQH5GGjHhg9DVV8eT8Bf2HqNiEP+isaAAAAAElFTkSuQmCC"></span>
<span class="sidebar__nav-item"><img class="icon icons8-Down" width="22px" height="22px" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAA4UlEQVRYR+2WgQnCMBBFXzdwBSdwBUfRyXQER3EUN1AOEgnxLrkkhYCkUFpI7/+Xf1fajcnHNtmfBTCawDu0sFunuzAYL4CVwEpgJbAS+P8EDsAZeBj/DbUELsAznKpE7WMkxSfgCtwVhRKAmN+AF3AM1x+JGkAUkUINwgKo1X1BagDyYElMA3Cbi7gHoASRAzSZtwBYEClAs3krgAYhQxbnI73XBrbrLdCK0p3m69bbYv79e2cgF9Agms17WpCCdPU830lvAlFHIORw93xvALO33oXRBLw+uw/hsHEUmJ7ABzErNiGyzfJcAAAAAElFTkSuQmCC"></span>
</div>
<h2 class="sidebar__heading">Wednesday<br>April 6</h2>
<ul class="sidebar__list">
<li class="sidebar__list-item sidebar__list-item--complete"><span class="list-item__time">8.30</span> Team Meeting</li>
<li class="sidebar__list-item sidebar__list-item--complete"><span class="list-item__time">10.00</span> Lunch with Sasha</li>
<li class="sidebar__list-item"><span class="list-item__time">2.30</span> Design Review</li>
<li class="sidebar__list-item"><span class="list-item__time">4.00</span> Get Groceries</li>
</ul>
</aside>
<section class="calendar__days">
<section class="calendar__top-bar">
<span class="top-bar__days">Mon</span>
<span class="top-bar__days">Tue</span>
<span class="top-bar__days">Wed</span>
<span class="top-bar__days">Thu</span>
<span class="top-bar__days">Fri</span>
<span class="top-bar__days">Sat</span>
<span class="top-bar__days">Sun</span>
</section>
<section class="calendar__week">
<div class="calendar__day inactive">
<span class="calendar__date">30</span>
<span class="calendar__task">2</span>
</div>
<div class="calendar__day inactive">
<span class="calendar__date">31</span>
<span class="calendar__task">4</span>
</div>
<div class="calendar__day">
<span class="calendar__date">1</span>
<span class="calendar__task">2</span>
</div>
<div class="calendar__day">
<span class="calendar__date">2</span>
<span class="calendar__task">3</span>
</div>
<div class="calendar__day">
<span class="calendar__date">3</span>
<span class="calendar__task">1</span>
</div>
<div class="calendar__day">
<span class="calendar__date">4</span>
<span class="calendar__task">2</span>
</div>
<div class="calendar__day">
<span class="calendar__date">5</span>
<span class="calendar__task">4</span>
</div>
</section>
<section class="calendar__week">
<div class="calendar__day">
<span class="calendar__date">6</span>
<span class="calendar__task">2</span>
</div>
<div class="calendar__day">
<span class="calendar__date">7</span>
<span class="calendar__task">3</span>
</div>
<div class="calendar__day">
<span class="calendar__date">8</span>
<span class="calendar__task">3</span>
</div>
<div class="calendar__day">
<span class="calendar__date">9</span>
<span class="calendar__task">1</span>
</div>
<div class="calendar__day">
<span class="calendar__date">10</span>
<span class="calendar__task">2</span>
</div>
<div class="calendar__day">
<span class="calendar__date">11</span>
<span class="calendar__task">2</span>
</div>
<div class="calendar__day">
<span class="calendar__date">12</span>
<span class="calendar__task">1</span>
</div>
</section>
<section class="calendar__week">
<div class="calendar__day">
<span class="calendar__date">13</span>
<span class="calendar__task">2</span>
</div>
<div class="calendar__day">
<span class="calendar__date">14</span>
<span class="calendar__task">2</span>
</div>
<div class="calendar__day today">
<span class="calendar__date">15</span>
<span class="calendar__task calendar__task--today">4 items</span>
</div>
<div class="calendar__day">
<span class="calendar__date">16</span>
<span class="calendar__task">2</span>
</div>
<div class="calendar__day">
<span class="calendar__date">17</span>
<span class="calendar__task">1</span>
</div>
<div class="calendar__day">
<span class="calendar__date">18</span>
<span class="calendar__task">4</span>
</div>
<div class="calendar__day">
<span class="calendar__date">19</span>
<span class="calendar__task">2</span>
</div>
</section>
<section class="calendar__week">
<div class="calendar__day">
<span class="calendar__date">20</span>
<span class="calendar__task">2</span>
</div>
<div class="calendar__day">
<span class="calendar__date">21</span>
<span class="calendar__task">2</span>
</div>
<div class="calendar__day">
<span class="calendar__date">22</span>
<span class="calendar__task">1</span>
</div>
<div class="calendar__day">
<span class="calendar__date">23</span>
<span class="calendar__task">2</span>
</div>
<div class="calendar__day">
<span class="calendar__date">24</span>
<span class="calendar__task">5</span>
</div>
<div class="calendar__day">
<span class="calendar__date">25</span>
<span class="calendar__task">3</span>
</div>
<div class="calendar__day">
<span class="calendar__date">26</span>
<span class="calendar__task">1</span>
</div>
</section>
<section class="calendar__week">
<div class="calendar__day">
<span class="calendar__date">27</span>
<span class="calendar__task">2</span>
</div>
<div class="calendar__day">
<span class="calendar__date">28</span>
<span class="calendar__task">1</span>
</div>
<div class="calendar__day inactive">
<span class="calendar__date">1</span>
<span class="calendar__task">2</span>
</div>
<div class="calendar__day inactive">
<span class="calendar__date">2</span>
<span class="calendar__task">1</span>
</div>
<div class="calendar__day inactive">
<span class="calendar__date">3</span>
<span class="calendar__task">5</span>
</div>
<div class="calendar__day inactive">
<span class="calendar__date">4</span>
<span class="calendar__task">3</span>
</div>
<div class="calendar__day inactive">
<span class="calendar__date">5</span>
<span class="calendar__task">1</span>
</div>
</section>
</section>
</main>
Raw
style.scss
// Variables
// ----------------------------- //
$black: #040605;
$white: #f5f7f6;
$blue-white: #e1e7e8;
$pink: #fd588a;
$tangerine: #f86a6c;
// Global
// ----------------------------- //
* {
outline: none;
box-sizing: border-box;
}
html {
font-size: 100%;
}
body {
height: 100%;
padding: 1rem;
background-color: #f6f5f1;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-family: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", sans-serif;
background-image: linear-gradient(45deg, $tangerine 0%, $pink 100%);
@media screen and (min-width:55em) {
height: 100vh;
margin: 0;
}
}
h1, h2, h3, h4, h5, h6 {
-webkit-font-smoothing: antialiased;
}
p, span, ul, li {
color: lighten($black, 20%);
font-weight: 100;
-webkit-font-smoothing: subpixel-antialiased;
font-size: 1rem;
}
// Calendar Container
// ----------------------------- //
.calendar-contain {
position: relative;
left: 0;
right: 0;
border-radius: 0;
width: 100%;
overflow: hidden;
max-width: 1020px;
min-width: 450px;
margin: 1rem auto;
background-color: $white;
box-shadow: 5px 5px 72px rgba(30, 46, 50, 0.5);
color: $black;
@media screen and (min-width:55em) {
margin: auto;
top: 5%;
}
}
// Title bar
// ----------------------------- //
.title-bar {
position: relative;
width: 100%;
display: table;
text-align: right;
background:$white;
padding: 0.5rem;
margin-bottom: 0;
&:after {
display: table;
clear: both;
}
}
.title-bar__burger {
display: block;
position: relative;
float: left;
overflow: hidden;
margin: 0;
padding: 0;
width: 38px;
height: 30px;
font-size: 0;
text-indent: -9999px;
appearance: none;
box-shadow: none;
border-radius: none;
border: none;
cursor: pointer;
background:none;
&:focus {
outline: none;
}
}
.burger__lines {
display: block;
position: absolute;
width: 18px;
top: 15px;
left: 0;
right: 0;
margin: auto;
height: 1px;
background: $black;
&:before,
&:after {
position: absolute;
display: block;
left: 0;
width: 100%;
height: 1px;
background-color: $black;
content: "";
}
&:before {
top: -5px;
}
&:after {
bottom: -5px;
}
}
.title-bar__year {
display: block;
position: relative;
float: left;
font-size: 1rem;
line-height: 30px;
width: 43%;
padding: 0 0.5rem;
text-align: left;
@media screen and (min-width:55em) {
width: 27%;
}
}
.title-bar__month {
position: relative;
float: left;
font-size: 1rem;
line-height: 30px;
width: 22%;
padding: 0 0.5rem;
text-align: left;
@media screen and (min-width:55em) {
width: 12%;
}
&:after {
content: "";
display: inline;
position: absolute;
width: 10px;
height: 10px;
right: 0;
top: 5px;
margin: auto;
border-top: 1px solid rgb(0, 0, 0);
border-right: 1px solid rgb(0, 0, 0);
transform: rotate(135deg);
}
}
.title-bar__minimize,
.title-bar__maximize,
.title-bar__close
{
position: relative;
float: left;
width: 34px;
height: 34px;
&:before,
&:after {
top: 30%;
right: 30%;
bottom: 30%;
left: 30%;
content: " ";
position: absolute;
border-color: #8e8e8e;
border-style: solid;
border-width: 0 0 2px 0;
}
}
.title-bar .title-bar__controls {
display: inline-block;
vertical-align: top;
position: relative;
float: right;
width: auto;
&:before,
&:after {
content: none;
}
}
.title-bar .title-bar__minimize {
&:before {
border-bottom-width: 2px;
}
}
.title-bar .title-bar__maximize {
&:before {
border-width: 1px 1px 2px 1px;
}
}
.title-bar .title-bar__close:before,
.title-bar .title-bar__close:after {
bottom: 50%;
top: 49.9%;
}
.title-bar .title-bar__close:before {
transform: rotate(45deg);
}
.title-bar .title-bar__close:after {
transform: rotate(-45deg);
}
.title-bar .title-bar__close:hover {
// background-color: #E04343;
}
.title-bar div:hover:after,
.title-bar div:hover:before {
// border-color: #333333;
}
.title-bar .title-bar__close:hover:after,
.title-bar .title-bar__close:hover:before {
// border-color: #FFFFFF;
}
// Side bar
// ----------------------------- //
.calendar__sidebar {
width: 100%;
margin: 0 auto;
float: none;
background:linear-gradient(120deg, lighten($blue-white, 5%), $blue-white);
padding-bottom: 0.7rem;
@media screen and (min-width:55em) {
position: absolute;
height: 100%;
width: 30%;
float: left;
margin-bottom: 0;
}
}
.calendar__sidebar .content{
padding: 2rem 1.5rem 2rem 4rem;
color: $black;
}
.sidebar__nav {
display: flex;
align-items: center;
justify-content: flex-start;
margin-bottom: 0.9rem;
padding: 0.7rem 1rem;
background-color: $white;
}
.sidebar__nav-item {
display: inline-block;
width: 22px;
margin-right: 23px;
padding: 0;
opacity: 0.8;
}
.sidebar__list{
list-style: none;
margin: 0;
padding-left: 1rem;
padding-right: 1rem;
}
.sidebar__list-item {
margin: 1.2rem 0;
color: lighten($black, 20%);
font-weight: 100;
font-size: 1rem;
}
.list-item__time {
display: inline-block;
width: 60px;
@media screen and (min-width:55em) {
margin-right: 2rem;
}
}
.sidebar__list-item--complete {
color: transparentize($black, 0.7);
.list-item__time {
color: transparentize($black, 0.7);
}
}
.sidebar__heading {
font-size: 2.2rem;
font-weight: bold;
padding-left: 1rem;
padding-right: 1rem;
margin-bottom: 3rem;
margin-top: 1rem;
span {
float: right;
font-weight: 300;
}
}
.calendar__heading-highlight {
color: #2d444a;
font-weight: 900;
}
// Calendar Days
// ----------------------------- //
.calendar__days {
display: flex;
flex-flow: column wrap;
align-items: stretch;
width: 100%;
float: none;
min-height: 580px;
height: 100%;
font-size: 12px;
padding: 0.8rem 0 1rem 1rem;
background:$white;
@media screen and (min-width:55em) {
width: 70%;
float: right;
}
}
// Top Bar
.calendar__top-bar {
display: flex;
flex: 32px 0 0;
}
.top-bar__days {
width: 100%;
padding: 0 5px;
color: lighten($black, 20%);
font-weight: 100;
-webkit-font-smoothing: subpixel-antialiased;
font-size: 1rem;
}
// Weeks & Days
.calendar__week {
display: flex;
flex: 1 1 0;
}
.calendar__day {
display: flex;
flex-flow: column wrap;
justify-content: space-between;
width: 100%;
padding: 1.9rem 0.2rem 0.2rem;
}
.calendar__date {
color: $black;
font-size: 1.7rem;
font-weight: 600;
line-height: 0.7;
@media screen and (min-width:55em) {
font-size: 2.3rem;
}
}
.calendar__week {
.inactive {
.calendar__date,
.task-count {
color: #c6c6c6;
}
}
.today {
.calendar__date {
color: $pink;
}
}
}
.calendar__task {
color: $black;
display: flex;
font-size: 0.8rem;
@media screen and (min-width:55em) {
font-size: 1rem;
}
&.calendar__task--today {
color: $pink;
}
}
Raw
windows-fluent-design-calendar.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment