2013/12/15
[UI] UI Components : Mobile Calendar
カレンダーUI。相対指定により幅の変化に対応。
DEMO
a
b
c
d
HTML
CSS
/* 共通 */
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.calendar {
line-height:1;
font-family:'Lato';
font-weight:300;
}
.calendar a {
text-decoration:none;
}
.calendar_month, .calendar_week {
display:table;
width: 100%;
font-weight:400;
overflow:hidden;
}
.calendar_month > li, .calendar_week > li {
display:table-cell;
vertical-align: middle;
text-align:center;
}
.calendar_month .prev, .calendar_month .next {
width:3em;
}
.calendar_month .prev a, .calendar_month .next a {
display:block;
padding:1em 0;
}
.calendar_month .month b, .calendar_month .month span {
margin:0 .2em;
font-size:150%;
font-weight:300;
}
.calendar_week {
table-layout: fixed;
font-size:75%;
}
.calendar_week > li {
width:14.285714285%;
padding:1em 0;
}
.calendar_days {
overflow:hidden;
}
.calendar_days > li {
float:left;
width:14.285714285%;
}
.calendar_days > li a {
display:block;
padding:1em 0;
text-align:center;
}
/* a */
.calendar_month a {
color:#ccc;
}
.calendar_week {
background:#2980B9;
color:rgba(255,255,255,.5);
}
.calendar_days > li a {
border-bottom:#fff 1px solid;
color:#454C5E;
}
.calendar_days > li:nth-of-type(7n) a {
color:#2980B9;
}
.calendar_days > li:nth-of-type(7n+1) a, .calendar_days .holiday a {
color:#BD2426;
}
.calendar_days .outside a {
color:#ccc !important;
}
.calendar_days .today a {
background:#2789E4;
color:#fff;
}
/* b */
.calendar_month .month {
border-right:#3194CE 1px solid;
border-left:#3194CE 1px solid;
}
.calendar_month .month, .calendar_month a {
background:#3DA5E5;
color:#fff;
}
.calendar_week {
background:#1773A8;
color:rgba(255,255,255,.7);
}
.calendar_days > li a {
border-right:#3194CE 1px solid;
border-bottom:#3194CE 1px solid;
background:#3DA5E5;
color:#fff;
}
.calendar_days > li:nth-of-type(7n) a {
border-right: none;
color:#1A608C;
}
.calendar_days > li:nth-of-type(7n+1) a, .calendar_days .holiday a {
color:#FFBCBC;
}
.calendar_days .outside a {
color:rgba(255,255,255,.2) !important;
}
.calendar_days .today a {
background:#fff;
color:#2980B9;
}
/* c */
.calendar_month a, .calendar_week {
color:#fff;
}
.calendar_days, .calendar_days > li {
padding:1px;
}
.calendar_days > li a {
padding:.9em 0;
border-radius: 2px;
background:#DCEDE5;
color:#62726B;
}
.calendar_days > li:nth-of-type(7n) a {
color:#2980B9;
}
.calendar_days > li:nth-of-type(7n+1) a, .calendar_days .holiday a {
color:#BD2426;
}
.calendar_days .outside a {
color:rgba(98,114,107,.3) !important;
}
.calendar_days .today a {
background:#BBCBC4;
color:#fff;
}
/* d */
.calendar_month .month {
border-left:#C9CACA 1px solid;
border-right:#C9CACA 1px solid;
}
.calendar_month .month, .calendar_month a, .calendar_days > li a {
background:#E0E1E2;
-webkit-box-shadow:1px 1px 0 rgba(255,255,255,.5) inset;
box-shadow:1px 1px 0 rgba(255,255,255,.5) inset;
color:#636F7C;
}
.calendar_week {
background:#636F7C;
color:rgba(255,255,255,.7);
}
.calendar_days > li a {
border-bottom:#C9CACA 1px solid;
border-right:#C9CACA 1px solid;
}
.calendar_days > li:nth-of-type(7n) a {
border-right: none;
color:#2980B9;
}
.calendar_days > li:nth-of-type(7n+1) a, .calendar_days .holiday a {
color:#BD2426;
}
.calendar_days .outside a {
color:#BFC0C1 !important;
}
.calendar_days .today a {
background:#F4F6F7;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,.1) inset;
box-shadow:0 1px 2px rgba(0,0,0,.1) inset;
}
0 件のコメント :
コメントを投稿