src/styles/card.scss
/**
* @license
* Copyright (c) La Vía Óntica SC, Ontica LLC and contributors. All rights reserved.
*
* See LICENSE.txt in the project root for complete license information.
*/
@import 'mixins', 'variables';
.card {
@include column;
height: 100%;
width: auto;
max-height: 100%;
max-width: 100%;
background-color: $white;
}
.card-header {
display: flex;
flex-flow: row nowrap;
flex: 0 0 auto;
min-height: 76px;
padding: 16px;
.card-title {
flex: 1 1 auto;
color: $title-color;
font-size: 14pt;
font-weight: 600;
}
.card-header-options {
display: flex;
flex-flow: row nowrap;
align-self: flex-start;
align-content: flex-end;
align-items: center;
padding-top: 6px;
padding-left: 6px;
font-size: 10pt;
font-weight: 400;
label {
color: $secondary-color;
font-size: 10pt;
font-weight: 400;
padding-right: 8px;
}
}
.card-icon {
cursor: pointer;
}
.card-hint {
color: $secondary-color-semi-light;
font-size: 9pt;
font-weight: 400;
margin-top: 0.5em;
}
}
.card-body {
font-size: 10pt;
font-weight: 400;
height: 100%;
width: 100%;
overflow-x: hidden;
overflow-y: auto;
}
.card-body-padding {
padding: 0 16px 16px 16px !important;
}
.card-body-without-top {
margin-top: 0;
padding: 0 16px 16px 16px !important;
}
.card-header-raised {
border-bottom: 3px solid $title-border-color;
@include raised-header;
}
.card-header-flat {
border-bottom: 3px solid $title-border-color;
}
.card-shadow {
border-radius: 2px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
&:hover {
box-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.14), 0 4px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}
}
.card-border {
border: 1px solid $border-color-light;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
&:hover {
border: 1px solid $border-color;
}
}
.card-floating-container {
background-color: $white;
border: 1px solid $border-color-light;
height: calc(100% - 10px) !important;
margin-top: 10px;
.card-floating-primary.card,
.card-floating-primary > .card {
margin: -10px -10px 0 10px;
}
.card-floating-secondary.card,
.card-floating-secondary > .card {
margin: -10px 0 0 -10px;
}
}
.card-floating-container-gt-md {
@include gt-medium() {
background-color: $white;
border: 1px solid $border-color-light;
height: calc(100% - 10px) !important;
margin-top: 10px;
.card-floating-primary-gt-md.card,
.card-floating-primary-gt-md > .card {
margin: -10px -10px 0 10px;
}
.card-floating-secondary-gt-md.card,
.card-floating-secondary-gt-md > .card {
margin: -10px 0 0 -10px;
}
}
}
//
// Responsive
//
@include medium() {
.card-header {
min-height: 39px;
padding: 16px 16px 0 16px;
&.card-header-flat {
padding: 16px;
}
}
}