empayre/fleet
14
0
Fork 0
mirror of https://github.com/empayre/fleet.git synced 2024-11-06 08:55:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Packs Page UI: form pill contrast (#837)

Browse Source 
* Pill border and colors
* Styling font, margin, padding (sans new icon)
* New close icon
This commit is contained in:
RachelElysia 2021-05-24 13:47:05 -04:00 committed by GitHub
parent 3d83fcaa35
commit c0f67c5822
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 17 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/images/icon-close-dark-blue-grey-16x16@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 443 B

38
frontend/components/forms/fields/Dropdown/_styles.scss
View File

@ -46,36 +46,31 @@
background-color: $ui-light-grey;
border-radius: 4px;
height: 40px;
.Select-value {
border: 0;
}
}
.Select-value {
font-size: $small;
font-size: $x-small;
border-radius: 4px;
background-color: $ui-light-grey;
border: solid 1px $ui-fleet-blue-15;
background-color: $ui-off-white;
border: solid 1px $core-dark-blue-grey;
.Select-value-icon {
border: 0;
float: right;
position: relative;
line-height: 34px;
width: 25px;
line-height: 28px;
width: 20px;
padding: 0;
margin: 0 5px;
text-indent: -999em;
&::after {
@extend %kolidecon;
transition: color 150ms ease-in-out;
transform: translate(-50%, -50%);
content: "\f036";
content: url(../assets/images/icon-close-dark-blue-grey-16x16@2x.png);
transform: scale(0.5);
position: absolute;
top: 50%;
left: 50%;
top: -5px;
left: -5px;
visibility: visible;
font-size: $small;
color: $ui-gray;
@ -84,9 +79,9 @@
}
.Select-value-label {
font-size: $small;
font-weight: $regular;
color: $core-fleet-black;
font-size: $x-small;
font-weight: $bold;
color: $core-dark-blue-grey;
line-height: 28px;
}
}
@ -156,8 +151,8 @@
&.is-pseudo-focused > .Select-control {
.Select-value {
.Select-value-label {
color: $core-fleet-black;
font-size: $small;
color: $core-dark-blue-grey;
font-size: $x-small;
}
}
}
@ -242,12 +237,11 @@
}
.Select-value {
margin-top: 3px;
margin-bottom: 3px;
margin-top: 4px;
}
.Select-value-label {
padding: 0 0 0 1rem;
padding: 0 0 0 10px;
}
}
}

1
frontend/styles/var/colors.scss
View File

@ -5,6 +5,7 @@ $core-vibrant-blue: #6a67fe;
$core-vibrant-red: #ff5c83;
$core-fleet-purple: #ae6ddf;
$core-white: #ffffff;
$core-dark-blue-grey: #506e92;
// UI
$ui-fleet-black-50: #8b8fa2;