app/assets/stylesheets/helpers/hub/data.scss
// Styling particular to the hub controller and views
#data_cards {
display: flex;
justify-content: flex-start;
align-items: top;
margin-bottom: $standard_margin;
flex-direction: column;
flex-grow: 1;
@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);
}
}
.data_section {
display: flex;
justify-content: flex-start;
flex-direction: column;
width: 280px;
max-width: 280px;
}
[data-attribute='empty'] {
display: none;
}
[data-section='Core'] {
width: 250px;
max-width: 250px;
min-width: 100%;
}
[data-section='Supporting'] {
width: 500px;
max-width: 500px;
min-width: 100%;
}
[data-section='Annotations'] {
width: 250px;
max-width: 250px;
min-width: 100%;
}
.cards-section {
order: 1;
display: flex;
flex-direction: row;
justify-content: flex-start;
flex-flow: row wrap;
padding: $standard_padding * 0.5;
}
.hide {
animation-name: hide !important;
animation-duration: 0.2s;
animation-timing-function: linear;
position: absolute !important;
}
.card-container {
display: flex;
flex-direction: row;
align-items: center;
position: relative;
animation-name: show;
animation-duration: 0.2s;
animation-timing-function: linear;
animation-fill-mode: forwards;
margin: $standard_margin * 0.5;
[data-method='post'] {
position: absolute;
right: 12px;
}
}
.data_card:hover {
transition: background-color 0.5s ease, box-shadow 0.5s ease;
box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
transition: background-color 0.5s ease, border 0.5s ease,
box-shadow 0.5s ease, transform 0.3s ease;
.filter_data {
opacity: 1;
}
}
.card-categories {
width: 26px;
height: 44px;
display: flex;
left: 0px;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
background-color: $color-secondary-2-4;
position: absolute;
}
.data_card {
position: relative;
cursor: pointer;
width: 210px;
min-height: 26px;
display: flex;
flex-direction: row-reverse;
align-items: center;
justify-content: space-between;
// font-weight: 300;
border-radius: 15px;
background-color: #fff;
//border-left: 3px solid $color-secondary-2-4;
padding: $standard_padding;
padding-left: $standard_padding + 2.5;
box-shadow: rgba(36, 37, 38, 0.08) 4px 4px 15px 0px;
transition: background-color 0.5s ease, border 0.3s ease,
box-shadow 0.3s ease, transform 0.3s ease;
a {
color: $default_text;
}
}
.shared {
background-color: $color-secondary-1-3;
}
.application_defined {
background-color: $color-primary-4;
}
.filter_data {
opacity: 0.6;
padding: 4px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition: opacity 0.5s ease;
svg {
opacity: 0.5;
padding: 6px;
width: 14px;
height: 14px;
}
}
.categories.unknown {
color: #bbbbbb;
}
.categories.stable {
color: #fdbd41;
}
.categories.prototype {
color: #fc615d;
}
.categories.complete {
color: #35c94a;
}
@media screen and (min-width: 1339px) {
.data_section {
width: 1300px !important;
}
}
@media screen and (min-width: 1024px) and (max-width: 1338px) {
.data_section {
width: 500px !important;
}
}
@media screen and (min-width: 1023px) and (max-width: 800px) {
.data_section {
width: 250px !important;
}
}
}
.hub_section_label {
display: flex;
height: 34px;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
justify-content: space-between;
flex-direction: flex-start;
align-items: center;
margin-left: $standard_margin;
margin-right: $standard_margin;
border-bottom: 1px solid $navigation_border;
text-align: center;
}
.hub_section_label h3 {
font-size: $font_normal;
color: #888;
text-transform: uppercase;
}