ui
This commit is contained in:
Gaurav Kumar
285
frontend/angular-clarity-master/src/styles.scss
Normal file
285
frontend/angular-clarity-master/src/styles.scss
Normal file
@@ -0,0 +1,285 @@
|
||||
@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
|
||||
@import '~@clr/icons/clr-icons.min.css';
|
||||
|
||||
// Modern Design System Imports
|
||||
@import './styles/design-tokens';
|
||||
@import './styles/theme-variables';
|
||||
@import './styles/base';
|
||||
@import './styles/components';
|
||||
@import './styles/animations';
|
||||
|
||||
// Google Fonts - Modern Typography
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;200;300;400;500;600;700;800&display=swap');
|
||||
|
||||
/* Legacy font set ==================== */
|
||||
@import url(https://fonts.googleapis.com/css?family=Athiti|Bai+Jamjuree|Chakra+Petch|Charmonman|Chonburi|Fahkwang|Itim|K2D|Kanit|KoHo|Kodchasan|Krub|Maitree|Mali|Mitr|Niramit|Pattaya|Pridi|Prompt|Sriracha|Srisakdi|Taviraj|Trirong);
|
||||
|
||||
.font-athiti { font-family: 'Athiti', sans-serif; }
|
||||
.font-bai-jamjuree { font-family: 'Bai Jamjuree', sans-serif; }
|
||||
.font-chakra-petch { font-family: 'Chakra Petch', sans-serif; }
|
||||
.font-charmonman { font-family: 'Charmonman', cursive; }
|
||||
.font-chonburi { font-family: 'Chonburi', cursive; }
|
||||
.font-fahkwang { font-family: 'Fahkwang', sans-serif; }
|
||||
.font-itim { font-family: 'Itim', cursive; }
|
||||
.font-k2d { font-family: 'K2D', sans-serif; }
|
||||
.font-kodchasan { font-family: 'Kodchasan', sans-serif; }
|
||||
.font-kanit { font-family: 'Kanit', sans-serif; }
|
||||
.font-koHo { font-family: 'KoHo', sans-serif; }
|
||||
.font-krub { font-family: 'Krub', sans-serif; }
|
||||
.font-mali { font-family: 'Mali', cursive; }
|
||||
.font-mitr { font-family: 'Mitr', sans-serif; }
|
||||
.font-maitree { font-family: 'Maitree', serif; }
|
||||
.font-niramit { font-family: 'Niramit', sans-serif; }
|
||||
.font-pattaya { font-family: 'Pattaya', sans-serif; }
|
||||
.font-pridi { font-family: 'Pridi', serif; }
|
||||
.font-prompt { font-family: 'Prompt', sans-serif; }
|
||||
.font-srisakdi { font-family: 'Srisakdi', cursive; }
|
||||
.font-taviraj { font-family: 'Taviraj', serif; }
|
||||
.font-sriracha { font-family: 'Sriracha', cursive; }
|
||||
.font-trirong { font-family: 'Trirong', serif; }
|
||||
|
||||
@font-face {
|
||||
font-family: 'th-sarabun';
|
||||
src: url('./assets/fonts/THSarabun.ttf') format('truetype'),
|
||||
url('/assets/fonts/THSarabun Bold.ttf') format('truetype'),
|
||||
url('/assets/fonts/THSarabun Italic.ttf') format('truetype'),
|
||||
url('/assets/fonts/THSarabun Bold Italic.ttf') format('truetype');
|
||||
}
|
||||
.font-thsarabun { font-family: 'th-sarabun', cursive; font-size : 16pt; }
|
||||
|
||||
.font-bold { font-weight: bold; }
|
||||
.font-italic { font-style: italic; }
|
||||
/* end font set ==================== */
|
||||
|
||||
.breadcrumb {
|
||||
font-family: 'Trirong', serif;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.breadcrumb-arrow {
|
||||
height: 36px;
|
||||
padding: 0;
|
||||
line-height: 36px;
|
||||
list-style: none;
|
||||
background-color: #ebeceb
|
||||
}
|
||||
.breadcrumb-arrow li:first-child a {
|
||||
border-radius: 4px 0 0 4px;
|
||||
-webkit-border-radius: 4px 0 0 4px;
|
||||
-moz-border-radius: 4px 0 0 4px
|
||||
}
|
||||
.breadcrumb-arrow li, .breadcrumb-arrow li a, .breadcrumb-arrow li span {
|
||||
display: inline-block;
|
||||
vertical-align: top
|
||||
}
|
||||
.breadcrumb-arrow li:not(:first-child) {
|
||||
margin-left: -5px
|
||||
}
|
||||
.breadcrumb-arrow li+li:before {
|
||||
padding: 0;
|
||||
content: ""
|
||||
}
|
||||
.breadcrumb-arrow li span {
|
||||
padding: 0 10px
|
||||
}
|
||||
.breadcrumb-arrow li a, .breadcrumb-arrow li:not(:first-child) span {
|
||||
height: 36px;
|
||||
padding: 0 10px 0 25px;
|
||||
line-height: 36px
|
||||
}
|
||||
.breadcrumb-arrow li:first-child a {
|
||||
padding: 0 10px
|
||||
}
|
||||
.breadcrumb-arrow li a {
|
||||
position: relative;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
background-color: rgb(128, 130, 131);
|
||||
border: 1px solid rgb(128, 130, 131);
|
||||
}
|
||||
.breadcrumb-arrow li:first-child a {
|
||||
padding-left: 10px
|
||||
}
|
||||
.breadcrumb-arrow li a:after, .breadcrumb-arrow li a:before {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
content: '';
|
||||
border-top: 18px solid transparent;
|
||||
border-bottom: 18px solid transparent
|
||||
}
|
||||
.breadcrumb-arrow li a:before {
|
||||
right: -10px;
|
||||
z-index: 3;
|
||||
border-left-color: rgb(128, 130, 131);
|
||||
border-left-style: solid;
|
||||
border-left-width: 11px
|
||||
}
|
||||
.breadcrumb-arrow li a:after {
|
||||
right: -11px;
|
||||
z-index: 2;
|
||||
border-left: 11px solid #38393a
|
||||
}
|
||||
.breadcrumb-arrow li a:focus, .breadcrumb-arrow li a:hover {
|
||||
background-color: #b7bbb7;
|
||||
border: 1px solid #b7bbb7;
|
||||
text-shadow: 1px 1px 1px rgb(20, 20, 20);
|
||||
}
|
||||
.breadcrumb-arrow li a:focus:before, .breadcrumb-arrow li a:hover:before {
|
||||
border-left-color: #b7bbb7
|
||||
}
|
||||
.breadcrumb-arrow li a:active {
|
||||
background-color: #c5ccc5;
|
||||
border: 1px solid #c5ccc5;
|
||||
}
|
||||
.breadcrumb-arrow li a:active:after, .breadcrumb-arrow li a:active:before {
|
||||
border-left-color: #adb6ad;
|
||||
}
|
||||
.breadcrumb-arrow li span {
|
||||
color: #7e8a83;
|
||||
}
|
||||
|
||||
.full-div {
|
||||
padding: 0px 0px 0px 0px;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.dg-wrapper {
|
||||
margin-top: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.dg-wrapper-300 {
|
||||
margin-top: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.dg-wrapper-400 {
|
||||
margin-top: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.dg-wrapper-450 {
|
||||
margin-top: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 450px;
|
||||
}
|
||||
|
||||
.dg-wrapper-500 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.dg-wrapper-600 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
.dg-wrapper-700 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 700px;
|
||||
}
|
||||
|
||||
.dg-wrapper-800 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 800px;
|
||||
}
|
||||
|
||||
.float-left {
|
||||
float: left !important;
|
||||
}
|
||||
|
||||
.float-right {
|
||||
float: right !important;
|
||||
}
|
||||
|
||||
// Global styles for enhanced components
|
||||
.btn {
|
||||
@extend .modern-btn;
|
||||
}
|
||||
|
||||
.modal-dialog {
|
||||
@extend .modern-modal;
|
||||
|
||||
.modal-header {
|
||||
background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
|
||||
color: $white;
|
||||
border-radius: $radius-2xl $radius-2xl 0 0;
|
||||
|
||||
.modal-title {
|
||||
color: $white;
|
||||
font-weight: $font-bold;
|
||||
}
|
||||
|
||||
.close {
|
||||
color: $white;
|
||||
opacity: 0.8;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: $space-6;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: $space-5 $space-6;
|
||||
background: $gray-50;
|
||||
border-radius: 0 0 $radius-2xl $radius-2xl;
|
||||
}
|
||||
}
|
||||
|
||||
.datagrid {
|
||||
@extend .modern-table;
|
||||
}
|
||||
|
||||
.badge {
|
||||
@extend .modern-badge;
|
||||
}
|
||||
|
||||
.alert {
|
||||
@extend .modern-alert;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
@extend .modern-spinner;
|
||||
}
|
||||
|
||||
.skeleton {
|
||||
@extend .modern-skeleton;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
@extend .modern-form-group;
|
||||
|
||||
.form-label {
|
||||
@extend .form-label;
|
||||
}
|
||||
|
||||
.form-input, .form-select {
|
||||
@extend .form-input;
|
||||
}
|
||||
|
||||
.form-error {
|
||||
@extend .form-error;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user