@dflat-core/web 1.0.0-beta

package/assets/shared.scss

@@ -0,0 +1,157 @@
+/* Global variables */
+@import "variables.scss";
+
+:root {
+    --dflat-blue-1: #00C6F7;
+    --dflat-blue-2: #00AEdb;
+    --main-bg-color: #3C5DC4;
+    --main-bg-color-alpha: rgb(79, 102, 174, 0);
+    --input-border-color: #cbc8d0;
+    --orange-algorima: #f59d0f;
+    --red-error: #d03436;
+    --yellow: #ffdc79;
+    --excel-green: #107c41;
+    --word-blue: #185abd;
+
+    
+}
+
+
+
+// https://codepen.io/sosuke/pen/   Pjoqqp
+$blue1-filter: invert(61%) sepia(40%) saturate(3796%) hue-rotate(152deg) brightness(102%) contrast(101%);
+$blue2-filter: invert(52%) sepia(89%) saturate(3799%) hue-rotate(162deg) brightness(102%) contrast(107%);
+$main-svg-filter: invert(24%) sepia(83%) saturate(1788%) hue-rotate(212deg) brightness(96%) contrast(90%);
+$input-border-filter : invert(86%) sepia(12%) saturate(105%) hue-rotate(221deg) brightness(96%) contrast(84%);
+$orange-filter: invert(72%) sepia(29%) saturate(5369%) hue-rotate(357deg) brightness(102%) contrast(92%);
+$red-filter: invert(23%) sepia(96%) saturate(5276%) hue-rotate(354deg) brightness(104%) contrast(127%);
+$yellow-filter: invert(100%) sepia(35%) saturate(4237%) hue-rotate(311deg) brightness(107%) contrast(101%);
+$black-filter: invert(23%) sepia(95%) saturate(4%) hue-rotate(4deg) brightness(88%) contrast(91%);
+
+$darkgrey-filter:invert(70%) sepia(0%) saturate(3789%) hue-rotate(32deg) brightness(91%) contrast(108%);
+$excel-green-filter: invert(26%) sepia(81%) saturate(1121%) hue-rotate(116deg) brightness(105%) contrast(87%);
+$word-blue-filter: invert(27%) sepia(17%) saturate(7494%) hue-rotate(203deg) brightness(97%) contrast(94%);
+
+.input-alert {
+    color: var(--red-error);
+    font-size: small;
+}
+
+.input-alert>div::before {
+    position: relative;
+    display: block;
+    float: left;
+    width: 16px;
+    height: 16px;
+    content: " ";
+    background-size: 16px 16px;
+    -webkit-background-size: 16px 16px;
+    background-image: url('./images/error.png');
+    background-repeat: no-repeat;
+    margin: 1px 3px 0px 3px;
+}
+
+.input-alert>div {
+    padding-top: 3px;
+}
+
+ngx-dropzone-label
+{
+    word-wrap: break-word;
+    max-width: 140px;
+}
+
+
+.results-panel {
+    display: flex;
+    flex-direction: column;
+    background: $white;
+
+    padding: 0px 15px;
+    
+}
+
+
+.result-grid {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-items: flex-start;
+    padding: 0px;
+    margin: 0;
+}
+
+.result-card {
+    width: 25%;
+    padding: 0 0px;
+    
+}
+
+@media(max-width: $wide-screen) {
+    .result-card {
+        width: 33%;
+        padding: 0 0px;
+    }
+    
+}
+@media(max-width: $large-screen) {
+    .result-card {
+        width: 50%;
+        padding: 0 0px;
+    }    
+}
+
+@media(max-width: $small-screen) {
+    .result-card {
+        width: 100%;
+        padding: 0 0px;
+    }    
+}
+
+@media(max-width: $mobile-screen) {
+   
+
+    .result-grid {
+        justify-items: stretch;
+        padding-left: 5px;
+        padding-right: 5px;
+        width: calc(100% - 10px);
+    }
+    .result-card {
+
+        width: 100%;
+        //width: calc(100% - 40px);
+        // margin-left: 5px;
+        // margin-right: 5px;
+    }
+       
+    .results-panel {
+        display: flex;
+        flex-direction: column;
+        background: $white;
+
+        padding-right: 0px;
+       
+    }
+
+}
+
+.result-card-container {
+    width: 100%;
+    
+}
+
+.result-card-inner {
+    padding: 0px;
+    height: 100%;
+    background: $white;
+    margin: 7px;
+    border: 1px solid $background-grey;
+    border-radius: 8px;
+    -webkit-box-shadow: 5px 5px 5px -5px rgba(0,0,0,0.64); 
+    box-shadow: 5px 5px 5px -5px rgba(0,0,0,0.64);
+    min-height: 150px;
+    cursor: pointer;
+}

