app/assets/stylesheets/helpers/hub/tasks.scss
// Styling particular to the hub controller and views
#task_carrousel {
display: flex;
flex-direction:column;
justify-content:flex-start;
.task-section {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
width: auto;
height: auto;
align-content: flex-start
}
@keyframes show {
0% {
opacity: 0;
transform: scale(0);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes hide {
0% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(0);
}
}
.show {
animation-name: show !important;
display: flex !important;
animation-name: show;
animation-duration: 0.2s;
animation-timing-function: ease;
animation-fill-mode: forwards;
}
.hide {
animation-name: show !important;
display: none !important;
animation-name: show;
animation-duration: 0.2s;
animation-timing-function: ease;
animation-fill-mode: forwards;
}
.task_card {
cursor: pointer;
display: none;
flex-direction: row;
position: relative;
margin-left: 0px;
margin-top:$standard_margin;
margin-right: $standard_margin;
width: 420px;
max-height: 180px;
min-height: 160px;
border-top-right-radius: .9rem;
border-bottom-right-radius: .9rem;
background-color: #FFF;
box-shadow: rgba(36, 37, 38, 0.08) 4px 4px 15px 0px;
transition: transform 0.3s ease,
box-shadow 0.3s ease;
.task_header {
opacity: 0.2;
overflow: hidden;
}
a {
flex-grow: 1;
}
}
.task_card:hover {
transition: background-color 0.5s ease,
box-shadow 0.5s ease;
box-shadow: 0px 3px 5px 0px rgba(0,0,0,.3);
transition: background-color 0.5s ease,
transform 0.3s ease,
box-shadow 0.3s ease;
.filter_data {
opacity: 1;
}
.task_header {
transition: opacity 0.5s ease;
opacity: 1;
}
}
.status {
box-sizing: border-box;
width: 100%;
height: 100%;
border-radius: 0px;
}
.task-information {
margin-left: 30px;
}
.fav-link {
position: absolute;
right: 14px;
top:$standard_margin * 0.5;
}
.task_header {
width: 34px;
display: flex;
position: absolute;
border-bottom: 1px solid $navigation_border;
padding: $standard_padding * 0.5;
padding-left: $standard_padding;
padding-right: $standard_padding;
.status:first-letter {
text-transform: uppercase;
}
.categories {
margin: 8px;
margin-top: 12px;
font-size: 0px !important;
width: 18px;
height: 18px;
background-repeat: no-repeat;
background-size: 14px;
}
.source {
background-image: image-url("book.svg");
}
.collecting_event {
background-image: image-url("geo_location.svg");
}
.biology {
background-image: image-url("biology.svg");
}
.taxon_name {
background-image: image-url("new.svg");
}
.collection_object {
background-image: image-url("bug.svg");
}
.nomenclature {
background-image: image-url("new.svg");
}
.matrix {
background-image: image-url("matrix.svg");
}
.dna {
background-image: image-url("helix.svg");
}
.image {
background-image: image-url("image.svg");
}
}
.task_name {
font-size: 18px;
max-width: 330px;
padding: $standard_padding * 0.25;
padding-left: $standard_padding;
padding-top: $standard_padding;
a {
color: $color-secondary-2-4;
}
}
.task-header-left {
display: flex;
flex-direction:row;
align-items:center;
}
.task-header-right {
display: flex;
flex-direction:column;
align-items:center;
justify-content:flex-end;
a {
margin-left: 5px;
}
}
.task_description {
font-size: 14px;
font-weight: 400;
line-height: 20px;
max-width: 350px;
color: $default_text;
padding-left: $standard_padding * 1.4;
}
.navigation {
display: flex;
background-color: #FFF;
box-shadow: 0px 1px 1px rgba(0,0,0,.2);
flex-direction:row;
justify-content:center;
order:-1;
align-items:center;
min-height: 42px;
min-width: 450px;
border-radius: .9rem;
padding: 0px 8px;
}
.navigation a {
display: flex;
cursor: pointer;
}
.navigation-arrows {
display: flex;
flex-direction: row;
}
.navigation-arrow {
display: flex;
padding: 5px;
}
.more_tasks_nav {
display: flex;
justify-content: center;
align-items: center;
width: 450px;
min-height: 50px;
bottom: 0px;
margin: 0.5em;
margin-bottom: 0px;
cursor: pointer;
}
.no-tasks {
display: none;
}
.task-nav-list {
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
.task-nav-item {
background-color: $navigation_border;
border-radius: 2px;
width: 15px;
height: 15px;
margin: 5px;
cursor: pointer;
}
.active {
background-color: $default_text;
width: 15px;
height: 15px;
}
}
@media screen and (min-height:1000px) {
.more_tasks_nav {
position: fixed !important;
}
}
}