Package structure and building
This commit is contained in:
@@ -0,0 +1,43 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.app {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.content {
|
||||
float: left;
|
||||
width: calc(100% - 190px);
|
||||
margin-top: 20px;
|
||||
}
|
||||
.content .left, .content .right {
|
||||
float: left;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.info-block {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.info-block .img {
|
||||
float: left;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: #ddd;
|
||||
background-position: center;
|
||||
background-size: 100% auto;
|
||||
margin-right: 10px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.info-block h1 {
|
||||
font-size: 30px;
|
||||
line-height: 40px;
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
@@ -0,0 +1,218 @@
|
||||
@media (min-width: 640px) {
|
||||
.barchart-container, .sac {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1100px) {
|
||||
.barchart-container, .sac {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.barchart-container {
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
padding: 0 20px 20px 0;
|
||||
}
|
||||
.barchart g {
|
||||
cursor: pointer;
|
||||
}
|
||||
.barchart g:hover .bar {
|
||||
opacity: .8;
|
||||
}
|
||||
.barchart .label {
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
}
|
||||
.barchart .label_underlay {
|
||||
fill: rgba(255, 255, 255, .7);
|
||||
}
|
||||
|
||||
|
||||
.sac {
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
padding: 0 20px 20px 0;
|
||||
}
|
||||
.sac .dot {
|
||||
display: none;
|
||||
}
|
||||
.sac .dot text {
|
||||
font-size: 10px;
|
||||
}
|
||||
.sac .legend {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.color-dot {
|
||||
display: block;
|
||||
float: left;
|
||||
content: '';
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 1px 5px 0 0;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.sac .legend li {
|
||||
display: inline-block;
|
||||
padding: 10px 15px 0 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sac.focused .path {
|
||||
fill: #f0f0f0;
|
||||
}
|
||||
|
||||
.sac.focused .label {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.sac.item-0 .path-0 { fill: #EA8369; }
|
||||
.sac.item-1 .path-1 { fill: #FCCD67; }
|
||||
.sac.item-2 .path-2 { fill: #B5A9F2; }
|
||||
.sac.item-3 .path-3 { fill: #9DD7F2; }
|
||||
.sac.item-4 .path-4 { fill: #FFA3A4; }
|
||||
.sac.item-5 .path-5 { fill: #A8EAA8; }
|
||||
.sac.item-6 .path-6 { fill: #F9D08B; }
|
||||
.sac.item-7 .path-7 { fill: #6CCECB; }
|
||||
.sac.item-8 .path-8 { fill: #F9E559; }
|
||||
.sac.item-9 .path-9 { fill: #FFBAD2; }
|
||||
.sac.item-0 .dot-0 { display: inline; }
|
||||
.sac.item-1 .dot-1 { display: inline; }
|
||||
.sac.item-2 .dot-2 { display: inline; }
|
||||
.sac.item-3 .dot-3 { display: inline; }
|
||||
.sac.item-4 .dot-4 { display: inline; }
|
||||
.sac.item-5 .dot-5 { display: inline; }
|
||||
.sac.item-6 .dot-6 { display: inline; }
|
||||
.sac.item-7 .dot-7 { display: inline; }
|
||||
.sac.item-8 .dot-8 { display: inline; }
|
||||
.sac.item-9 .dot-9 { display: inline; }
|
||||
.sac.item-0 .label-0 { opacity: 1; }
|
||||
.sac.item-1 .label-1 { opacity: 1; }
|
||||
.sac.item-2 .label-2 { opacity: 1; }
|
||||
.sac.item-3 .label-3 { opacity: 1; }
|
||||
.sac.item-4 .label-4 { opacity: 1; }
|
||||
.sac.item-5 .label-5 { opacity: 1; }
|
||||
.sac.item-6 .label-6 { opacity: 1; }
|
||||
.sac.item-7 .label-7 { opacity: 1; }
|
||||
.sac.item-8 .label-8 { opacity: 1; }
|
||||
.sac.item-9 .label-9 { opacity: 1; }
|
||||
|
||||
|
||||
.selector {
|
||||
width: 100%;
|
||||
height: 22px;
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.selector .title {
|
||||
width: auto;
|
||||
float: left;
|
||||
font-weight: 400;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.selector .items {
|
||||
display: block;
|
||||
float: left;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.selector li {
|
||||
display: inline-block;
|
||||
font-weight: 300;
|
||||
color: #aaa;
|
||||
cursor: pointer;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.selector li.active {
|
||||
font-weight: 400;
|
||||
color: #222;
|
||||
cursor: default;
|
||||
border-bottom: #222 1px solid;
|
||||
}
|
||||
|
||||
.whatsgoingon {
|
||||
color: #444;
|
||||
margin-bottom: 20px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.whatsgoingon em {
|
||||
display: inline-block;
|
||||
line-height: 16px;
|
||||
color: #000;
|
||||
font-style: normal;
|
||||
margin: 3px 0 0;
|
||||
padding: 3px 6px;
|
||||
background-color: #f0f0f0;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.week-selector em {
|
||||
background-color: #d0f0f0;
|
||||
}
|
||||
.week-selector em:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
margin: 0 3px -1px 0;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background-size: 14px 14px;
|
||||
/* Source: https://github.com/github/octicons/blob/master/svg/calendar.svg */
|
||||
background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMjQiIHdpZHRoPSIxMDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxwYXRoIGQ9Ik03MDQgNTEyaC02NHYxMjhoNjRWNTEyek01NzYgNTEyaC02NHYxMjhoNjRWNTEyek03MDQgMzIwaC02NHYxMjhoNjRWMzIwek04MzIgNTEyaC02NHYxMjhoNjRWNTEyek01NzYgNzA0aC02NHYxMjhoNjRWNzA0ek03NjggMGgtNjR2MTI4aDY0VjB6TTI1NiAwaC02NHYxMjhoNjRWMHpNODMyIDMyMGgtNjR2MTI4aDY0VjMyMHpNNTc2IDMyMGgtNjR2MTI4aDY0VjMyMHpNMzIwIDcwNGgtNjR2MTI4aDY0VjcwNHpNMTkyIDUxMmgtNjR2MTI4aDY0VjUxMnpNMzIwIDUxMmgtNjR2MTI4aDY0VjUxMnpNODMyIDY0djEyOEg2NDBWNjRIMzIwdjEyOEgxMjhWNjRIMHY4OTZoOTYwVjY0SDgzMnpNODk2IDg5Nkg2NFYyNTZoODMyVjg5NnpNMTkyIDcwNGgtNjR2MTI4aDY0VjcwNHpNNDQ4IDMyMGgtNjR2MTI4aDY0VjMyMHpNNDQ4IDcwNGgtNjR2MTI4aDY0VjcwNHpNMzIwIDMyMGgtNjR2MTI4aDY0VjMyMHpNNDQ4IDUxMmgtNjR2MTI4aDY0VjUxMnpNNzA0IDcwNGgtNjR2MTI4aDY0VjcwNHoiIC8+Cjwvc3ZnPg==");
|
||||
}
|
||||
|
||||
.week-selector {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.week-selector .selector {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 0 6px;
|
||||
width: 110px;
|
||||
}
|
||||
|
||||
.week-selector .selector em {
|
||||
width: 100%;
|
||||
}
|
||||
.week-selector .selector select {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 5%;
|
||||
width: 90%;
|
||||
margin: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.week-selector .selector:hover em {
|
||||
visibility: hidden;
|
||||
}
|
||||
.week-selector .selector:hover select {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
/* NEW */
|
||||
|
||||
.axis {
|
||||
stroke: #888;
|
||||
stroke-width: 1px;
|
||||
}
|
||||
.axis-mark {
|
||||
font-size: 10px;
|
||||
fill: #888;
|
||||
}
|
||||
|
||||
.sac .dot circle {
|
||||
fill: #fff;
|
||||
stroke: #f0f0f0;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
.sac .dot text {
|
||||
text-anchor: middle;
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
.logo-button {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/* Single letter */
|
||||
.logo {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
font-family: Courier, monospace;
|
||||
font-size: 22px;
|
||||
padding: 4px 3px 6px 3px;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Colors */
|
||||
.logo.e {
|
||||
background-color: #FCCD67;
|
||||
}
|
||||
.logo.m, .logo.p {
|
||||
background-color: #f39d41;
|
||||
}
|
||||
.logo.a, .logo.c, .logo.t {
|
||||
background-color: #ef7126;
|
||||
}
|
||||
|
||||
/* Letters */
|
||||
.logo.e {
|
||||
width: 30px;
|
||||
padding-left: 10px;
|
||||
border-top-left-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
}
|
||||
.logo.m {
|
||||
width: 17px;
|
||||
margin-left: -5px;
|
||||
border-top-left-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
.logo.p {
|
||||
width: 18px;
|
||||
}
|
||||
.logo.a {
|
||||
width: 15px;
|
||||
padding-left: 2px;
|
||||
}
|
||||
.logo.c {
|
||||
width: 16px;
|
||||
}
|
||||
.logo.t {
|
||||
width: 26px;
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
.menu {
|
||||
float: left;
|
||||
width: 150px;
|
||||
margin: 20px;
|
||||
}
|
||||
.menu ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.menu li {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.menu .nav {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.menu .empact {
|
||||
height: 40px;
|
||||
padding: 5px 0;
|
||||
margin-bottom: 21px;
|
||||
}
|
||||
.menu .nav.header {
|
||||
color: #444;
|
||||
font-weight: 600;
|
||||
cursor: default;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
line-height: 24px;
|
||||
}
|
||||
.menu .nav a {
|
||||
display: inline-block;
|
||||
line-height: 21px;
|
||||
width: 100%;
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
width: auto;
|
||||
max-width: 150px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
border-bottom: #fff 1px solid;
|
||||
font-weight: 300;
|
||||
}
|
||||
.menu .nav a.active {
|
||||
font-weight: 400;
|
||||
color: #000;
|
||||
border-bottom: #000 1px solid;
|
||||
}
|
||||
Reference in New Issue
Block a user