fix: update form, controls, dropdown styles
- update form text style - navbar menu padding - added switch style to checkbox TODO: add option to configure switch. - misc fixes
This commit is contained in:
Maharshi Patel
parent
d735abb81a
commit
025a5d57cf
8 changed files with 95 additions and 15 deletions
|
|
@ -130,7 +130,7 @@ select.form-control {
|
|||
}
|
||||
|
||||
.frappe-control {
|
||||
font-size: var(--text-md);
|
||||
font-size: var(--text-base);
|
||||
.control-label.reqd:after {
|
||||
content: ' *';
|
||||
color: var(--red-400);
|
||||
|
|
@ -155,7 +155,7 @@ select.form-control {
|
|||
}
|
||||
.action-btn {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
top: 0px;
|
||||
right: 4px;
|
||||
padding: 3px;
|
||||
z-index: 3;
|
||||
|
|
@ -224,7 +224,7 @@ select.form-control {
|
|||
padding: 6px 10px;
|
||||
background: var(--control-bg);
|
||||
border-radius: var(--border-radius);
|
||||
font-size: var(--text-md);
|
||||
font-size: var(--text-base);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -493,10 +493,13 @@ button.data-pill {
|
|||
height: var(--btn-height);
|
||||
background-color: var(--fg-color);
|
||||
border-radius: var(--border-radius);
|
||||
padding: calc(var(--padding-xs) - 2px) var(--padding-sm);
|
||||
color: var(--text-color);
|
||||
background-color: var(--gray-100);
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.pill-label {
|
||||
color: var(--text-color);
|
||||
}
|
||||
}
|
||||
|
||||
.capture-remove-btn {
|
||||
|
|
|
|||
|
|
@ -73,6 +73,8 @@
|
|||
}
|
||||
|
||||
.level-item {
|
||||
font-weight: var(--weight-medium);
|
||||
color: var(--gray-600);
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-basis: auto;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,15 @@
|
|||
.form-control {
|
||||
border: none;
|
||||
font-size: var(--text-md);
|
||||
height: var(--input-height);
|
||||
font-size: var(--text-base);
|
||||
font-weight: var(--weight-regular);
|
||||
border-radius: var(--border-radius-sm);
|
||||
padding: var(--input-padding);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.form-control.bold {
|
||||
font-weight: 500;
|
||||
font-weight: var(--weight-medium);
|
||||
}
|
||||
|
||||
.like-disabled-input {
|
||||
|
|
@ -14,9 +18,10 @@
|
|||
font-size: var(--text-sm);
|
||||
}
|
||||
min-height: var(--input-height);
|
||||
border-radius: $border-radius;
|
||||
font-weight: 400;
|
||||
padding: 6px 12px;
|
||||
height: var(--input-height);
|
||||
font-weight: var(--weight-regular);
|
||||
border-radius: var(--border-radius-sm);
|
||||
padding: var(--disabled-input-padding);
|
||||
cursor: default;
|
||||
color: var(--disabled-text-color);
|
||||
background-color: var(--disabled-control-bg);
|
||||
|
|
|
|||
|
|
@ -7,6 +7,10 @@
|
|||
margin-right: 0;
|
||||
}
|
||||
.navbar-nav {
|
||||
.dropdown-item {
|
||||
padding: 6px 8px !important;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@
|
|||
.stat-value {
|
||||
font-size: var(--text-lg);
|
||||
color: var(--text-color);
|
||||
font-weight: var(--text-bold);
|
||||
font-weight: var(--weight-medium);
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
// change icon to Espresso
|
||||
$check-icon: url("data:image/svg+xml, <svg viewBox='0 0 8 7' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1 4.00001L2.66667 5.80001L7 1.20001' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
|
||||
|
||||
input[type="checkbox"] {
|
||||
|
|
@ -7,9 +8,8 @@ input[type="checkbox"] {
|
|||
margin-right: var(--checkbox-right-margin) !important;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
border: 1px solid var(--gray-400);
|
||||
border: 1px solid var(--gray-500);
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
|
||||
// Reset browser behavior
|
||||
|
|
@ -52,4 +52,71 @@ input[type="checkbox"] {
|
|||
border: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* The switch - the box around the slider */
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 26px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
/* Hide default HTML checkbox */
|
||||
.switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/* The slider */
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: var(--gray-300);
|
||||
-webkit-transition: .4s;
|
||||
transition: .4s;
|
||||
}
|
||||
|
||||
.slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
left: 2px;
|
||||
bottom: 2px;
|
||||
background-color: var(--neutral-white);
|
||||
-webkit-transition: .4s;
|
||||
transition: .4s;
|
||||
}
|
||||
|
||||
input:checked + .slider {
|
||||
background-color: var(--gray-900);
|
||||
}
|
||||
|
||||
input:focus + .slider {
|
||||
box-shadow: var(--focus-default)
|
||||
}
|
||||
|
||||
input:checked + .slider:before {
|
||||
-webkit-transform: translateX(10px);
|
||||
-ms-transform: translateX(10px);
|
||||
transform: translateX(10px);
|
||||
}
|
||||
|
||||
/* Rounded sliders */
|
||||
.slider.round {
|
||||
border-radius: 34px;
|
||||
}
|
||||
|
||||
label.switch {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.slider.round:before {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
:root {
|
||||
// Input Padding
|
||||
--input-padding: 6px 8px;
|
||||
--dropdown-padding: 6px 8px;
|
||||
--dropdown-padding: 4px 8px;
|
||||
--grid-padding: 12px 8px;
|
||||
--disabled-input-padding: 3px 8px;
|
||||
--number-card-padding: 12px 8px;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
margin: 70px auto;
|
||||
border-radius: 4px;
|
||||
background-color: var(--fg-color);
|
||||
box-shadow: var(--shadow-base);
|
||||
}
|
||||
|
||||
.for-reset-password {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue