Raspsnir/public_html/css/edt.css

127 lines
2.3 KiB
CSS
Raw Normal View History

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400);
$blue: #3498db;
$purple: #9b59b6;
$navy: #ff00ff;
$green: #2ecc71;
$red: #e74c3c;
$orange: #f39c12;
.blue { background: $blue }
.purple { background: $purple }
.navy { background: #00ffff; }
.green { background: $green }
.red { background: $red }
.orange { background: $orange }
td {
padding : 7px 1px;
border-radius: 0px;
}
.cs335, .cs426, .md303, .md352, .md313, .cs240 {
font-weight: 300;
cursor:pointer;
}
*, *:before, *:after {
margin:0; padding:0; border:0; outline: 0;
@include box-sizing(border-box);
}
table {
font-family: 'Open Sans', Helvetica;
color: black;
tr {
&:nth-child(2n){
background: #eff0f1;
}
&:nth-child(2n+3){
background: #fff;
}
}
th, td {
padding: 1em;
width: 10em;
}
}
.days, .time {
background: $navy;
text-transform: uppercase;
font-size: 0.8em;
text-align: center;
}
.time {
width: 3em!important;
padding-right: 5px;
}
// Tooltip Stuff by Chris Bracco
/* Add this attribute to the element that needs a tooltip */
[data-tooltip] {
position: relative;
z-index: 2;
cursor: pointer;
}
/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
visibility: hidden;
@include opacity(0);
pointer-events: none;
@include transition(0.5s ease all);
}
/* Position tooltip above the element */
[data-tooltip]:before {
position: absolute;
bottom: 110%;
left: 50%;
margin-bottom: 5px;
margin-left: -80px;
padding: 7px;
width: 160px;
@include border-radius(6px);
background-color: black;
color: #fff;
content: attr(data-tooltip);
text-align: center;
font-size: 14px;
line-height: 1.2;
}
/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
position: absolute;
bottom: 110%;
left: 50%;
margin-left: -5px;
width: 0;
border-top: 5px solid black;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
content: " ";
font-size: 0;
line-height: 0;
}
/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
visibility: visible;
bottom: 90%;
@include opacity(1);
}