new-front-common-library 18.2.0 → 18.2.2

package/assets/css/material/_mdc.scss

@@ -1,408 +1,408 @@
-// MAT MENU
-.mat-mdc-menu-panel .mat-mdc-menu-item {
-  min-height: unset;
-}
-
-.mat-mdc-menu-panel .mat-mdc-menu-item .mat-mdc-menu-item-text {
-  font-size: 14px;
-}
-
-.action-menu.mat-mdc-menu-panel {
-  max-width: 100%;
-}
-
-
-.action-menu.mat-mdc-menu-panel .mat-mdc-menu-item .mat-icon {
-  font-size: 14px;
-  height: 14px;
-  width: 14px;
-}
-
-.btn-table-action .mat-icon {
-  color: $blue-primary;
-}
-
-// END MAT MENU
-
-// PAGINATOR
-.mat-mdc-paginator-container .mat-mdc-form-field-infix {
-  padding: 0 !important;
-  min-height: unset !important;
-}
-
-.mat-mdc-paginator-page-size-select {
-  width: 60px;
-
-  .mat-mdc-text-field-wrapper {
-    padding: 0 9px 0 9px;
-  }
-}
-
-.mat-mdc-paginator-container {
-  align-items: baseline;
-}
-
-.mat-mdc-paginator-page-size-select>*>*>.mdc-notched-outline>* {
-  border: none !important;
-}
-
-// END PAGINATOR
-
-// BUTTON
-.mat-mdc-icon-button {
-  .mat-mdc-button-persistent-ripple {
-    visibility: hidden;
-  }
-}
-
-// END BUTTON
-
-// CHIP
-.mat-mdc-chip.mat-mdc-standard-chip {
-  background: $black-bluish;
-  color: white;
-  border-radius: 5px;
-}
-
-.mat-mdc-chip.mat-mdc-standard-chip.secondary {
-  background: $gray-blue-primary;
-}
-
-.mat-mdc-chip {
-  height: 22px;
-  box-shadow: 0 1px 2px rgba(68, 93, 123, 0.16), inset 0 2px 4px rgba(255, 255, 255, 0.08), inset 0px -2px 4px rgba(68, 93, 123, 0.08);
-  letter-spacing: 0.25px;
-}
-
-.mat-mdc-standard-chip {
-  --mdc-chip-label-text-color: white !important;
-  --mdc-chip-with-trailing-icon-trailing-icon-color: white !important;
-}
-
-// END CHIP
-
-// FORM FIELD
-.mat-mdc-form-field {
-  font-size: 12px;
-  letter-spacing: 0.25px;
-}
-
-.mat-form-field-appearance-outline .mat-mdc-form-field-infix {
-  padding: 0 !important;
-  min-height: 26px;
-}
-
-.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading,
-.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch,
-.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing {
-  border-width: 2px;
-  border-color: $blue-primary !important;
-}
-
-.mdc-text-field--invalid .mdc-notched-outline > * {
-  border-color: red !important;
-}
-
-.mat-mdc-form-field .mat-icon {
-  color: $blue-primary;
-}
-
-.mdc-text-field--outlined {
-  padding-left: 9px;
-  padding-right: 9px;
-}
-
-// END FORM FIELD
-
-//ICON in form-field
-
-.mat-mdc-form-field-has-icon-suffix {
-  .mat-mdc-form-field-icon-suffix {
-    height: 26px;
-    display: inline-flex;
-
-    .mat-mdc-icon-button {
-      display: inline-flex;
-      align-items: center;
-      width: 15px;
-      padding: 0;
-      height: 26px;
-    }
-  }
-
-  .mat-icon {
-    height: 15px;
-    width: 15px;
-    font-size: 15px;
-  }
-
-  .mat-mdc-icon-button {
-    .mat-mdc-focus-indicator, .mat-mdc-button-touch-target {
-      height: 15px;
-      width: 15px;
-    }
-  }
-
-  .mat-mdc-text-field-wrapper {
-    padding-right: 10px;
-  }
-}
-
-//END ICON in form-field
-
-// CALENDAR & datepicker
-.mat-datepicker-content .mat-calendar {
-  width: 230px;
-  height: auto;
-}
-
-.mat-calendar-header {
-  padding-top: 0;
-}
-
-.mat-calendar-controls {
-  margin-bottom: 0;
-}
-
-.mat-datepicker-toggle .mat-mdc-icon-button {
-  --mdc-icon-button-icon-size: 15px;
-}
-
-.mat-datepicker-toggle .mat-mdc-icon-button.mat-mdc-button-base {
-  --mdc-icon-button-state-layer-size: 1.5em;
-}
-
-// END CALENDAR
-
-// CHECKBOX
-.mdc-checkbox__background {
-  width: 16px;
-  height: 16px;
-}
-
-.mat-mdc-checkbox .mdc-label{
-  color: $gray-primary;
-}
-// END CHECKBOX
-
-
-// RADIO BUTTON
-.mat-mdc-radio-button .mdc-form-field>label {
-  color: $gray-primary;
-}
-//END RADIO BUTTON
-
-
-
-
-
-// TABLE ROW
-.mat-mdc-table {
-  box-shadow: none !important;
-}
-
-.mat-mdc-row {
-  -webkit-font-smoothing: initial;
-  line-height: normal;
-
-  .mdc-line-ripple, .mat-mdc-form-field-subscript-wrapper {
-    display: none;
-  }
-
-  .mat-mdc-input-element, .mat-mdc-select {
-    padding: 0 4px 0 2px;
-    border-radius: 4px;
-  }
-
-  .mdc-text-field--filled {
-    padding: 0;
-    border-radius: 4px;
-  }
-
-  .mat-mdc-form-field-infix {
-    padding: 0 !important;
-    min-height: 26px;
-  }
-
-  .mat-mdc-text-field-wrapper {
-    height: 26px;
-  }
-}
-
-
-
-
-
-// Cell & Header
-.mat-mdc-header-cell {
- padding-top: 8px;
-}
-.mat-mdc-table .mat-mdc-cell, .mat-mdc-header-cell {
-  font-size: 12px;
-}
-
-.mdc-data-table__cell, .mdc-data-table__header-cell {
-  padding-left: 2px;
-  padding-right: 5px;
-
-  &:first-of-type {
-    padding-left: 5px;
-  }
-}
-
-.mat-mdc-header-row {
-  min-height: 40px;
-  max-height: 40px;
-
-
-  .mat-mdc-form-field.mat-form-field-appearance-fill {
-    .mat-mdc-form-field-infix {
-      min-height: 52px;
-      max-height: 52px;
-      padding-top: 18px;
-      padding-bottom: 8px;
-
-      .mat-mdc-floating-label {
-        font-size: 12px;
-        top: 26px;
-      }
-
-      .mat-mdc-input-element {
-        font-size: 12px
-      }
-    }
-  }
-}
-
-.mat-mdc-form-field.mat-form-field-appearance-fill {
-  .mdc-line-ripple, .mat-mdc-form-field-subscript-wrapper {
-    display: none;
-  }
-
-  .mat-mdc-form-field-focus-overlay {
-    opacity: 0 !important;
-  }
-
-  .mat-mdc-text-field-wrapper {
-    padding: 0;
-  }
-}
-
-// END TABLE
-
-
-
-//LIST
-.mdc-list-item__primary-text {
-  display: inline-block;
-  flex-grow: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-// END LIST
-
-
-// POPUP
-.mat-mdc-dialog-container .btn-primary,
-.mat-mdc-dialog-container .btn-danger,
-.mat-mdc-dialog-container .btn-secondary {
-  height: 24px !important;
-  color: white !important;
-  padding: 0 8px 0 8px;
-  margin-right: 10px;
-}
-
-.mat-mdc-dialog-container .btn-primary {
-  background: $blue-primary !important;
-}
-
-.mat-mdc-dialog-container .btn-danger {
-  background: $red-primary !important;
-}
-
-.mat-mdc-dialog-container .btn-secondary {
-  background: $purple-primary !important;
-}
-
-.mat-mdc-dialog-container {
-  border-radius: 4px;
-}
-
-.mat-mdc-dialog-container .mat-mdc-dialog-surface {
-  padding: 24px;
-}
-
-// END POPUP
-
-// autofill log in local
-input:-webkit-autofill,
-input:-webkit-autofill:hover,
-input:-webkit-autofill:focus,
-input:-webkit-autofill:active{
-  transition: background-color 5000000s ease-in-out 0s !important;
-}
-// END autofill
-
-
-// CHIP
-.mat-mdc-standard-chip .mdc-evolution-chip__action--primary {
-  padding: 2px 4px;
-}
-
-.mat-mdc-standard-chip .mdc-evolution-chip__text-label {
-  font-size: 12px;
-}
-
-// END CHIP
-
-// FORM
-.mat-mdc-form-field-subscript-wrapper {
-  height: 0.9em;
-}
-
-.mat-mdc-cell .mat-form-field-invalid .mat-mdc-input-element, .mat-cell .mat-form-field-invalid .mat-mdc-select {
-  border: 1px solid red;
-}
-
-.mat-mdc-cell .mat-form-field-invalid .mat-mdc-input-element, .mat-cell .mat-form-field-invalid .mat-select {
-  border: 1px solid red;
-}
-
-//END FORM
-
-
-// MAT SELECT
-.mat-mdc-select {
-  font-size: 12px;
-}
-.mat-mdc-select-arrow {
-  color: $blue-primary;
-}
-
-.mat-form-field-disabled .mat-mdc-select-value-text {
-  color: gray;
-}
-
-// END MAT SELECT
-
-// MAT OPTION
-.mat-mdc-option {
-  min-height: unset;
-  font-size: 12px;
-  -webkit-font-smoothing: initial;
-}
-
-.cdk-overlay-pane .mat-mdc-option .mdc-list-item__primary-text {
-  white-space: nowrap;
-}
-
-.multiline-mat-option.mat-mdc-option {
-  white-space: normal;
-  line-height: normal;
-  margin-bottom: 7px;
-}
-// END MAT OPTION
-
-
-@import "mdc-light-theme";
-@import "mdc-dark-theme";
+// MAT MENU
+.mat-mdc-menu-panel .mat-mdc-menu-item {
+  min-height: unset;
+}
+
+.mat-mdc-menu-panel .mat-mdc-menu-item .mat-mdc-menu-item-text {
+  font-size: 14px;
+}
+
+.action-menu.mat-mdc-menu-panel {
+  max-width: 100%;
+}
+
+
+.action-menu.mat-mdc-menu-panel .mat-mdc-menu-item .mat-icon {
+  font-size: 14px;
+  height: 14px;
+  width: 14px;
+}
+
+.btn-table-action .mat-icon {
+  color: $blue-primary;
+}
+
+// END MAT MENU
+
+// PAGINATOR
+.mat-mdc-paginator-container .mat-mdc-form-field-infix {
+  padding: 0 !important;
+  min-height: unset !important;
+}
+
+.mat-mdc-paginator-page-size-select {
+  width: 60px;
+
+  .mat-mdc-text-field-wrapper {
+    padding: 0 9px 0 9px;
+  }
+}
+
+.mat-mdc-paginator-container {
+  align-items: baseline;
+}
+
+.mat-mdc-paginator-page-size-select>*>*>.mdc-notched-outline>* {
+  border: none !important;
+}
+
+// END PAGINATOR
+
+// BUTTON
+.mat-mdc-icon-button {
+  .mat-mdc-button-persistent-ripple {
+    visibility: hidden;
+  }
+}
+
+// END BUTTON
+
+// CHIP
+.mat-mdc-chip.mat-mdc-standard-chip {
+  background: $black-bluish;
+  color: white;
+  border-radius: 5px;
+}
+
+.mat-mdc-chip.mat-mdc-standard-chip.secondary {
+  background: $gray-blue-primary;
+}
+
+.mat-mdc-chip {
+  height: 22px;
+  box-shadow: 0 1px 2px rgba(68, 93, 123, 0.16), inset 0 2px 4px rgba(255, 255, 255, 0.08), inset 0px -2px 4px rgba(68, 93, 123, 0.08);
+  letter-spacing: 0.25px;
+}
+
+.mat-mdc-standard-chip {
+  --mdc-chip-label-text-color: white !important;
+  --mdc-chip-with-trailing-icon-trailing-icon-color: white !important;
+}
+
+// END CHIP
+
+// FORM FIELD
+.mat-mdc-form-field {
+  font-size: 12px;
+  letter-spacing: 0.25px;
+}
+
+.mat-form-field-appearance-outline .mat-mdc-form-field-infix {
+  padding: 0 !important;
+  min-height: 26px;
+}
+
+.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading,
+.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch,
+.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing {
+  border-width: 2px;
+  border-color: $blue-primary !important;
+}
+
+.mdc-text-field--invalid .mdc-notched-outline > * {
+  border-color: red !important;
+}
+
+.mat-mdc-form-field .mat-icon {
+  color: $blue-primary;
+}
+
+.mdc-text-field--outlined {
+  padding-left: 9px;
+  padding-right: 9px;
+}
+
+// END FORM FIELD
+
+//ICON in form-field
+
+.mat-mdc-form-field-has-icon-suffix {
+  .mat-mdc-form-field-icon-suffix {
+    height: 26px;
+    display: inline-flex;
+
+    .mat-mdc-icon-button {
+      display: inline-flex;
+      align-items: center;
+      width: 15px;
+      padding: 0;
+      height: 26px;
+    }
+  }
+
+  .mat-icon {
+    height: 15px;
+    width: 15px;
+    font-size: 15px;
+  }
+
+  .mat-mdc-icon-button {
+    .mat-mdc-focus-indicator, .mat-mdc-button-touch-target {
+      height: 15px;
+      width: 15px;
+    }
+  }
+
+  .mat-mdc-text-field-wrapper {
+    padding-right: 10px;
+  }
+}
+
+//END ICON in form-field
+
+// CALENDAR & datepicker
+.mat-datepicker-content .mat-calendar {
+  width: 230px;
+  height: auto;
+}
+
+.mat-calendar-header {
+  padding-top: 0;
+}
+
+.mat-calendar-controls {
+  margin-bottom: 0;
+}
+
+.mat-datepicker-toggle .mat-mdc-icon-button {
+  --mdc-icon-button-icon-size: 15px;
+}
+
+.mat-datepicker-toggle .mat-mdc-icon-button.mat-mdc-button-base {
+  --mdc-icon-button-state-layer-size: 1.5em;
+}
+
+// END CALENDAR
+
+// CHECKBOX
+.mdc-checkbox__background {
+  width: 16px;
+  height: 16px;
+}
+
+.mat-mdc-checkbox .mdc-label{
+  color: $gray-primary;
+}
+// END CHECKBOX
+
+
+// RADIO BUTTON
+.mat-mdc-radio-button .mdc-form-field>label {
+  color: $gray-primary;
+}
+//END RADIO BUTTON
+
+
+
+
+
+// TABLE ROW
+.mat-mdc-table {
+  box-shadow: none !important;
+}
+
+.mat-mdc-row {
+  -webkit-font-smoothing: initial;
+  line-height: normal;
+
+  .mdc-line-ripple, .mat-mdc-form-field-subscript-wrapper {
+    display: none;
+  }
+
+  .mat-mdc-input-element, .mat-mdc-select {
+    padding: 0 4px 0 2px;
+    border-radius: 4px;
+  }
+
+  .mdc-text-field--filled {
+    padding: 0;
+    border-radius: 4px;
+  }
+
+  .mat-mdc-form-field-infix {
+    padding: 0 !important;
+    min-height: 26px;
+  }
+
+  .mat-mdc-text-field-wrapper {
+    height: 26px;
+  }
+}
+
+
+
+
+
+// Cell & Header
+.mat-mdc-header-cell {
+ padding-top: 8px;
+}
+.mat-mdc-table .mat-mdc-cell, .mat-mdc-header-cell {
+  font-size: 12px;
+}
+
+.mdc-data-table__cell, .mdc-data-table__header-cell {
+  padding-left: 2px;
+  padding-right: 5px;
+
+  &:first-of-type {
+    padding-left: 5px;
+  }
+}
+
+.mat-mdc-header-row {
+  min-height: 40px;
+  max-height: 40px;
+
+
+  .mat-mdc-form-field.mat-form-field-appearance-fill {
+    .mat-mdc-form-field-infix {
+      min-height: 52px;
+      max-height: 52px;
+      padding-top: 18px;
+      padding-bottom: 8px;
+
+      .mat-mdc-floating-label {
+        font-size: 12px;
+        top: 26px;
+      }
+
+      .mat-mdc-input-element {
+        font-size: 12px
+      }
+    }
+  }
+}
+
+.mat-mdc-form-field.mat-form-field-appearance-fill {
+  .mdc-line-ripple, .mat-mdc-form-field-subscript-wrapper {
+    display: none;
+  }
+
+  .mat-mdc-form-field-focus-overlay {
+    opacity: 0 !important;
+  }
+
+  .mat-mdc-text-field-wrapper {
+    padding: 0;
+  }
+}
+
+// END TABLE
+
+
+
+//LIST
+.mdc-list-item__primary-text {
+  display: inline-block;
+  flex-grow: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+// END LIST
+
+
+// POPUP
+.mat-mdc-dialog-container .btn-primary,
+.mat-mdc-dialog-container .btn-danger,
+.mat-mdc-dialog-container .btn-secondary {
+  height: 24px !important;
+  color: white !important;
+  padding: 0 8px 0 8px;
+  margin-right: 10px;
+}
+
+.mat-mdc-dialog-container .btn-primary {
+  background: $blue-primary !important;
+}
+
+.mat-mdc-dialog-container .btn-danger {
+  background: $red-primary !important;
+}
+
+.mat-mdc-dialog-container .btn-secondary {
+  background: $purple-primary !important;
+}
+
+.mat-mdc-dialog-container {
+  border-radius: 4px;
+}
+
+.mat-mdc-dialog-container .mat-mdc-dialog-surface {
+  padding: 24px;
+}
+
+// END POPUP
+
+// autofill log in local
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active{
+  transition: background-color 5000000s ease-in-out 0s !important;
+}
+// END autofill
+
+
+// CHIP
+.mat-mdc-standard-chip .mdc-evolution-chip__action--primary {
+  padding: 2px 4px;
+}
+
+.mat-mdc-standard-chip .mdc-evolution-chip__text-label {
+  font-size: 12px;
+}
+
+// END CHIP
+
+// FORM
+.mat-mdc-form-field-subscript-wrapper {
+  height: 0.9em;
+}
+
+.mat-mdc-cell .mat-form-field-invalid .mat-mdc-input-element, .mat-cell .mat-form-field-invalid .mat-mdc-select {
+  border: 1px solid red;
+}
+
+.mat-mdc-cell .mat-form-field-invalid .mat-mdc-input-element, .mat-cell .mat-form-field-invalid .mat-select {
+  border: 1px solid red;
+}
+
+//END FORM
+
+
+// MAT SELECT
+.mat-mdc-select {
+  font-size: 12px;
+}
+.mat-mdc-select-arrow {
+  color: $blue-primary;
+}
+
+.mat-form-field-disabled .mat-mdc-select-value-text {
+  color: gray;
+}
+
+// END MAT SELECT
+
+// MAT OPTION
+.mat-mdc-option {
+  min-height: unset;
+  font-size: 12px;
+  -webkit-font-smoothing: initial;
+}
+
+.cdk-overlay-pane .mat-mdc-option .mdc-list-item__primary-text {
+  white-space: nowrap;
+}
+
+.multiline-mat-option.mat-mdc-option {
+  white-space: normal;
+  line-height: normal;
+  margin-bottom: 7px;
+}
+// END MAT OPTION
+
+
+@import "mdc-light-theme";
+@import "mdc-dark-theme";