@esfaenza/core 15.2.0

package/theme/styles/_font.scss

@@ -0,0 +1,86 @@
+/***************************/
+/*         Roboto          */
+/***************************/
+@font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 100;
+    src: local('Roboto Thin'), local('Roboto-Thin'), url(#{$fonts-root}google/Roboto/Roboto-Thin.ttf) format('truetype');
+}
+
+@font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 100;
+    src: local('Roboto Thin Italic'), local('Roboto-ThinItalic'), url(#{$fonts-root}google/Roboto/Roboto-ThinItalic.ttf) format('truetype');
+}
+
+@font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 300;
+    src: local('Roboto Light'), local('Roboto-Light'), url(#{$fonts-root}google/Roboto/Roboto-Light.ttf) format('truetype');
+}
+
+@font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 300;
+    src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url(#{$fonts-root}google/Roboto/Roboto-LightItalic.ttf) format('truetype');
+}
+
+@font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Roboto Regular'), local('Roboto-Regular'), url(#{$fonts-root}google/Roboto/Roboto-Regular.ttf) format('truetype');
+}
+
+@font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 400;
+    src: local('Roboto Italic'), local('Roboto-Italic'), url(#{$fonts-root}google/Roboto/Roboto-Italic.ttf) format('truetype');
+}
+
+@font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 500;
+    src: local('Roboto Medium'), local('Roboto-Medium'), url(#{$fonts-root}google/Roboto/Roboto-Medium.ttf) format('truetype');
+}
+
+@font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 500;
+    src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'), url(#{$fonts-root}google/Roboto/Roboto-MediumItalic.ttf) format('truetype');
+}
+
+@font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 700;
+    src: local('Roboto Bold'), local('Roboto-Bold'), url(#{$fonts-root}google/Roboto/Roboto-Bold.ttf) format('truetype');
+}
+
+@font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 700;
+    src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(#{$fonts-root}google/Roboto/Roboto-BoldItalic.ttf) format('truetype');
+}
+
+@font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 900;
+    src: local('Roboto Black'), local('Roboto-Black'), url(#{$fonts-root}google/Roboto/Roboto-Black.ttf) format('truetype');
+}
+
+@font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 900;
+    src: local('Roboto Black Italic'), local('Roboto-BlackItalic'), url(#{$fonts-root}google/Roboto/Roboto-BlackItalic.ttf) format('truetype');
+}

package/theme/styles/_fullcalendar-override.scss

@@ -0,0 +1,86 @@
+.fc-daygrid-day-number,
+.fc-col-header-cell-cushion {
+    color: black;
+
+    &:hover {
+        color: black;
+    }
+}
+
+.fc-col-header-cell-cushion {
+    text-transform: uppercase;
+}
+
+.fc-toolbar-title {
+    text-transform: capitalize;
+    padding-left: 9px;
+}
+
+//-----------------------
+
+/*Questo insieme ai 2 CSS qui sotto permette di nascondere il bordo senza ucciderlo, dato che ucciderlo sembra fuckuppare tutta la grafica su chrome*/
+.fc-scroller fc-scroller-liquid-absolute {
+    overflow: hidden !important;
+}
+/*Rimuove il bordo a destra del calendario nell'header*/
+.fc-scrollgrid-section.fc-scrollgrid-section-header > td {
+    border: 1px solid white;
+}
+/*Riumuove il bordo a destra e in basso dell'header*/
+.fc-scrollgrid-section.fc-scrollgrid-section-body.fc-scrollgrid-section-liquid > td {
+    border: 1px solid white;
+}
+
+
+/*Restyling pulsanti*/
+.fc-button {
+    border-width: 1px;
+    background-color: transparent;
+}
+
+.fc-day-today .fc-daygrid-day-number {
+    font-weight: bold;
+}
+
+/*Rimuove filter bordo sopra e a sinistra del calendario*/
+.fc-theme-standard .fc-scrollgrid {
+    border: none !important;
+}
+
+.fc .fc-button-primary:focus {
+    box-shadow: none !important;
+}
+
+.fc-button-primary {
+    background-color: white !important;
+    color: #2c3e50 !important;
+
+    &:hover {
+        background-color: #2c3e50 !important;
+        color: white !important;
+    }
+}
+
+.fc-button-primary[disabled]:hover {
+    background-color: white !important;
+    color: #2c3e50 !important;
+}
+
+.fc-button .fc-icon {
+    position: relative;
+    top: -.05em;
+    margin: 0 .2em;
+    vertical-align: middle
+}
+
+
+
+.fc-event-title-container {
+    font-size: 13px;
+}
+
+/*Wrappa il titolo in modo da non nascondere pezzi di testo*/
+.fc-event-time, .fc-event-title {
+    padding: 0 1px;
+    white-space: normal;
+}

