app/assets/stylesheets/base/navigation.scss
.favourite_link {
background-image: image-url('empty_star.svg');
background-size: 16px;
background-position: left, center;
padding: 16px;
padding-right: 0px;
font-size: 0px;
background-repeat: no-repeat;
text-decoration: none;
}
.unfavorite_link {
font-size: 0px;
padding: 16px;
padding-right: 0px;
background-image: image-url('star.svg');
background-size: 16px;
background-position: left, center;
background-repeat: no-repeat;
text-decoration: none;
}
// see navigation_emphasis in palette
a, .link {
text-decoration: none;
transition: background-color 0.4s ease,
color 0.4s ease;
color: $color-secondary-2-4;
&:hover {
color: $default_text;
}
}
/* quick-bar nav */
#quick_bar {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
font-weight: 300;
position: relative;
box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.2);
background-color: #FFF;
height: 45px;
padding-right: $standard_margin;
.hub-project {
position: relative;
margin-left: 1em;
}
ul {
margin: 0px;
padding: 0px;
display: flex;
margin-left: $standard_margin;
}
li a:first-letter {
text-transform: uppercase;
}
.on_hub {
background-color: $color-secondary-2-4 !important;
background-image: image-url('taxonworks-white-circle.svg') !important;
background-size: 38px !important;
}
.hub_link_background {
opacity: 1 !important;
background-color: white;
}
.on_hub_link_background {
opacity: 1 !important;
background-color: $color-secondary-2-4 !important;
}
.hub_circle {
opacity: 1;
position: absolute;
margin-left: 1em;
background-size: 24px;
background-repeat: no-repeat;
background-position: center;
z-index: 1100;
font-size: 0px;
top: 50%;
transform: translateY(-50%);
width: 54px;
height: 54px;
justify-content: center;
align-items: center;
border-radius: 100%;
}
.hub_link {
opacity: 0.6;
position: absolute;
margin-left: 1em;
background-image: image-url('taxonworks-black-circle.svg');
background-size: 30px;
background-repeat: no-repeat;
background-position: center;
z-index: 1100;
font-size: 0px;
background-color: $panel_background;
top: 50%;
transform: translateY(-50%);
width: 54px;
height: 54px;
justify-content: center;
align-items: center;
border-radius: 100%;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
transition: background-size 0.3s ease,
background-color 0.3s ease,
opacity 0.5s ease,
}
.hub_project_name {
margin-left: 60px;
padding: 5px;
font-size: $font_title;
font-weight: 300;
}
.hub-project:hover {
.hub_link {
opacity: 1;
transition: background-size 0.3s ease,
background-color 0.3s ease,
opacity 0.5s ease;
background-size: 40px;
color: $default_text;
}
}
.active-section {
font-weight: bold;
}
}
.context-menu {
display: flex;
list-style: none;
align-items: center;
margin: 0px;
&> li:last-child:after {
content: none;
}
&> li:last-child {
border-right: none;
padding-right: 0px;
padding-left: $standard_padding;
}
&> li:first-child {
padding-left: 0px;
}
&> li {
justify-content: center;
//text-align: center;
padding-left: $standard_padding;
padding-right: $standard_padding;
border-right: 1px solid $navigation_border;
}
&> li a {
font-size: $font_small;
text-decoration: none;
}
}
/* see http://css-tricks.com/snippets/css/a-guide-to-flexbox/, seems nice */
.horizontal_navbar {
list-style: none;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
-webkit-flex-flow: row wrap;
a {
text-decoration: none;
display: block;
padding: 0 1em; // was 1
}
}
@media all and (max-width: 800px) {
.horizontal_navbar, .hub-navbar {
justify-content: space-around;
}
}
@media all and (max-width: 600px) {
.horizontal_navbar, .hub-navbar {
-webkit-flex-flow: column wrap;
flex-flow: column wrap;
padding: 0;
}
.horizontal_navbar a {
text-align: center;
padding: 10px;
border-top: 1px solid rgba(255, 255, 255, 0.3);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.horizontal_navbar li:last-of-type a {
border-bottom: none;
}
}
.horizontal_navbar a:first-letter {
text-transform: uppercase;
}
.centered_navbar {
@extend .horizontal_navbar;
justify-content: center;
}
.centered_navbar {
margin: 0px;
padding: 0px;
}
.left_justified_navbar {
@extend .horizontal_navbar;
margin: 0px;
padding: 0px;
justify-content: flex-start;
}
#taxonworks_link {
text-decoration: none;
}
.task_bar {
display: flex;
flex-direction: row;
flex-flow: wrap;
list-style: none;
padding-left: 0px;
margin-top: 0px;
font-weight: 300;
li {
display: flex;
padding: 5px;
margin-right: 5px;
background-repeat: no-repeat;
background-size: 8px;
background-position: left, center;
align-items: center;
}
}
.overflow-auto {
overflow: auto;
}
.overflow-x-auto {
overflow-x: auto;
}
.overflow-y-auto {
overflow-y: auto;
}
.overflow-scroll {
overflow: scroll;
}
.overflow-x-scroll {
overflow-x: scroll;
}
.overflow-y-scroll {
overflow-y: scroll;
}