package/assets/site.scss

@@ -0,0 +1,374 @@
+@import "shared.scss";
+@import "text.scss";
+@import "components/modals.scss";
+@import "components/menu.scss";
+@import "components/fonts.scss";
+@import "components/login.scss";
+@import "components/select.scss";
+@import "modals.scss";
+
+
+body {
+    font-family: 'Open Sans', 'sans serif';
+    font-size: 10pt;
+    background: $white;
+    color: $dark-grey;
+}
+
+*:focus {
+    outline: none;
+}
+
+.btn {
+    font-size: 10pt;
+}
+
+.row {
+    margin: 0px;
+}
+
+
+
+
+.info
+{
+    color: #032a06 !important;
+    background-color: #def2e2 !important;
+    padding: 15px;
+    margin-bottom: 20px;
+    border: 1px solid transparent;
+    border-radius: 4px;
+}
+
+
+
+
+
+.panel-left .row {
+    margin-left: 0px;
+    margin-right: 0px;
+}
+
+.loading {
+    opacity: 0;
+    transition: opacity .8s ease-in-out;
+    position: fixed;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    background: white;
+    z-index: -1;
+}
+
+.colored {
+    background: gray;
+}
+
+app-root:empty+.loading {
+    opacity: 1;
+    z-index: 100;
+}
+
+app-root:empty+.loading h1 {
+    color: black;
+    position: absolute;
+    top: 50%;
+    width: 100%;
+    text-align: center;
+    transform: translate(0, -50%);
+}
+
+#Loader-Block {
+    position: absolute;
+    width: 270px;
+    margin-left: -135px;
+    top: 30%;
+    left: 50%;
+    background: #444;
+    color: white;
+    padding: 20px;
+    border-radius: 4px;
+    text-align: center;
+    z-index: 1000;
+    box-shadow: 4px 4px 6px #535353;
+}
+
+#Loader {
+    width: 270px;
+    top: 50%;
+    left: 50%;
+    color: #444;
+    padding: 20px;
+    border-radius: 4px;
+    text-align: center;
+    z-index: 1000;
+}
+
+
+.LoadingText {
+    clear: both;
+    font-size: 1.5em;
+    margin-top: 20px;
+}
+
+
+h1, .content-header h1 {
+    // font-family: 'SegoeUI';
+    font-size: 14pt;
+}
+
+h4 {
+    font-size: 12pt;
+}
+
+h1, h2, h3, h4 {
+    // font-family: 'SegoeUI';
+}
+
+h1 small {
+    // font-family: 'SegoeUI', 'Open Sans', 'sans serif';
+    font-size: 8px;
+}
+
+
+
+
+.btn-marged {
+    margin: 3px;
+    border-radius: 0px;
+}
+
+
+
+
+.widget-user .sign-image {
+    background: white;
+    border-radius: 50%;
+    padding: 20px;
+    top: 55px;
+}
+
+.store-header {
+    padding: 0px;
+}
+
+@media (min-width: 768px) {
+    .sidebar-mini.sidebar-collapse .sidebar-menu>li:hover>.treeview-menu {
+        top: unset !important;
+    }
+}
+
+
+
+
+.btn-flat {
+    margin-right: 5px;
+    min-width: 140px;
+}
+.bg-white {
+    background: white;
+}
+
+.search-config {
+    min-width: 300px;
+    margin-top: 10px;
+}
+
+.margin-bottom-5 {
+    margin-bottom: 5px;
+}
+
+
+/*  Override style for ngx-treeview :
+    this is not the best way to acheive it, because because we just try to override
+    boostrap 4 style, so in the future we have to rewrite the components of ngx-treeview
+*/
+
+
+.col-12 {
+    flex: 0 0 100%;
+    max-width: 100%;
+}
+
+.col,
+.col-1,
+.col-10,
+.col-11,
+.col-12,
+.col-2,
+.col-3,
+.col-4,
+.col-5,
+.col-6,
+.col-7,
+.col-8,
+.col-9,
+.col-auto {
+    position: relative;
+    width: 100%;
+    min-height: 1px;
+    padding-right: 15px;
+    padding-left: 15px;
+}
+
+.dropdown-divider {
+    height: 0;
+    margin: .5rem 0;
+    overflow: hidden;
+    border-top: 1px solid #666768;
+}
+
+.form-inline {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: center;
+}
+.form-group {
+    margin-bottom: 0;
+}
+label {
+    display: inline-block;
+    margin-bottom: -0.2rem;
+}
+.alertify,
+.alertify-log,
+.alertify-dialog {
+    font-family: 'SegoeUI', 'Open Sans', 'sans serif';
+    font-size: 10pt;
+}
+
+ul.dropdown-menu {
+    margin: 0;
+    min-width: 100px;
+    /* width: 200px */
+}
+
+a.disabled {
+    color: gray;
+    cursor: not-allowed;
+    text-decoration: underline;
+}
+
+
+
+.form-control-40 {
+    height: 40px;
+}
+
+.has-feedback .form-control {
+    padding-right: 6px;
+}
+
+.form-control:focus {
+    border-color: var(--main-bg-color);
+    box-shadow: none;
+}
+
+.panel-middle-header {
+    padding-top: 36px;
+}
+
+.panel-middle-content.with-filters {
+    height: 100%;
+    // padding-bottom: 32px;
+}
+
+.panel-middle-content {
+    height: 100%;
+    /* overflow: auto; */
+}
+.middle-panel-footer
+{
+    display:flex;
+    flex-direction: column-reverse;
+}
+
+
+.panel-middle-content>div.row {
+    padding: 0px 15px 0px 15px;
+}
+
+.padding-top-36 {
+    padding-top: 36px;
+}
+
+/*
+.panel-left,
+.panel-right {
+    border-bottom: 1px solid var(--main-bg-color);
+}
+*/
+
+.main-footer {
+    border-top: 1px solid var(--main-bg-color);
+}
+.panel-left-content,
+.panel-right-content {
+    padding-top: 36px;
+    height: 100%;
+    overflow: hidden;
+}
+
+.panel-action-content {
+    position: absolute;
+    width: 100%;
+    background: white;
+    z-index: 500;
+}
+
+.badge {
+    display: inline-block;
+    margin-top: -2px;
+}
+
+.btn-32 {
+    height: 32px;
+}
+
+.nav-tabs-custom>.tab-content {
+    padding: 0px;
+}
+.logs-pane {
+    height: 690px;
+}
+
+.top-div {
+    width: 100%;
+    height: 45%;
+    display: flex;
+    flex-direction: column;
+    border-bottom: 1px solid var(--main-bg-color);
+}
+
+.h20
+{
+    height: 40%;
+}
+.h80
+{
+    height: 60%;
+}
+.h100
+{
+    height: 100%;
+    overflow: auto;
+}
+
+
+.bottom-div {
+    width: 100%;
+    height: 55%;
+    display: flex;
+    flex-direction: column;
+
+}
+.bottom-div.h80 {
+    height: 70%;
+}
+.breadcrumb>li+li:before {
+    padding: 0 1px 0 4px;
+    color: #ccc;
+    content: " ";
+}
+

