consul/grecia
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Render all icons on one line in forms

Browse Source 
Show all icons of the RelatedListSelector component on one line in the
forms.
This commit is contained in:
taitus
2021-01-28 11:06:02 +01:00
committed by Javi Martín
parent 0b84c0da01
commit d61d648dda
3 changed files with 11 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/stylesheets/_consul_settings.scss
View File

@@ -74,6 +74,8 @@ $input-height: $line-height * 2;
$icon-width: $line-height * 2; $icon-width: $line-height * 2;
$sdg-icon-min-width: 40px;
$sdg-colors: ( $sdg-colors: (
1: #e5243b, 1: #e5243b,
2: #dda63a, 2: #dda63a,

2
app/assets/stylesheets/sdg/goals/icon.scss
View File

@@ -1,4 +1,4 @@
.sdg-goal-icon { .sdg-goal-icon {
min-width: 40px; min-width: $sdg-icon-min-width;
width: $icon-width; width: $icon-width;
} }

9
app/assets/stylesheets/sdg/related_list_selector.scss
View File

@@ -13,9 +13,12 @@
} }
label + ul { label + ul {
@extend %sdg-goal-list; $spacing: 0.5%;
@include sdg-goal-list($spacing);
li { li {
min-width: $sdg-icon-min-width;
width: calc(100% / 17 - #{$spacing});
&[aria-checked=true] img { &[aria-checked=true] img {
opacity: 0.15; opacity: 0.15;
@@ -28,6 +31,10 @@
&:hover { &:hover {
cursor: pointer; cursor: pointer;
} }
.sdg-goal-icon {
width: 100%;
}
} }
} }