}
.dropdown-menu {
+ z-index: z(dropdown) + 1 !important;
+
border-radius: 3px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
font-size: 15px;
padding: 3px 15px;
&.active {
- color: var(--mainBackgroundColor) !important;
- background-color: var(--mainHoverColor);
+ color: pvar(--mainBackgroundColor) !important;
+ background-color: pvar(--mainHoverColor);
opacity: .9;
}
text-align: center;
.modal-content {
- background-color: var(--mainBackgroundColor);
+ background-color: pvar(--mainBackgroundColor);
}
.modal-header {
}
}
+
+// On desktop browsers, make the content and header horizontally sticked to right not move when modal open and close
+.modal-open {
+ overflow-y: scroll !important; // Make sure vertical scroll bar is always visible on desktop browsers to get disabled scrollbar effect
+ position: fixed; // Fix the body position to disable any scroll content
+ width: 100vw; // Make sure the content fits all the available width when position: fixed
+}
+
// Nav customizations
.nav .nav-link {
display: flex !important;
.nav.nav-pills {
font-size: 16px !important;
+ font-weight: $font-semibold !important;
- .nav-link.active {
- font-weight: $font-semibold !important;
+ .nav-link {
+ opacity: 0.6 !important;
+
+ &.active, &:hover, &:active, &:focus {
+ opacity: 1 !important;
+ }
}
a {
@include disable-default-a-behaviour;
- color: var(--mainForegroundColor);
+ color: pvar(--mainForegroundColor);
}
}
-.nav-tabs {
-
- .nav-link {
- @include disable-default-a-behaviour;
+.nav-tabs .nav-link {
+ @include disable-default-a-behaviour;
- color: var(--mainForegroundColor) !important;
- }
-}
+ color: pvar(--mainForegroundColor);
+ font-weight: $font-semibold;
+ border: none;
+ border-bottom: 2px solid transparent;
+ opacity: 0.6;
-.nav-tabs .nav-link {
- &:not(.active) {
- border-bottom: 3px solid transparent;
- }
&.active {
- font-weight: $font-semibold;
- background-color: var(--mainBackgroundColor) !important;
- border: none;
- border-bottom: 2px solid var(--mainColor);
+ color: pvar(--mainForegroundColor);
+ background-color: pvar(--mainBackgroundColor) !important;
+ border-bottom-color: pvar(--mainColor);
}
- &:hover {
- border-top-color: transparent;
- border-left-color: transparent;
- border-right-color: transparent;
+
+ &.active, &:hover, &:active, &:focus {
+ opacity: 1;
}
}
.card {
- background-color: var(--mainBackgroundColor);
+ background-color: pvar(--mainBackgroundColor);
border-color: #dee2e6;
}
}
.btn-outline-tertiary {
- color: var(--secondaryColor);
- border-color: var(--secondaryColor);
+ color: pvar(--secondaryColor);
+ border-color: pvar(--secondaryColor);
&:focus-within,
&:focus,
&:hover {
- color: var(--mainBackgroundColor);
- background-color: var(--secondaryColor);
+ color: pvar(--mainBackgroundColor);
+ background-color: pvar(--secondaryColor);
}
}
// input box-shadow on focus
.form-control {
font-size: 15px;
- color: var(--mainForegroundColor);
- background-color: var(--inputBackgroundColor);
+ color: pvar(--mainForegroundColor);
+ background-color: pvar(--inputBackgroundColor);
outline: none;
&:focus-within,
&:focus {
- box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
+ box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
&.input-error {
box-shadow: #{$focus-box-shadow-form} #{scale-color($red, $alpha: -75%)};