package/theme/styles/_libs-override.scss

@@ -0,0 +1,97 @@
+.pace {
+    .pace-progress {
+        background: $sidebar-item-active-bg-color;
+        position: absolute;
+        height: 3px;
+        z-index: 0;
+    }
+
+    .pace-progress-inner {
+        display: none;
+    }
+
+    .pace-activity {
+        position: absolute;
+        top: 10px;
+        left: 10px;
+        border-width: 1px;
+        right: auto;
+        width: 18px;
+        height: 18px;
+        border-top-color: $main-color;
+        border-left-color: $main-color;
+    }
+}
+
+/*** Slim-scroll ***/
+.slimScrollBar, .slimScrollRail {
+    border-radius: 0px !important;
+    width: 4px !important;
+}
+
+// Small devices (landscape phones, 544px and up)
+@media (min-width: 544px) and (max-width: 767px) {
+}
+
+// Medium devices (tablets, 768px and up)
+@media (min-width: 768px) and (max-width: 991px) {
+}
+
+// Large devices (desktops, 992px and up)
+@media (min-width: 992px) and (max-width: 1199px) {
+}
+
+// Extra large devices (large desktops, 1200px and up)
+@media (min-width: 1200px) {
+}
+
+//Dragula
+/* in-flight clone */
+.gu-mirror {
+    position: fixed !important;
+    margin: 0 !important;
+    z-index: 9999 !important;
+    opacity: 0.8;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
+    filter: alpha(opacity=80);
+    pointer-events: none;
+}
+/* high-performance display:none; helper */
+.gu-hide {
+    left: -9999px !important;
+}
+/* added to mirrorContainer (default = body) while dragging */
+.gu-unselectable {
+    -webkit-user-select: none !important;
+    -moz-user-select: none !important;
+    -ms-user-select: none !important;
+    user-select: none !important;
+}
+/* added to the source element while its mirror is dragged */
+.gu-transit {
+    opacity: 0.2;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
+    filter: alpha(opacity=20);
+}
+
+//Guppy
+.guppy_help {
+    max-height: 400px;
+    overflow-y: scroll;
+}
+
+//Toastr
+.toast-container {
+    margin-top: 55px;
+}
+
+// Ngx json viewer
+// Via quel background orribile
+.ngx-json-viewer .segment-type-null > .segment-main > .segment-value {
+    background-color: inherit !important;
+}
+
+// SweetAlert2: via il problema che ogni tanto scrolla
+.swal2-html-container {
+    overflow: hidden;
+}

package/theme/styles/_material-override.scss

