VAADIN.themes.mateu.views.view.scss Maven / Gradle / Ivy
The newest version!
$kpi: #7b7e80;
@mixin view {
.viewcomponent {
padding: 0px;
/*
padding-top: 10px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 10px;
*/
}
.v-slot-contenido {
margin-top: 49px;
margin-bottom: 49px;
min-height: calc(100vh - 260px);
}
.v-slot-contenido .actionsbar {
border-top: unset;
border-bottom: unset;
}
.v-slot-contenido .filterscomponent {
border-top: unset;
border-bottom: unset;
width: 100%;
}
.contenido {
padding: 0px;
.nofieldgroup {
padding-left: 2px;
padding-right: 0px;
min-width: 450px;
}
.fieldgroup {
min-width: 450px;
}
.section {
background-color: white;
color: black;
box-shadow: 0 2px 4px rgba(48,18,84,.04),0 4px 8px rgba(48,18,84,.04),0 4px 12px rgba(48,18,84,.02);;
margin-bottom: 80px;
border-radius: 8px;
padding-bottom: 20px;
.fieldgroup {
padding-bottom: 30px;
}
.fieldgroup.nofieldgroupheader {
padding-top: 20px;
}
.fieldgroup > * {
padding-left: 20px;
padding-right: 20px;
}
.fieldgroup > .v-spacing {
height: 20px;
}
.fieldgroup .v-caption-on-top .v-caption-caption-on-left {
display: inline-block;
}
.fieldgroup .v-caption-on-top .caption-on-left {
width: unset;
position: absolute;
right: 0;
}
.fieldgroup .v-slot-caption-on-left {
border-bottom: 1px solid whitesmoke;
}
.v-slot-fieldgroupheader {
border-bottom: 1px solid lightgray;
padding: 24px;
color: rgb(48,18,84);
.v-label-h4 {
font-size: 22px;
font-weight: 600;
text-transform: inherit;
}
.v-label-h4.countlabel {
font-size: 16px;
font-weight: 200;
}
}
.fieldgroupheader, .countlabel {
/*
font-size: 16px;
font-weight: 900;
*/
}
.v-grid-cell .v-nativebutton {
border: none;
background-color: transparent;
cursor: pointer;
}
.v-grid-cell .v-nativebutton:hover {
color: whitesmoke;
}
}
.section.result-page .checkmark .v-icon {
font-size: 80px;
}
}
.contenido.fullwidth {
padding: 10px;
}
.contenido.container {
max-width: 1184px;
display: block;
margin: 0 auto;
}
.resultscomponent {
padding: 0px;
}
.viewHeader {
padding: 0px;
.viewTitle {
--font-size: 2rem;
--line-height: 1.25;
color: rgba(0,0,0,.85);
font-weight: 700;
font-size: var(--font-size);
line-height: var(--line-height);
}
.v-slot-viewSubtitle {
font-size: 1.25rem;
color: rgba(0,0,0,.85);
}
.viewSubtitle {
height: 80px;
}
.viewIcon {
font-size: 1.5em;
padding-top: 7px;
color: black;
}
}
.filterscomponent {
border-top: 1px dashed lightgrey;
border-bottom: 1px dashed lightgrey;
width: 100%;
> div > * {
margin-right: 20px;
}
.v-caption {
margin-right: 10px;
}
.v-button {
margin-right: 5px;
}
.boton {
font-size: 1.3em;
height: inherit;
}
.botonsearch {
font-size: 2.7em;
height: inherit;
}
.botonerafiltros {
> div {
margin-right: 0px;
vertical-align: middle;
}
}
}
.listsummaryline {
margin-top: 20px;
font-style: italic;
}
.panelContenidoConKpi {
min-width: 460px;
}
.kpisContainer {
margin-left: 30px;
.v-spacing {
height: 4px;
}
}
.kpi {
padding: 2px 9px;
background-color: #e0e4e8;
color: inherit;
//background-color: $kpi;
border-radius: 2px;
margin-right: 10px;
margin-bottom: -2px;
//min-height: 62px;
//width: 100%;
height: 50px;
//color: whitesmoke;
.valor {
white-space: normal;
font-size: 1.2em;
font-weight: bold;
width: 100%;
text-align: right;
background-color: inherit !important;
}
.v-label-centered {
text-align: center;
}
.v-spacing {
display: none;
}
}
.kpi.sectionkpi {
width: inherit;
background-color: #e0e4e8;
color: inherit;
min-height: 62px;
}
.superkpi {
padding: 20px;
background-color: $kpi;
border-radius: 2px;
margin-right: 10px;
margin-bottom: 7px;
height: 160px;
width: 100%;
text-align: center;
.valor {
font-size: 2.5em;
font-weight: bold;
width: 100%;
text-align: center;
background-color: inherit !important;
}
.v-label-centered {
text-align: center;
}
}
}