raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-01-11 18:26:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Attempt: externalize ofn-drop-down-v2 selector

Browse Source 
+ add class `redesigned-checkbox` on `input`

Move `input.redesigned-input` definition outside dropdown definition

--> more generic
This commit is contained in:
Jean-Baptiste Bellet
2022-10-11 15:21:05 +02:00
parent 8a6874326a
commit 14a258c661
3 changed files with 80 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/multiple_checked_select_component/multiple_checked_select_component.html.haml
View File

@@ -9,5 +9,5 @@
%div.menu_items
- @options.each do |option|
%label.menu_item{ "data-multiple-checked-select-target": "option", "data-value": option[1], "data-label": option[0] }
%input{ type: "checkbox", checked: @selected.include?(option[1]), name: "#{@name}[]", value: option[1] }
%input.redesigned-input{ type: "checkbox", checked: @selected.include?(option[1]), name: "#{@name}[]", value: option[1] }
= option[0]

31
app/webpacker/css/admin/components/input.scss
View File

@@ -8,3 +8,34 @@
}
}
}
input[type='checkbox'].redesigned-input {
position: relative;
top: 1px;
-moz-appearance:none;
-webkit-appearance:none;
-o-appearance:none;
appearance: none;
outline: none;
content: none;
cursor: pointer;
&:before {
font-family: "FontAwesome";
content: "\f00c";
font-size: 15px;
color: transparent !important;
background: transparent !important;
display: block;
width: 15px;
height: 15px;
border: 1px solid #809cb1;
margin-right: 7px;
}
&:checked:before {
color: #5498DA !important;
}
}

124
app/webpacker/css/admin/dropdown.scss
View File

@@ -66,82 +66,6 @@
.ofn-drop-down {
@include ofn-drop-down-style;
&.ofn-drop-down-v2 {
border: 1px solid $pale-blue;
background-color: white;
padding: 0px;
&:hover {
border-color: $spree-blue;
}
.ofn-drop-down-label {
color: $color-3;
padding: 10px;
width: 235px;
display: flex;
justify-content: space-between;
&:hover {
color: $color-3;
}
.label {
padding-right: 10px;
}
.icon-caret-down, .icon-caret-up {
padding-right: 0px;
}
}
.menu {
width: 100%;
}
.menu_items {
max-height: 200px;
overflow-y: scroll;
label.menu_item {
margin-bottom: 5px;
color: #454545;
font-weight: 400;
cursor: pointer;
padding-top: 4px;
padding-bottom: 5px;
input {
position: relative;
top: 1px;
-moz-appearance:none;
-webkit-appearance:none;
-o-appearance:none;
outline: none;
content: none;
cursor: pointer;
&:before {
font-family: "FontAwesome";
content: "\f00c";
font-size: 15px;
color: transparent !important;
background: transparent !important;
display: block;
width: 15px;
height: 15px;
border: 1px solid #809cb1;
margin-right: 7px;
}
&:checked:before {
color: #5498DA !important;
}
}
}
}
}
position: relative;
float: left;
@@ -238,3 +162,51 @@
}
}
}
.ofn-drop-down-v2 {
border: 1px solid $pale-blue;
background-color: white;
padding: 0px;
&:hover {
border-color: $spree-blue;
}
.ofn-drop-down-label {
color: $color-3;
padding: 10px;
width: 235px;
display: flex;
justify-content: space-between;
&:hover {
color: $color-3;
}
.label {
padding-right: 10px;
}
.icon-caret-down, .icon-caret-up {
padding-right: 0px;
}
}
.menu {
width: 100%;
}
.menu_items {
max-height: 200px;
overflow-y: scroll;
label.menu_item {
margin-bottom: 5px;
color: #454545;
font-weight: 400;
cursor: pointer;
padding-top: 4px;
padding-bottom: 5px;
}
}
}