@@ -0,0 +1,231 @@
+//******************************************* Piccoli aggiustamenti agli stili material per adattarli al mio template*******************************************
+
+//Colore per indicare un field disabilitato
+.mat-form-field-disabled .mat-form-field-wrapper {
+    background-color: #ddd;
+}
+
+//Per rimuovere il bordo della label quando la label non è presente
+.mat-no-border-top .mat-form-field-infix {
+    border-top: none !important;
+}
+
+//Stile da usare negli ibridi material-input vecchi
+.mat-dflt-margin {
+    margin-top: .125em !important;
+    margin-bottom: .125em !important;
+}
+
+.mat-form-field-appearance-outline .mat-form-field-wrapper {
+    margin-top: .125em !important;
+    margin-bottom: .125em !important;
+}
+
+//I padding sono già gestiti dal mio form control quindi ignoro quelli di Material
+.mat-form-field-wrapper {
+    padding-bottom: 0;
+    //Questi due stili però mi servono per fare gli stiling corretti quando gli input son disabilitati e non DOVREBBERO rompere le palle ai form control
+    height: 35px;
+    min-height: 35px !important;
+    margin-bottom: -7px !important;
+}
+//Stile di default per permettergli di vivere bene dentro i col-md
+.mat-full-width {
+    width: 100%;
+}
+
+//Stile per permettere di avere il field wrapper che ricopra per bene l'input
+.mat-full-height .mat-form-field-wrapper {
+    height: 100% !important;
+}
+
+//I padding di default sono troppo grandi ed espressi con em, cosa che il mio template supporta per modo di dire (Perché la gente non usa i pixel?!)
+.mat-form-field-appearance-outline .mat-form-field-infix {
+    padding-top: 5px;
+    padding-bottom: 0;
+    height: 36px;
+}
+
+//Aggiustamenti di size vari per la select
+.mat-form-field-appearance-outline .mat-form-field-infix select.mat-input-element {
+    background-color: transparent;
+    margin-bottom: -11px !important;
+    margin-top: -2px !important;
+    padding-top: 0 !important;
+    top: 0 !important;
+}
+
+//Aggiustamenti di size vari per gli input
+.mat-form-field-appearance-outline .mat-form-field-infix input {
+    display: inline-flex;
+    margin-top: -8px;
+    margin-bottom: -5px;
+    padding-top: 8px;
+}
+
+//Sistemo sti cosi pixel perfect dato che con gli em e whatever su firefox fa banane mentre su chrome si vede da Dio... io fucking Boh
+.mat-form-field-appearance-outline .mat-form-field-suffix {
+    height: 25px !important;
+    top: -2px !important;
+}
+
+//Qualche sistemazione per i suffix aggiunti a mano
+.mat-form-field-appearance-outline .mat-form-field-suffix .form-input-suffix {
+    margin-right: 5px !important;
+    position: absolute !important;
+    top: 7px !important;
+    right: 4px !important;
+}
+
+//Qualche sistemazione per i suffix aggiunti a mano
+.mat-form-field-appearance-outline .mat-form-field-infix .form-input-suffix {
+    position: relative !important;
+    //Non modificare!! In dev sembra che le posizioni siano sfanculate leggermente ma in realtà in AOT tutto è perfetto
+    top: -4px !important;
+}
+
+//Aggiusto la grandezza delle icone tipo il calendarietto per la data. In realtà questo stile è un default di bootstrap ma viene overridato da uno stile successivo, non meglio sepcificato
+.mat-form-field-prefix .mat-icon-button, .mat-form-field-suffix .mat-icon-button {
+    height: 32px !important;
+    //Non modificare!! In dev sembra che le posizioni siano sfanculate leggermente ma in realtà in AOT tutto è perfetto
+    //top: -4px !important;
+}
+
+//Per far apparire la label/placeholder un po' meglio
+.mat-form-field-label-wrapper {
+    top: -8px;
+}
+
+//Per spostare la freccettina in giù che fa molto select... peccato sia troppo in alto somehow
+.mat-form-field-type-mat-native-select .mat-form-field-infix::after {
+    top: 60% !important;
+}
+
+//Sposto il suffix a destra di 10 pixel... i miei input sono più stretti dei material standard
+.mat-form-field-suffix {
+    margin-right: -10px !important;
+}
+
+//Ho disfato un po' gli z-index in questo progetto... material non se l'aspetta ed è impossibile creare un popup per le date nella dialog. TEHE
+.cdk-overlay-container {
+    z-index: 99999999 !important;
+}
+
+//Mi assicuro che tutti gli import abbiano la stessa identica altezza
+.mat-height-fixed .mat-form-field-flex {
+    height: 38px !important
+}
+
+//Tranne la textarea che si deve adattare alla dimensione dell'input interno (per le rows)
+.mat-height-auto .mat-form-field-flex {
+    height: auto !important;
+    padding-bottom: 5px !important;
+    padding-top: 5px !important;
+    padding-right: 2px !important;
+}
+
+.mat-height-auto .mat-form-field-infix {
+    height: auto !important;
+}
+
+//Aggiustamenti per supportare gli infix/suffix un po' meglio
+.mat-icon-button-override {
+    width: 25px !important;
+    top: 0px !important;
+    color: rgba(0, 0, 0, 0.64) !important;
+    position: absolute !important;
+}
+
+.mat-icon-button-override-suffix {
+    right: -5px !important;
+}
+
+.mat-icon-button-override-prefix {
+    left: -5px !important;
+}
+
+//Le option di default sono completamente non in linea con il template a dimensione, risistemo
+.mat-option {
+    height: 25px !important;
+    font-size: 14px !important;
+}
+
+//per @esfaenza/forms-and-validations, controller datetimepicker, negli slider della parte "time" tenere questo border rompe il layout
+.ngx-mat-timepicker .mat-form-field-infix {
+    border-top: none !important;
+}
+
+//*******************************************Fix per permettere al form-control di coesistere con material, all'interno dei tag material*******************************************
+
+//Le impostazioni sulle dimenisoni sono gestite dal mat-field-wrapper, quelle del form control non devono disturbare
+.mat-form-field-wrapper .form-control {
+    width: 100%;
+    border: none;
+    padding: 0;
+    line-height: 1;
+    padding-top: 0;
+}
+
+//Bootstrap 4 fix (in B4A non è manco supportato xD). Evito di tirare fuori sto box shadow che mi romperebbe il layout di tutte le pagine
+.mat-form-field-wrapper .form-control:focus {
+    box-shadow: none !important;
+}
+
+//Sposto un po' in Giù il simbolino rosso/verde di validaizone e sistemo il padding dove fare apparire il checkino
+.mat-form-field-wrapper .form-control.checking-field.ng-touched {
+    padding-right: 0px;
+    background-position-y: 14px !important;
+    background-position-x: right;
+    padding-top: 8px;
+    padding-bottom: 0px;
+}
+
+//Sposto un po' in Giù il simbolino rosso/verde di validaizone e sistemo il padding dove fare apparire il checkino
+.mat-height-auto .form-control.checking-field.ng-touched {
+    padding-right: 25px;
+    background-position: center right 0.625rem !important;
+}
+
+//aggiusto il simbolino rosso/verde di validaizone per input piccoli
+.mat-form-field-wrapper .form-control.input-small.checking-field.ng-touched {
+    background-position-y: 9px !important;
+    padding-right: 25px;
+}
+//Il colore di sfondo mi serve transparent perché:
+//1) in modalità disabled è già definito nella classe ".mat-form-field-disabled .mat-form-field-wrapper"
+//2) in modalità non transparent ho un paio di pixel che vanno sopra al border e me lo mangiano. Mettendo transparent si vede il border correttamente
+.mat-form-field-wrapper .form-control {
+    background-color: transparent !important;
+}
+
+//Sistemo i padding per le select checking
+.mat-form-field-wrapper .form-control.checking-combo.ng-touched {
+    padding-right: 45px;
+    background-position-y: 8px !important;
+    padding-top: 4px !important;
+}
+
+.mat-form-field-wrapper .form-control.checking-combo.ng-untouched {
+    padding-right: 20px;
+    background-position-y: 8px !important;
+    padding-top: 4px !important;
+}
+
+//Se l'input ha un suffix ho bisogno di impostargli questo stile in modo da avere un po' di spazio dove fare apparire l'infix
+.mat-input-with-suffix {
+    width: calc(100% - 35px) !important;
+    display: inline-block !important;
+    margin-right: 10px !important;
+}
+
+//Per gestire i form group addon
+.mat-input-group-addon .mat-form-field-appearance-outline .mat-form-field-wrapper {
+    background-color: #eceeef;
+    border: 1px solid rgba(0,0,0,0.15);
+    border-radius: .25rem;
+}
+
+//Leggero padding top per text area su material
+.mat-form-field-appearance-outline textarea {
+    padding: 5px 0 !important;
+}

