fix: update buttons, breadcrumb and global scss

- updated some styles in global scss
- updated buttons scss
- updated breadcrumb style to be consistent with new design
This commit is contained in:
Maharshi Patel 2023-08-23 17:03:24 +05:30
parent ec89c75265
commit baff67baa4
3 changed files with 31 additions and 23 deletions

View file

@ -6,9 +6,11 @@
.btn {
border: none;
padding: 4px 8px;
background-color: var(--white);
border-radius: var(--border-radius);
box-shadow: var(--btn-shadow);
font-size: var(--text-md);
box-shadow: none;
font-size: var(--text-base);
&.icon-btn {
height: var(--btn-height);
padding: 0px;
@ -40,12 +42,13 @@
.btn-primary-light {
@include button-variant(
$background: $primary-light,
$border: $primary-light,
$hover-background: lighten($primary-light, 1%),
$hover-border: $primary-light,
$active-background: lighten($primary-light, 1%),
$active-border: darken($primary-light, 12.5%)
// not happy with this
$background: $gray-300,
$border: $gray-800,
$hover-background: $gray-200,
$hover-border: $gray-300,
$active-background: $gray-300,
$active-border: $gray-200
);
color: var(--primary);
@ -54,7 +57,7 @@
}
&:focus {
box-shadow: 0 0 0 0.2rem var(--primary-light);
box-shadow: var(--focus-default);
}
}
@ -62,16 +65,16 @@
background-color: var(--control-bg);
color: var(--text-color);
&:hover, &:active {
background-color: var(--gray-400);
background-color: var(--gray-300);
color: var(--text-color);
}
}
.btn.btn-default {
background-color: var(--fg-color);
background-color: var(--control-bg);
color: var(--text-color);
&:hover, &:active {
background: var(--fg-hover-color);
background: var(--gray-300);
color: var(--text-color);
}
}
@ -85,7 +88,7 @@
}
.btn.btn-danger {
background-color: var(--red-400);
background-color: var(--danger);
color: $white;
}

View file

@ -7,9 +7,9 @@
/*! This comment will be included even in compressed mode. */
#navbar-breadcrumbs {
margin-left: var(--margin-md);
font-size: var(--text-sm);
font-size: var(--text-base);
font-weight: var(--weight-regular);
a {
font-size: var(--text-md);
margin-right: 10px;
&:before {
content: #{"/*!rtl:var(--left-arrow-svg);*/"}var(--right-arrow-svg);
@ -20,7 +20,7 @@
li.disabled {
a {
color: var(--text-muted);
color: var(--gray-600);
pointer-events: none;
}
}

View file

@ -5,7 +5,8 @@ html {
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: var(--text-light);
color: var(--text-muted);
font-weight: var(--weight-regular);
background-color: var(--bg-color);
&.full-width {
@ -231,7 +232,7 @@ h2 {
.btn-group-sm > .btn, .btn-sm {
padding: var(--padding-xs) var(--padding-sm);
font-size: var(--text-md);
font-size: var(--text-base);
}
.btn-group {
@ -284,7 +285,7 @@ h2 {
.input-xs {
height: 26px;
font-size: var(--text-md);
font-size: var(--text-base);
}
select.input-xs {
@ -308,12 +309,13 @@ select.input-xs {
/* dropdowns */
.dropdown-item {
border-radius: 4px;
border-radius: 8px;
padding : var(--dropdown-padding) !important;
}
.dropdown-menu {
padding: 4px;
font-size: var(--text-md);
font-size: var(--text-base);
max-height: 500px;
overflow: auto;
@ -351,7 +353,7 @@ select.input-xs {
}
.custom-control.custom-switch {
font-size: var(--text-md);
font-size: var(--text-base);
line-height: 1.6;
.custom-control-input ~ .custom-control-label {
@ -534,6 +536,9 @@ body.no-sidebar {
.app-logo {
width: 24px;
h4 {
margin-top: 0;
}
}
.alt-pressed .alt-underline {
@ -578,7 +583,7 @@ details > summary:focus {
}
.text-medium {
font-size: var(--text-md);
font-size: var(--text-base);
}
.text-small {