app/assets/stylesheets/views/hub/hub.scss
// Styling particular to the hub controller and views
#hub {
a {
text-decoration: none;
}
h1 {
font-weight: 300;
}
h2 {
font-weight: 300;
}
h3 {
font-weight: 300;
}
.reset-all-filters {
display: none;
opacity: 0.5;
cursor: pointer;
.restart-background {
transition: opacity 0.5s ease;
background-repeat: no-repeat;
align-items: center;
vertical-align: bottom;
background-size: 60px;
width: auto;
min-width: 60px;
height: 60px;
background-position: center;
background-image: image-url("restart.svg");
}
h1 {
font-weight: 500;
text-align: center;
}
}
.reset-all-filters:hover {
opacity: 1;
transition: opacity 0.5s ease;
}
.restart-background:hover {
-webkit-animation-name: rotate-inverted;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate-inverted;
-moz-animation-duration: 0.5s;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: linear;
}
#hub_tabs {
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
position: absolute;
top: 60px;
left: 50%;
width: auto;
transform: translateX(-50%);
.navigation-bar {
li {
cursor: pointer;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-bottom: $standard_padding*0.5;
}
a {
padding: $standard_padding*2;
padding-top: $standard_padding;
padding-bottom: $standard_padding*0.9;
font-size:$font_small;
font-weight: 300;
text-transform: uppercase;
border-bottom: 2px solid transparent;
border-top: 2px solid transparent;
}
}
}
#navigation_list {
margin-top: $standard_margin;
display: flex;
justify-content:flex-start;
align-items: center;
flex-direction:column;
li {
padding: $standard_padding * .3;
list-style-type: none;
border-left: 1px solid $color-secondary-2-2;
margin-bottom: 1em;
a.task_name {
display: block;
}
.task_description {
display: block;
background-color: $note_yellow;
margin-left: $standard_padding;
padding: $standard_padding * .3;
}
}
}
.related_links_set {
margin: $standard_padding * 0.5;
min-height: 200px !important;
width: 260px;
li:first-letter {
text-transform:uppercase;
}
.related-title {
font-weight: 300;
font-size: 15px;
margin: 0;
padding-bottom: $standard_padding * 0.5;
border-bottom: 1px solid $navigation_border;
}
.related-title:first-letter {
text-transform: uppercase;
}
h4 {
margin-top: $standard_padding ;
font-weight: 500;
}
h4:first-letter {
text-transform: uppercase;
}
ul {
li {
margin-left: .4em;
padding: 0;
}
}
}
}