Merge pull request #13131 from krisztin/12846-Back-office-form-border-update-for-contrast

Updating form field borders for better contrast
This commit is contained in:
Filipe
2025-02-13 22:21:39 -06:00
committed by GitHub
6 changed files with 21 additions and 9 deletions

View File

@@ -146,6 +146,7 @@ $h2-size: $h3-size + 2 !default;
$h1-size: $h2-size + 2 !default;
$border-radius: 3px !default;
$border-input: 1px solid #2e3132; // Copied over from admin_v3 variables as a temporary solution
$font-weight-bold: 600 !default;
$font-weight-normal: 400 !default;

View File

@@ -1,4 +1,10 @@
tags-input {
.tags {
border: $border-input;
border-radius: $border-radius;
box-shadow: none;
padding: 4px; // hack to make the height match other inputs
}
&.limit-reached {
input,
span.input {

View File

@@ -1,3 +1,9 @@
.select2-container {
border: $border-input;
border-radius: $border-radius;
padding-bottom: 7px; // hack to make the height match other inputs
}
.select2-container {
&:hover .select2-choice,
&.select2-container-active .select2-choice {
@@ -6,7 +12,6 @@
}
.select2-choice {
background-image: none !important;
background-color: $color-sel-bg;
border: none !important;
box-shadow: none !important;
@include border-radius($border-radius);
@@ -40,7 +45,7 @@
}
.select2-drop {
border-color: $color-sel-hover-bg;
border-color: $color-txt-brd;
box-shadow: none !important;
z-index: 1000000;
@@ -141,6 +146,7 @@
}
.select2-choices {
@extend input, [type="text"];
border: none;
padding: 6px 3px 3px 3px;
box-shadow: none;
background-image: none !important;

View File

@@ -17,10 +17,9 @@
.ts-control {
box-shadow: none;
border-color: $lighter-grey;
background-color: $lighter-grey;
border: $border-input;
border-radius: $border-radius;
background-image: none;
@include border-radius($border-radius);
input {
font-size: $body-font-size;

View File

@@ -83,7 +83,7 @@ $color-sel-hover-bg: $lighter-grey !default;
// Text inputs styles
$color-txt-bg: $lighter-grey !default;
$color-txt-brd: $lighter-grey !default;
$color-txt-brd: $dark-grey !default;
$color-txt-text: $near-black !default;
$color-txt-hover-brd: $teal !default;
$color-txt-disabled-text: $medium-grey !default;
@@ -171,6 +171,7 @@ $h3-size: $h4-size + 2 !default;
$h2-size: $h3-size + 2 !default;
$h1-size: $h2-size + 2 !default;
$border-input: 1px solid $color-txt-brd;
$border-radius: 4px !default;
$box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05), 0px 2px 2px rgba(0, 0, 0, 0.07) !default;

View File

@@ -14,11 +14,10 @@ input[type="datetime"],
input[type="time"],
input[type="number"],
textarea {
@include border-radius($border-radius);
padding: ($vpadding-txt - 1px) ($hpadding-txt - 1px); // Minus 1px for border
border: 1px solid $color-txt-brd;
border: $border-input;
border-radius: $border-radius;
color: $color-txt-text;
background-color: $color-txt-bg;
font-size: 14px;
line-height: 22px;