gsy-component-library
Version:
reusable components from grid singularity
101 lines (100 loc) • 4.08 kB
CSS
@import url("https://fonts.googleapis.com/css?family=Lato:300,400,700");
@import url("https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500,700");
/* VERBUND THEME */
.diamond {
transform: rotate(45deg);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer; }
.diamond:focus {
outline: 0; }
.diamond__icon {
display: flex;
width: 30px;
height: 30px;
justify-content: center;
align-items: center;
transform: rotate(-45deg); }
.diamond__icon svg {
width: 100%;
height: 100%; }
.theme-d3a .diamond__icon svg {
fill: #fff; }
.theme-verbund .diamond__icon svg {
fill: #fff; }
.diamond__small {
width: 50px;
height: 50px;
margin: 12.5px;
background-color: #3199c2; }
.diamond__small .diamond__icon {
height: 25px;
width: 25px; }
.diamond__small:hover, .diamond__small.diamond--active {
border: solid 3px; }
.theme-d3a .diamond__small:hover, .theme-d3a .diamond__small.diamond--active {
background-color: #3a657f;
border-color: #a666ff; }
.theme-verbund .diamond__small:hover, .theme-verbund .diamond__small.diamond--active {
background-color: #3a657f;
border-color: #a666ff; }
.diamond__medium {
width: 66px;
height: 66px;
margin: 16.5px; }
.diamond__medium .diamond__icon {
width: 33px;
height: 33px; }
.diamond__medium:hover, .diamond__medium.diamond--active {
border: solid 3px; }
.theme-d3a .diamond__medium:hover, .theme-d3a .diamond__medium.diamond--active {
background-color: #3a657f;
border-color: #a666ff; }
.theme-verbund .diamond__medium:hover, .theme-verbund .diamond__medium.diamond--active {
background-color: #3a657f;
border-color: #a666ff; }
.diamond__large {
border: solid 3px;
width: 90px;
height: 90px;
margin: 22.5px; }
.theme-d3a .diamond__large {
background-color: #3a657f;
border-color: #a666ff; }
.theme-verbund .diamond__large {
background-color: #3a657f;
border-color: #a666ff; }
.diamond__large .diamond__icon {
width: 45px;
height: 45px; }
.diamond--house {
background-color: #135671; }
.diamond--celltower {
background-color: #833755; }
.diamond--generator {
background-color: #388574; }
.diamond--run, .diamond--plus {
border: solid 3px; }
.theme-d3a .diamond--run, .theme-d3a .diamond--plus {
background-color: #3a657f;
border-color: #35d7c6; }
.theme-verbund .diamond--run, .theme-verbund .diamond--plus {
background-color: #3a657f;
border-color: #35d7c6; }
.theme-d3a .diamond--run .diamond__icon svg, .theme-d3a .diamond--plus .diamond__icon svg {
fill: #35d7c6; }
.theme-verbund .diamond--run .diamond__icon svg, .theme-verbund .diamond--plus .diamond__icon svg {
fill: #35d7c6; }
.diamond--run:hover, .diamond--run.diamond--active, .diamond--plus:hover, .diamond--plus.diamond--active {
border: solid 3px; }
.theme-d3a .diamond--run:hover, .theme-d3a .diamond--run.diamond--active, .theme-d3a .diamond--plus:hover, .theme-d3a .diamond--plus.diamond--active {
background-color: #3a657f;
border-color: #a666ff; }
.theme-verbund .diamond--run:hover, .theme-verbund .diamond--run.diamond--active, .theme-verbund .diamond--plus:hover, .theme-verbund .diamond--plus.diamond--active {
background-color: #3a657f;
border-color: #a666ff; }
.theme-d3a .diamond--run:hover .diamond__icon svg, .theme-d3a .diamond--run.diamond--active .diamond__icon svg, .theme-d3a .diamond--plus:hover .diamond__icon svg, .theme-d3a .diamond--plus.diamond--active .diamond__icon svg {
fill: #a666ff; }
.theme-verbund .diamond--run:hover .diamond__icon svg, .theme-verbund .diamond--run.diamond--active .diamond__icon svg, .theme-verbund .diamond--plus:hover .diamond__icon svg, .theme-verbund .diamond--plus.diamond--active .diamond__icon svg {
fill: #a666ff; }