Skip to content

Instantly share code, notes, and snippets.

@wgminer
Created August 11, 2014 18:43
Show Gist options
  • Save wgminer/150adec59f48409f7a0f to your computer and use it in GitHub Desktop.
Save wgminer/150adec59f48409f7a0f to your computer and use it in GitHub Desktop.
.border-radius(@radius) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
#timetable {
font-size: 14px;
color: #333;
font-weight: 400;
min-height: 173px;
@blue: #569ed4;
a {
color: @blue;
cursor: pointer;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
.tt_header {
border-bottom: 1px solid #ccc;
position: relative;
min-height: 50px;
text-align: center;
font-weight: 700;
font-size: 14px;
.tt_current-date {
display: block;
line-height: 30px;
position: absolute;
left: 75px;
right: 75px;
top: 10px;
}
.tt_button {
.border-radius(4px);
background-color: #eee;
border: 1px solid #ccc;
position: absolute;
top: 10px;
width: 30px;
height: 30px;
padding: 0;
margin: 0;
line-height: 28px;
font-size: 16px;
}
.tt_prev-week {
left: 5px;
}
.tt_prev-day {
left: 5px + 30px + 5px;
}
.tt_next-day {
right: 5px + 30px + 5px;
}
.tt_next-week {
right: 5px;
}
}
.tt_subheader {
text-align: center;
padding: 10px 0;
}
.tt_no-events p {
text-align: center;
line-height: 60px;
padding: 10px;
font-size: 18px;
border-top: 1px solid #ccc;
color: #ccc;
}
.tt_event {
position: relative;
padding: 10px 10px 0 65px;
border-top: 1px solid #ccc;
.tt_time {
position: absolute;
top: 0;
left: 0;
padding: 10px;
font-weight: 700;
.tt_hour {
font-size: 18px;
}
.tt_period {
font-size: 12px;
}
}
.tt_details {
.tt_name {
cursor: pointer;
display: block;
font-size: 18px;
font-weight: 700;
margin-bottom: 5px;
}
.tt_host {
display: block;
margin-bottom: 10px;
font-size: 12px;
strong {
display: block;
}
}
.tt_button.tt_green {
font-size: 12px;
margin: 0 0 10px;
position: relative;
padding: 5px 10px 5px 25px;
.border-radius(4px);
i {
left: 5px;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
position: absolute;
}
}
.tt_expanded-details {
font-size: 12px;
line-height: 1.4;
label {
margin-top: 10px;
display: block;
font-weight: 700;
}
p {
margin: 0;
}
ul {
list-style: none;
margin: 0;
padding: 0;
li {
list-style: none;
}
}
}
.tt_actions {
margin: 15px 0;
overflow: hidden;
}
}
}
}
@media (max-width: 1200px) {
#timetable {
.tt_header {
.border-radius(4px);
border: 1px solid #ccc;
position: relative;
min-height: 20px;
text-align: center;
font-weight: 700;
font-size: 14px;
.tt_current-date {
display: block;
line-height: 20px;
position: absolute;
left: 45px;
right: 45px;
top: 0;
font-size: 12px;
}
.tt_button {
.border-radius(0);
border: 0;
top: 0;
width: 20px;
height: 20px;
line-height: 18px;
}
.tt_prev-week {
.border-radius(4px 0 0 4px);
border-right: 1px solid #ccc;
left: 0;
}
.tt_prev-day {
border-right: 1px solid #ccc;
left: 20px;
}
.tt_next-day {
border-left: 1px solid #ccc;
right: 20px;
}
.tt_next-week {
.border-radius(0 4px 4px 0);
border-left: 1px solid #ccc;
right: 0;
}
}
.tt_event {
padding: 10px 0px 0 50px;
.tt_time {
padding: 10px 0;
.tt_hour {
font-size: 16px;
}
.tt_period {
font-size: 10px;
}
}
.tt_details {
.tt_name {
font-size: 16px;
}
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment