@enki-tek/fms-web-components 0.0.1 → 0.0.3

package/components/Button/Button.scss

@@ -0,0 +1,706 @@
+@import './../variable.scss';
+
+.ebtn {
+  // Default styles for button
+  background-color: $white;
+  color: black;
+  border: none;
+  cursor: pointer;
+  border-radius: 6px;
+  padding: 0px 24px;
+  height: $medium-height;
+  box-shadow: $lowShadow;
+  border: none;
+  outline: 1px solid $white;
+  font-family: Roboto;
+}
+
+//small button
+.ebtn-small {
+  height: $small-height;
+  font-size: 12px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-family: Roboto;
+
+  i {
+    font-size: 12px;
+  }
+}
+
+//medium button
+.ebtn-medium {
+  padding: 0px 24px;
+  height: $medium-height;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 16px;
+  font-family: Roboto;
+
+  i {
+    font-size: 16px;
+  }
+}
+
+//large button
+.ebtn-large {
+  height: $large-height;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 16px;
+  font-family: Roboto;
+
+  i {
+    font-size: 16px;
+  }
+}
+
+// icon button
+.eicon-btn {
+  width: 52px;
+  height: 52px;
+  border-radius: 50%;
+  font-family: Roboto;
+}
+
+.eicon-left {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: row-reverse;
+  gap: 7px;
+  size: 2px;
+  font-family: Roboto;
+}
+
+.eicon-right {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 7px
+}
+
+
+// additional css for BUtton
+
+
+
+.ebg-none {
+  background-color: $white !important;
+}
+
+.ebg-white {
+  background-color: $white;
+}
+
+.ebg-secondary,
+.eactive-secondary:active,
+.ehover-secondary:hover {
+  background-color: $secondary !important;
+}
+
+.ebg-secondaryDark,
+.eactive-secondaryDark:active,
+.ehover-secondaryDark:hover {
+  background-color: $secondary-dark;
+}
+
+.ebg-secondaryLight,
+.eactive-secondaryLight:active,
+.ehover-secondaryLight:hover {
+  background-color: $secondary-light;
+}
+
+.ebg-primary {
+  background-color: $primary;
+}
+
+.ebg-primaryDark {
+  background-color: $primary-dark;
+}
+
+.ebg-primaryLight {
+  background-color: $primary-light;
+}
+
+.ebg-danger {
+  background-color: $danger ;
+}
+
+.ebg-dangerDark {
+  background-color: $danger-dark;
+}
+
+.ebg-dangerLight {
+  background-color: $danger-light;
+}
+
+.ebg-warning {
+  background-color: $warning;
+}
+
+.ebg-warningDark {
+  background-color: $warning-dark;
+  color: $white !important;
+}
+
+.ebg-warningLight {
+  background-color: $warning-light;
+}
+
+
+.ebg-info {
+  background-color: $info;
+}
+
+.ebg-infoDark {
+  background-color: $info-dark;
+}
+
+.ebg-infoLight {
+  background-color: $info-light;
+}
+
+
+.ebg-success {
+  background-color: $success;
+}
+
+.ebg-successDark {
+  background-color: $success-dark;
+}
+
+.ebg-successLight {
+  background-color: $success-light;
+}
+
+.ebg-gray100 {
+  background-color: $gray-100;
+}
+
+.ebg-gray200 {
+  background-color: $gray-200;
+}
+
+.ebg-gray300 {
+  background-color: $gray-300;
+}
+
+.ebg-gray400 {
+  background-color: $gray-400;
+}
+
+.ebg-gray500 {
+  background-color: $gray-500;
+}
+
+.ebg-gray600 {
+  background-color: $gray-600;
+}
+
+.ebg-gray700 {
+  background-color: $gray-700;
+}
+
+.ebg-gray800 {
+  background-color: $gray-800;
+}
+
+.ebg-gray900 {
+  background-color: $gray-900;
+}
+
+// green background
+.ebg-green100 {
+  background-color: $green-100;
+}
+
+.ebg-green200 {
+  background-color: $green-200;
+}
+
+.ebg-green300 {
+  background-color: $green-300;
+}
+
+.ebg-green400 {
+  background-color: $green-400;
+}
+
+.ebg-green500 {
+  background-color: $green-500;
+}
+
+.ebg-green600 {
+  background-color: $green-600;
+}
+
+.ebg-green700 {
+  background-color: $green-700;
+}
+
+.ebg-green800 {
+  background-color: $green-800;
+}
+
+.ebg-green900 {
+  background-color: $green-900;
+}
+
+// red background
+.ebg-red100 {
+  background-color: $red-100;
+}
+
+.ebg-red200 {
+  background-color: $red-200;
+}
+
+.ebg-red300 {
+  background-color: $red-300;
+}
+
+.ebg-red400 {
+  background-color: $red-400;
+}
+
+.ebg-red500 {
+  background-color: $red-500;
+}
+
+.ebg-red600 {
+  background-color: $red-600;
+}
+
+.ebg-red700 {
+  background-color: $red-700;
+}
+
+.ebg-red800 {
+  background-color: $red-800;
+}
+
+.ebg-red900 {
+  background-color: $red-900;
+}
+
+
+// yellow background
+.ebg-yellow100 {
+  background-color: $yellow-100;
+}
+
+.ebg-yellow200 {
+  background-color: $yellow-200;
+}
+
+.ebg-yellow300 {
+  background-color: $yellow-300;
+}
+
+.ebg-yellow400 {
+  background-color: $yellow-400;
+}
+
+.ebg-yellow500 {
+  background-color: $yellow-500;
+}
+
+.ebg-yellow600 {
+  background-color: $yellow-600;
+}
+
+.ebg-yellow700 {
+  background-color: $yellow-700;
+}
+
+.ebg-yellow800 {
+  background-color: $yellow-800;
+}
+
+.ebg-yellow900 {
+  background-color: $yellow-900;
+}
+
+
+// cyan background
+.ebg-cyan100 {
+  background-color: $cyan-100;
+}
+
+.ebg-cyan200 {
+  background-color: $cyan-200;
+}
+
+.ebg-cyan300 {
+  background-color: $cyan-300;
+}
+
+.ebg-cyan400 {
+  background-color: $cyan-400;
+}
+
+.ebg-cyan500 {
+  background-color: $cyan-500;
+}
+
+.ebg-cyan600 {
+  background-color: $cyan-600;
+}
+
+.ebg-cyan700 {
+  background-color: $cyan-700;
+}
+
+.ebg-cyan800 {
+  background-color: $cyan-800;
+}
+
+.ebg-cyan900 {
+  background-color: $cyan-900;
+}
+
+// Text color classess
+
+.etext-white {
+  color: $white;
+}
+
+.etext-dark {
+  color: $black;
+}
+
+.etext-secondary {
+  color: $secondary;
+}
+
+.etext-secondaryDark {
+  color: $secondary-dark;
+}
+
+.etext-secondaryLight {
+  color: $secondary-light;
+}
+
+.etext-primary {
+  color: $primary;
+}
+
+.etext-primaryDark {
+  color: $primary-dark;
+}
+
+.etext-primaryLight {
+  color: $primary-light;
+}
+
+.etext-danger {
+  color: $danger;
+}
+
+.etext-dangerDark {
+  color: $danger-dark;
+}
+
+.etext-dangerLight {
+  color: $danger-light;
+}
+
+.etext-info {
+  color: $info;
+}
+
+.etext-infoDark {
+  color: $info-dark;
+}
+
+.etext-infoLight {
+  color: $info-light;
+}
+
+.etext-success {
+  color: $success;
+}
+
+.etext-successDark {
+  color: $success-dark;
+}
+
+.etext-successLight {
+  color: $success-light;
+}
+
+.etext-warning {
+  color: $warning;
+}
+
+.etext-warningDark {
+  color: $warning-dark;
+}
+
+.etext-warningLight {
+  color: $warning-light;
+}
+
+
+.etext-gray100 {
+  color: $gray-100;
+}
+
+.etext-gray200 {
+  color: $gray-200;
+}
+
+.etext-gray300 {
+  color: $gray-300;
+}
+
+.etext-gray400 {
+  color: $gray-400;
+}
+
+.etext-gray500 {
+  color: $gray-500;
+}
+
+.etext-gray600 {
+  color: $gray-600;
+}
+
+.etext-gray700 {
+  color: $gray-700;
+}
+
+.etext-gray800 {
+  color: $gray-800;
+}
+
+.etext-gray900 {
+  color: $gray-900;
+}
+
+// green text
+.etext-green100 {
+  color: $green-100;
+}
+
+.etext-green200 {
+  color: $green-200;
+}
+
+.etext-green300 {
+  color: $green-300;
+}
+
+.etext-green400 {
+  color: $green-400;
+}
+
+.etext-green500 {
+  color: $green-500;
+}
+
+.etext-green600 {
+  color: $green-600;
+}
+
+.etext-green700 {
+  color: $green-700;
+}
+
+.etext-green800 {
+  color: $green-800;
+}
+
+.etext-green900 {
+  color: $green-900;
+}
+
+// red text
+.etext-red100 {
+  color: $red-100;
+}
+
+.etext-red200 {
+  color: $red-200;
+}
+
+.etext-red300 {
+  color: $red-300;
+}
+
+.etext-red400 {
+  color: $red-400;
+}
+
+.etext-red500 {
+  color: $red-500;
+}
+
+.etext-red600 {
+  color: $red-600;
+}
+
+.etext-red700 {
+  color: $red-700;
+}
+
+.etext-red800 {
+  color: $red-800;
+}
+
+.etext-red900 {
+  color: $red-900;
+}
+
+// yellow text
+.etext-yellow100 {
+  color: $yellow-100;
+}
+
+.etext-yellow200 {
+  color: $yellow-200;
+}
+
+.etext-yellow300 {
+  color: $yellow-300;
+}
+
+.etext-yellow400 {
+  color: $yellow-400;
+}
+
+.etext-yellow500 {
+  color: $yellow-500;
+}
+
+.etext-yellow600 {
+  color: $yellow-600;
+}
+
+.etext-yellow700 {
+  color: $yellow-700;
+}
+
+.etext-yellow800 {
+  color: $yellow-800;
+}
+
+.etext-yellow900 {
+  color: $yellow-900;
+}
+
+// cyan text
+.etext-cyan100 {
+  color: $cyan-100;
+}
+
+.etext-cyan200 {
+  color: $cyan-200;
+}
+
+.etext-cyan300 {
+  color: $cyan-300;
+}
+
+.etext-cyan400 {
+  color: $cyan-400;
+}
+
+.etext-cyan500 {
+  color: $cyan-500;
+}
+
+.etext-cyan600 {
+  color: $cyan-600;
+}
+
+.etext-cyan700 {
+  color: $cyan-700;
+}
+
+.etext-cyan800 {
+  color: $cyan-800;
+}
+
+.etext-cyan900 {
+  color: $cyan-900;
+}
+
+
+//outline classess
+
+.eoutline-secondary {
+  outline: 1px solid $secondary;
+}
+
+.eoutline-secondaryDark {
+  outline: 1px solid $secondary-dark;
+}
+
+.eoutline-secondaryLight {
+  outline: 1px solid $secondary-light;
+}
+
+.eoutline-primary {
+  outline: 1px solid $primary;
+}
+
+.eoutline-primaryDark {
+  outline: 1px solid $primary-dark;
+}
+
+.eoutline-primaryLight {
+  outline: 1px solid $primary-light;
+}
+
+.eoutline-danger {
+  outline: 1px solid $danger;
+}
+
+.eoutline-dangerDark {
+  outline: 1px solid $danger-dark;
+}
+
+.eoutline-dangerLight {
+  outline: 1px solid $danger-light;
+}
+
+.eoutline-success {
+  outline: 1px solid $success;
+}
+
+.eoutline-successDark {
+  outline: 1px solid $success-dark;
+}
+
+.eoutline-successLight {
+  outline: 1px solid $success-light;
+}
+
+.eoutline-info {
+  outline: 1px solid $info;
+}
+
+.eoutline-infoDark {
+  outline: 1px solid $info-dark;
+}
+
+.eoutline-infoLight {
+  outline: 1px solid $info-light;
+}
+
+.eoutline-warning {
+  outline: 1px solid $warning;
+}
+
+.eoutline-warningDark {
+  outline: 1px solid $warning-dark;
+}
+
+.eoutline-warningLight {
+  outline: 1px solid $warning-light;
+}