package/assets/text.scss

@@ -0,0 +1,162 @@
+
+$white: #ffffff;
+$filter-white: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(258deg) brightness(108%) contrast(101%);
+
+$blue-0: #f7faff;
+$blue-1:#ebf0ff;
+$blue-2:#DBE4FF;
+$blue-3:#C1D0FD;
+
+$primary-hover: #8EA7F8;
+
+$blue-4:#8EA7F8;
+$filter-blue-4: invert(60%) sepia(57%) saturate(394%) hue-rotate(191deg) brightness(99%) contrast(96%);
+
+$blue-5:#6684E0;
+$filter-blue-5: brightness(0) saturate(100%) invert(56%) sepia(79%) saturate(2301%) hue-rotate(202deg) brightness(92%) contrast(91%);
+
+$blue-6:#5272D3;
+$filter-blue-6: brightness(0) saturate(100%) invert(33%) sepia(94%) saturate(663%) hue-rotate(197deg) brightness(102%) contrast(85%);
+
+$blue-7:#4465C9;
+$filter-blue-7: brightness(0) saturate(100%) invert(36%) sepia(91%) saturate(628%) hue-rotate(191deg) brightness(89%) contrast(85%);
+
+$blue-8:#3C5DC4;
+$filter-blue-8: invert(31%) sepia(51%) saturate(1323%) hue-rotate(199deg) brightness(99%) contrast(94%);
+
+$blue-border : #C4D0F9;
+
+$dark-grey: #4D5A81;
+$filter-dark-grey:  invert(31%) sepia(8%) saturate(2329%) hue-rotate(188deg) brightness(103%) contrast(85%);
+
+$filter-icons: $filter-dark-grey;
+
+$light-grey: #9FA9C7;
+$grey-0: #f7f7f7;
+
+$blue-pastel: #00cbff;
+$yellow: #FFE780;
+
+$red: #F78383;
+$filter-red: brightness(0) saturate(100%) invert(70%) sepia(93%) saturate(1540%) hue-rotate(309deg) brightness(105%) contrast(94%);
+
+$green: #84F0A6;
+
+.home-page {
+    font-family: 'Open sans', sans-serif;
+    // font-size: 16px;
+    // font-weight: 400;
+    background: $white;
+    -webkit-font-smoothing: antialiased;
+    height: 100%;
+    width: 100%;
+    padding: 16px;
+}
+
+.main-container {
+    margin: 0px 50px;
+}
+.main-container-modal {
+    width: calc(100% - 50px);
+    margin: 10px 25px 0px 25px;
+}
+
+.moyen-titre {
+    font-weight: bold;
+    font-size: 24px;
+    color: $dark-grey;
+    margin: 8px 0px 8px 0px;
+    border-bottom: solid 1px $blue-2;
+}
+
+.grand-titre {
+    font-weight: bold;
+    font-size: 28px;
+    color: $dark-grey;
+    margin: 0px 0px 8px 0px;
+}
+
+.petit-titre {
+    font-weight: bold;
+    font-size: 16px;
+    color: $dark-grey;
+    margin: 0px 0px 8px 0px;
+    
+}
+.petit-titre.underlined {
+    border-bottom: solid 1px $dark-grey;
+}
+
+.paragraph {
+    padding: 0px 15px;
+}
+
+.paragraph-highlight
+{
+    padding: 5px 15px 0px 12px;
+    border-left :5px solid $blue-4;
+    border-bottom: 1px solid $blue-2;
+    border-top: 1px solid $blue-2;
+    border-right: 1px solid $blue-2;
+    background-color: $blue-0;
+}
+
+.highlight {
+    background-color: $blue-0;
+    border: 1px solid $blue-2;
+    border-radius: 5px;
+    padding: 15px;
+    color: $blue-8;
+    margin: 0px 0px 16px 0px;
+
+    p {
+        margin-bottom: 0px;
+    }
+}
+
+
+.highlight::before {
+    position: relative;
+    display: block;
+    float: left;
+    width: 24px;
+    height: 24px;
+    content: ' ';
+    background-size: 24px 24px;
+    -webkit-background-size: 24px 24px;
+    background-image: url('./images/allergen.svg');
+    background-repeat: no-repeat;
+    margin: 0px 8px 24px 0px;
+    filter: $filter-blue-8;
+}
+
+.notification {
+    background-color: $blue-2;
+    border: 1px solid $blue-border;
+    border-radius: 5px;
+    padding: 15px;
+    color: $dark-grey;
+    margin: 16px;
+    padding: 5px 15px 5px 15px;
+    text-align: justify;
+}
+
+.notification::before {
+        position: relative;
+        display: block;
+        float: left;
+        width: 24px;
+        height: 24px;
+        content: ' ';
+        background-size: 24px 24px;
+        -webkit-background-size: 24px 24px;
+        background-image: url('./images/info-circle.svg');
+        background-repeat: no-repeat;
+        margin: 0px 8px 0px 0px;
+        filter: $filter-dark-grey;
+}
+
+.notification-text {
+    padding: 0px 15px 0px 30px;
+    font-size: 16px;
+}