diff --git a/app/components/multiple_checked_select_component/multiple_checked_select_component.html.haml b/app/components/multiple_checked_select_component/multiple_checked_select_component.html.haml index 685a4cc145..8dedce27ca 100644 --- a/app/components/multiple_checked_select_component/multiple_checked_select_component.html.haml +++ b/app/components/multiple_checked_select_component/multiple_checked_select_component.html.haml @@ -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] diff --git a/app/webpacker/css/admin/components/input.scss b/app/webpacker/css/admin/components/input.scss index 5b4cf8ed05..259b110997 100644 --- a/app/webpacker/css/admin/components/input.scss +++ b/app/webpacker/css/admin/components/input.scss @@ -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; + } +} + + diff --git a/app/webpacker/css/admin/dropdown.scss b/app/webpacker/css/admin/dropdown.scss index 9ffc60bd1f..4ba11d97e8 100644 --- a/app/webpacker/css/admin/dropdown.scss +++ b/app/webpacker/css/admin/dropdown.scss @@ -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; + } + } +}