package/theme/styles/_mixins.scss

@@ -0,0 +1,50 @@
+@import "variables";
+
+@mixin theme-bg($bg-gradient-color-1, $bg-gradient-color-2) {
+    /* Old browsers */
+    background: $bg-gradient-color-2;
+    /* FF3.6-15 */
+    background: url(data:image/png;base64,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), -moz-linear-gradient(left, $bg-gradient-color-1 0%, $bg-gradient-color-2 100%);
+    /* Chrome10-25,Safari5.1-6 */
+    background: url(data:image/png;base64,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), -webkit-linear-gradient(left, $bg-gradient-color-1 0%, $bg-gradient-color-2 100%);
+    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+    background: url(data:image/png;base64,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), linear-gradient(to right, $bg-gradient-color-1 0%, $bg-gradient-color-2 100%);
+    /* IE6-9 */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#1e5799',GradientType=0 );
+}
+
+@mixin progress-variant($color) {
+    &[value]::-webkit-progress-value {
+        background-color: $color;
+    }
+
+    &[value]::-moz-progress-bar {
+        background-color: $color;
+    }
+    // IE10+, Microsoft Edge
+    &[value]::-ms-fill {
+        background-color: $color;
+    }
+    // IE9
+    @media screen and (min-width:0\0) {
+        .progress-bar {
+            background-color: $color;
+        }
+    }
+}
+
+@mixin tab-focus() {
+    // WebKit-specific. Other browsers will keep their default outline style.
+    // (Initially tried to also force default via `outline: initial`,
+    // but that seems to erroneously remove the outline in Firefox altogether.)
+    outline: 5px auto -webkit-focus-ring-color;
+    outline-offset: -2px;
+}
+
+@mixin progress-height($height) {
+    height: $height;
+}
+
+@mixin bg-image($relativeUrl) {
+    background-image: url($images-root + $relativeUrl);
+}

