console
/*
Inspired from "Calendar Widget ll Freebie" by Hanna Jung http://hannajun.com
Dribble here: https://dribbble.com/shots/2209385-Calendar-Widget-ll-Freebie
Thanks for the great design work.
Was only interested in learning haml & scss.
*/
<section class='calendar'>
<h1>August 2015</h1>
<form action='#'>
<label class='weekday'>Mo</label>
<label class='weekday'>Tu</label>
<label class='weekday'>We</label>
<label class='weekday'>Th</label>
<label class='weekday'>Fr</label>
<label class='weekday'>Sa</label>
<label class='weekday'>Su</label>
<label class='day invalid' data-day='0'>
<input class='appointment' date-day='-4' placeholder='What would you like to do?' required='true' type='text'>
<span>-4</span>
<em></em>
</label>
<label class='day invalid' data-day='1'>
<input class='appointment' date-day='-3' placeholder='What would you like to do?' required='true' type='text'>
<span>-3</span>
<em></em>
</label>
<label class='day invalid' data-day='2'>
<input class='appointment' date-day='-2' placeholder='What would you like to do?' required='true' type='text'>
<span>-2</span>
<em></em>
</label>
<label class='day invalid' data-day='3'>
<input class='appointment' date-day='-1' placeholder='What would you like to do?' required='true' type='text'>
<span>-1</span>
<em></em>
</label>
<label class='day invalid' data-day='4'>
<input class='appointment' date-day='0' placeholder='What would you like to do?' required='true' type='text'>
<span>0</span>
<em></em>
</label>
<label class='day' data-day='5'>
<input class='appointment' date-day='1' placeholder='What would you like to do?' required='true' type='text'>
<span>1</span>
<em></em>
</label>
<label class='day' data-day='6'>
<input class='appointment' date-day='2' placeholder='What would you like to do?' required='true' type='text'>
<span>2</span>
<em></em>
</label>
<label class='day' data-day='7'>
<input class='appointment' date-day='3' placeholder='What would you like to do?' required='true' type='text'>
<span>3</span>
<em></em>
</label>
<label class='day' data-day='8'>
<input class='appointment' date-day='4' placeholder='What would you like to do?' required='true' type='text'>
<span>4</span>
<em></em>
</label>
<label class='day' data-day='9'>
<input class='appointment' date-day='5' placeholder='What would you like to do?' required='true' type='text'>
<span>5</span>
<em></em>
</label>
<label class='day' data-day='10'>
<input class='appointment' date-day='6' placeholder='What would you like to do?' required='true' type='text'>
<span>6</span>
<em></em>
</label>
<label class='day' data-day='11'>
<input class='appointment' date-day='7' placeholder='What would you like to do?' required='true' type='text'>
<span>7</span>
<em></em>
</label>
<label class='day' data-day='12'>
<input class='appointment' date-day='8' placeholder='What would you like to do?' required='true' type='text'>
<span>8</span>
<em></em>
</label>
<label class='day' data-day='13'>
<input class='appointment' date-day='9' placeholder='What would you like to do?' required='true' type='text'>
<span>9</span>
<em></em>
</label>
<label class='day' data-day='14'>
<input class='appointment' date-day='10' placeholder='What would you like to do?' required='true' type='text'>
<span>10</span>
<em></em>
</label>
<label class='day' data-day='15'>
<input class='appointment' date-day='11' placeholder='What would you like to do?' required='true' type='text'>
<span>11</span>
<em></em>
</label>
<label class='day' data-day='16'>
<input class='appointment' date-day='12' placeholder='What would you like to do?' required='true' type='text'>
<span>12</span>
<em></em>
</label>
<label class='day' data-day='17'>
<input class='appointment' date-day='13' placeholder='What would you like to do?' required='true' type='text'>
<span>13</span>
<em></em>
</label>
<label class='day' data-day='18'>
<input class='appointment' date-day='14' placeholder='What would you like to do?' required='true' type='text'>
<span>14</span>
<em></em>
</label>
<label class='day' data-day='19'>
<input class='appointment' date-day='15' placeholder='What would you like to do?' required='true' type='text'>
<span>15</span>
<em></em>
</label>
<label class='day' data-day='20'>
<input class='appointment' date-day='16' placeholder='What would you like to do?' required='true' type='text'>
<span>16</span>
<em></em>
</label>
<label class='day' data-day='21'>
<input class='appointment' date-day='17' placeholder='What would you like to do?' required='true' type='text'>
<span>17</span>
<em></em>
</label>
<label class='day' data-day='22'>
<input class='appointment' date-day='18' placeholder='What would you like to do?' required='true' type='text'>
<span>18</span>
<em></em>
</label>
<label class='day' data-day='23'>
<input class='appointment' date-day='19' placeholder='What would you like to do?' required='true' type='text'>
<span>19</span>
<em></em>
</label>
<label class='day' data-day='24'>
<input class='appointment' date-day='20' placeholder='What would you like to do?' required='true' type='text'>
<span>20</span>
<em></em>
</label>
<label class='day' data-day='25'>
<input class='appointment' date-day='21' placeholder='What would you like to do?' required='true' type='text'>
<span>21</span>
<em></em>
</label>
<label class='day' data-day='26'>
<input class='appointment' date-day='22' placeholder='What would you like to do?' required='true' type='text'>
<span>22</span>
<em></em>
</label>
<label class='day' data-day='27'>
<input class='appointment' date-day='23' placeholder='What would you like to do?' required='true' type='text'>
<span>23</span>
<em></em>
</label>
<label class='day' data-day='28'>
<input class='appointment' date-day='24' placeholder='What would you like to do?' required='true' type='text'>
<span>24</span>
<em></em>
</label>
<label class='day' data-day='29'>
<input class='appointment' date-day='25' placeholder='What would you like to do?' required='true' type='text'>
<span>25</span>
<em></em>
</label>
<label class='day' data-day='30'>
<input class='appointment' date-day='26' placeholder='What would you like to do?' required='true' type='text'>
<span>26</span>
<em></em>
</label>
<label class='day' data-day='31'>
<input class='appointment' date-day='27' placeholder='What would you like to do?' required='true' type='text'>
<span>27</span>
<em></em>
</label>
<label class='day' data-day='32'>
<input class='appointment' date-day='28' placeholder='What would you like to do?' required='true' type='text'>
<span>28</span>
<em></em>
</label>
<label class='day' data-day='33'>
<input class='appointment' date-day='29' placeholder='What would you like to do?' required='true' type='text'>
<span>29</span>
<em></em>
</label>
<label class='day' data-day='34'>
<input class='appointment' date-day='30' placeholder='What would you like to do?' required='true' type='text'>
<span>30</span>
<em></em>
</label>
<label class='day' data-day='35'>
<input class='appointment' date-day='31' placeholder='What would you like to do?' required='true' type='text'>
<span>31</span>
<em></em>
</label>
<div class='clearfix'></div>
</form>
</section>
$background_color : #fcee6d;
$element_highlight : $background_color;
$calendar_color: #29323f;
$day_pill_size : 25px;
$pill_margin : 8px;
html {
position: relative;
position: absolute; width:100%; height: 100%;
left:0; top:0; right:0; bottom: 0;
}
body {
background-color:desaturate($background_color, 30);
}
section.calendar {
background-color: $calendar_color;
font-family: 'Dosis', sans-serif;
color: #fff;
width: 290px; padding:45px;
position: absolute;
top:50%; left:50%; transform: translateY(-50%) translateX(-50%);
box-shadow: 5px 10px 20px rgba(0,0,0,.6);
border-radius:5px;
h1 {
text-align: center;
color: $element_highlight;
margin: 0 0 30px 0;
}
form {
position:relative;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
align-content: flex-start;
label.weekday{
display: inline-block;
width:$day_pill_size; margin: $pill_margin;
text-align: center;
color: #999;
}
form {
margin:0; padding:0;
}
label.day{
display: inline-block;
width:$day_pill_size; margin: $pill_margin;
span {
display: inline-block;
width:$day_pill_size; height:$day_pill_size; line-height: $day_pill_size;
margin: -2px 0 0 -2px;
border-radius: 50%;
border: 2px solid $calendar_color;
text-align:center;
transition: all .2s linear;
cursor: pointer;
&:hover {
border-color: darken(desaturate($element_highlight, 20), 10);
}
}
em {
display: inline-block;
position: absolute;
border-radius: 50%;
border-color: $calendar_color;
width: 3px; height:3px; background-color: darken($element_highlight, 50);
margin-left:11px; margin-top: 2px;
opacity: 0;
transition: all .2s linear;
}
input[type=text]{
border:0; opacity:0;
position:absolute;
margin-top: 40px;
left: -45px; width: 380px; height: 1px; padding: 0;
outline: none; font-size: 16px;
transition: height .2s linear, opacity .2s linear, color .02s linear;
color: #fff;
&:focus{
opacity: 1;
height: 35px; padding:10px 40px;
left: -45px; width: 300px;
color: $calendar_color;
&+ span {
color: $element_highlight;
border-color: $element_highlight;
background: $element_highlight;
color: $calendar_color;
font-weight: bold;
margin-bottom: 65px;
}
&~ em {
border-radius: 0;
border: 5px solid transparent;
background: transparent;
border-bottom-color:rgba(255,255,255,1);
margin-top:-62px; margin-left:7px;
width:0; height:0;
display:inline-block; opacity: 1;
}
}
&:valid {
&+ span {
}
&~ em {
display: inline-block;
opacity: 1;
}
}
}
&.invalid {
opacity: 0; width:$day_pill_size; height:$day_pill_size;
span, input {
display: none;
}
}
}
}
div.clearfix {
clear:both;
}
div.hidden {
display:none;
}
}