diff --git a/frappe/public/scss/common/controls.scss b/frappe/public/scss/common/controls.scss index 9fe5f82a35..924f6832c0 100644 --- a/frappe/public/scss/common/controls.scss +++ b/frappe/public/scss/common/controls.scss @@ -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 { diff --git a/frappe/public/scss/common/flex.scss b/frappe/public/scss/common/flex.scss index 11b0635fc0..a6af404f73 100644 --- a/frappe/public/scss/common/flex.scss +++ b/frappe/public/scss/common/flex.scss @@ -73,6 +73,8 @@ } .level-item { + font-weight: var(--weight-medium); + color: var(--gray-600); align-items: center; display: flex; flex-basis: auto; diff --git a/frappe/public/scss/common/form.scss b/frappe/public/scss/common/form.scss index a01ff54c28..2bb7963dc2 100644 --- a/frappe/public/scss/common/form.scss +++ b/frappe/public/scss/common/form.scss @@ -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); diff --git a/frappe/public/scss/desk/navbar.scss b/frappe/public/scss/desk/navbar.scss index fa36a5b28c..104a38cfa8 100644 --- a/frappe/public/scss/desk/navbar.scss +++ b/frappe/public/scss/desk/navbar.scss @@ -7,6 +7,10 @@ margin-right: 0; } .navbar-nav { + .dropdown-item { + padding: 6px 8px !important; + } + .nav-link { padding: 0; } diff --git a/frappe/public/scss/desk/user_profile.scss b/frappe/public/scss/desk/user_profile.scss index a8f8c1384b..85500c39a0 100644 --- a/frappe/public/scss/desk/user_profile.scss +++ b/frappe/public/scss/desk/user_profile.scss @@ -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; } diff --git a/frappe/public/scss/element/checkbox.scss b/frappe/public/scss/element/checkbox.scss index 6e0987c00a..d660ad99ab 100644 --- a/frappe/public/scss/element/checkbox.scss +++ b/frappe/public/scss/element/checkbox.scss @@ -1,3 +1,4 @@ +// change icon to Espresso $check-icon: url("data:image/svg+xml, "); 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; } -} \ No newline at end of file +} + +/* 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%; + } \ No newline at end of file diff --git a/frappe/public/scss/espresso/_spacing.scss b/frappe/public/scss/espresso/_spacing.scss index d26cbf7a75..60f7667742 100644 --- a/frappe/public/scss/espresso/_spacing.scss +++ b/frappe/public/scss/espresso/_spacing.scss @@ -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; diff --git a/frappe/templates/styles/card_style.css b/frappe/templates/styles/card_style.css index 96898847d2..3fb3e6064d 100644 --- a/frappe/templates/styles/card_style.css +++ b/frappe/templates/styles/card_style.css @@ -8,7 +8,6 @@ margin: 70px auto; border-radius: 4px; background-color: var(--fg-color); - box-shadow: var(--shadow-base); } .for-reset-password {