package/theme/styles/_preloader.scss

@@ -0,0 +1,119 @@
+@-webkit-keyframes spin-cubeGridScaleDelay {
+    0%, 70%, 100% {
+        -webkit-transform: scale3D(1, 1, 1);
+    }
+
+    35% {
+        -webkit-transform: scale3D(0, 0, 1);
+    }
+}
+
+@-moz-keyframes spin-cubeGridScaleDelay {
+    0%, 70%, 100% {
+        -moz-transform: scale3D(1, 1, 1);
+    }
+
+    35% {
+        -moz-transform: scale3D(0, 0, 1);
+    }
+}
+
+@keyframes spin-cubeGridScaleDelay {
+    0%, 70%, 100% {
+        transform: scale3D(1, 1, 1);
+    }
+
+    35% {
+        transform: scale3D(0, 0, 1);
+    }
+}
+
+.spin-outher {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.spin-container {
+    height: 100%;
+    width: 100%;
+    display: table;
+}
+
+.spin-inner {
+    vertical-align: middle;
+    height: 100%;
+    display: table-cell;
+}
+
+.spin-cube-grid {
+    width: 100px;
+    height: 100px;
+    margin: 0 auto;
+
+    .spin-cube {
+        width: 33%;
+        height: 33%;
+        background-color: #fff;
+        float: left;
+        -webkit-animation: spin-cubeGridScaleDelay 1.3s infinite ease-in-out;
+        -moz-animation: spin-cubeGridScaleDelay 1.3s infinite ease-in-out;
+        animation: spin-cubeGridScaleDelay 1.3s infinite ease-in-out;
+    }
+
+    .spin-cube1 {
+        -webkit-animation-delay: 0.2s;
+        -moz-animation-delay: 0.2s;
+        animation-delay: 0.2s;
+    }
+
+    .spin-cube2 {
+        -webkit-animation-delay: 0.3s;
+        -moz-animation-delay: 0.3s;
+        animation-delay: 0.3s;
+    }
+
+    .spin-cube3 {
+        -webkit-animation-delay: 0.4s;
+        -moz-animation-delay: 0.4s;
+        animation-delay: 0.4s;
+    }
+
+    .spin-cube4 {
+        -webkit-animation-delay: 0.1s;
+        -moz-animation-delay: 0.1s;
+        animation-delay: 0.1s;
+    }
+
+    .spin-cube5 {
+        -webkit-animation-delay: 0.2s;
+        -moz-animation-delay: 0.2s;
+        animation-delay: 0.2s;
+    }
+
+    .spin-cube6 {
+        -webkit-animation-delay: 0.3s;
+        -moz-animation-delay: 0.3s;
+        animation-delay: 0.3s;
+    }
+
+    .spin-cube7 {
+        -webkit-animation-delay: 0s;
+        -moz-animation-delay: 0s;
+        animation-delay: 0s;
+    }
+
+    .spin-cube8 {
+        -webkit-animation-delay: 0.1s;
+        -moz-animation-delay: 0.1s;
+        animation-delay: 0.1s;
+    }
+
+    .spin-cube9 {
+        -webkit-animation-delay: 0.2s;
+        -moz-animation-delay: 0.2s;
+        animation-delay: 0.2s;
+    }
+}