test-bentoweb-ui 1.0.23 → 1.0.25

package/src/assets/styles/_variables.scss

@@ -0,0 +1,176 @@
+@import '_mixins.scss';
+
+/*===================
+    1. Font 
+    IBM Plex Sans Thai 
+=====================*/
+@at-root {
+    @font-face {
+        font-family: 'IBM_Plex_Sans_Thai';
+        src: url('../fonts/IBMPlexSansThai-Regular.woff2') format('woff2'),
+            url('../fonts/IBMPlexSansThai-Regular.woff') format('woff');
+        font-weight: normal;
+        font-style: normal;
+    }
+}
+@at-root {
+    @font-face {
+        font-family: 'IBM_Plex_Sans_Thai';
+        src: url('../fonts/IBMPlexSansThai-Bold.woff2') format('woff2'),
+            url('../fonts/IBMPlexSansThai-Bold.woff') format('woff');
+        font-weight: 600;
+        font-style: normal;
+    }
+}
+@at-root {
+    @font-face {
+        font-family: 'IBM_Plex_Sans_Thai';
+        src: url('../fonts/IBMPlexSansThai-SemiBold.woff2') format('woff2'),
+            url('../fonts/IBMPlexSansThai-SemiBold.woff') format('woff');
+        font-weight: 700;
+        font-style: normal;
+    }
+}
+
+
+/*==================
+    Variable
+====================*/
+/*=== Fonts ===*/
+$font-primary: 'IBM_Plex_Sans_Thai',"tahoma","Helvetica Neue",Helvetica,Arial,sans-serif;
+$font-tahoma:"Tahoma","Helvetica Neue",Helvetica,Arial,sans-serif;
+
+/*=== Colors ===*/
+$text-dark:#1E1E1E;
+$text-primary:#F00051;
+$text-secondary:#F5F5F6;
+$text-muted:#636363;
+$text-danger:#FF2A00;
+$text-light: #F7F7F8;
+$text-disable:#CCCCCC;
+$text-link:#0077FF;
+$text-success:#09C405;
+$text-warning:#FF9409;
+
+$blue-100:#0077FF;
+
+$gray-200:#939393;
+$gray-300:#BFBFBF;
+
+$bg-100:#EEEEEE;
+
+$border-color:#EEEEEE;
+$line-gray-200:#DBDBDB;
+
+
+$bg-dim-primary:#FFECF2;
+$bg-dim-success:#EAFBEA;
+$bg-dim-danger:#FFEEEB;
+$bg-disable:#E3E3E3;
+$bg-warning-subtle:#FFF2E1;
+
+/*btw style*/
+$body-bg:#EEE;
+$body-font:$font-primary;
+$body-color:$text-dark;
+
+/*Modaal*/
+$modal-lg:                          1140px !default;
+$modal-md:                          660px !default;
+$modal-sm:                          300px !default;
+
+/*Tabs*/
+$nav-pills-border-color:$line-gray-200;
+$nav-pills-color: $text-dark;
+
+$nav-tabs-link-active-color:$text-primary;
+$nav-tabs-link-active-bg:$bg-dim-primary;
+$nav-tabs-link-active-border-color:$text-primary;
+
+/*breadcrumb*/
+$breadcrumb-color:$gray-200;
+$breadcrumb-bg: white;
+$breadcrumb-active-color: $text-dark;
+
+/*pagination*/
+$pagination-bg: $text-light;
+$pagination-color: $text-dark;
+
+$pagination-active-bg:$text-primary;
+$pagination-active-color:white;
+
+$pagination-disabled-bg: $text-light;
+$pagination-disabled-color: $text-disable;
+
+/*sidebar*/
+$sidebar-heading-color:$gray-300;
+$sidebar-color:$text-dark;
+
+$sidebar-active-bg:$bg-dim-primary;
+$sidebar-active-color:$text-primary;
+
+/*table*/
+$table-border-color:$border-color!important;
+$table-th-color:$gray-200;
+
+/*toggle switch*/
+$toggle-bg-color:$text-light;
+$toggle-label-text: $text-dark;
+$toggle-active-bg:$bg-dim-primary;
+$toggle-active-text:$text-primary;
+$toggle-active-border:$text-primary;
+
+/*Form*/
+$form-text-font-weight:600;
+$input-placeholder-color: $gray-200;
+$input-border-color:$border-color;
+
+/*Checkbox*/
+$form-check-input-checked-bg-color:$text-primary;
+$form-check-input-checked-border-color:$text-primary;
+$form-check-input-checked-color: $text-primary;
+
+$form-check-input-radio-bg-color:$text-dark;
+$form-check-input-radio-border-color:$text-dark;
+$form-check-input-radio-color:$text-dark;
+
+/*vue3datepicke : Light mode configuration**/
+$input-group-bg-color:$border-color!important;
+$input-group-icon-color:$gray-200;
+
+/*text*/
+.text-primary{color: $text-primary!important;}
+.text-danger{color: $text-danger!important;}
+.text-muted{color: $gray-200!important;}
+.text-gray-300{color: $gray-300;}
+
+.size14{font-size: rem(14)!important;}
+.size16{font-size: rem(16)!important;}
+.size18{font-size: rem(18)!important;}
+.size20{font-size: rem(20)!important;}
+.size24{font-size: rem(24);}
+.size25{font-size: rem(25);}
+.size30{font-size: rem(30)!important;}
+.size35{font-size: rem(35);}
+.size40{font-size: rem(40);}
+.size50{font-size: rem(50);}
+
+.fw-bold{font-weight: 600!important;}
+.fw-bolder{font-weight: 700!important;}
+
+/*Padding*/
+.py-10{padding-top: rem(10)!important; padding-bottom: rem(10)!important;}
+
+.bg-primary{background-color: $bg-disable!important;}
+.bg-warning-subtle{background-color: $bg-warning-subtle;}
+.bg-100{background-color: $bg-100;}
+
+.border-top{border-color: $border-color!important;}
+.border-light{border-color: $border-color!important;}
+
+.border-warning{border-color:$text-warning;}
+
+.topic-normal{font-size: rem(25); font-weight: 700; margin-bottom: 0;}
+
+/**/
+.rounded-10{border-radius: rem(10);}

package/src/assets/styles/index.scss

@@ -0,0 +1,3 @@
+@forward '_variables';
+@forward 'main';
+

package/src/assets/styles/main.scss

@@ -0,0 +1,13 @@
+@import '_bentowebicon.css';
+@import '_variables';
+@import '_buttons';
+@import '_tabs';
+@import '_card';
+@import '_sidebar';
+@import '_pagination';
+@import '_toggleswitch';
+@import '_breadcrumb';
+@import '_modal';
+@import '_tables';
+@import '_forms';
+@import '_btwstyles';