mirror of
https://github.com/openfoodfoundation/openfoodnetwork
synced 2026-03-13 04:00:21 +00:00
Move CSS to Webpacker
This commit is contained in:
Matt-Yorkley
68
app/webpacker/css/admin/plugins/flatpickr-customization.scss
Normal file
68
app/webpacker/css/admin/plugins/flatpickr-customization.scss
Normal file
@@ -0,0 +1,68 @@
|
||||
$background-grey: #eceef1;
|
||||
$background-blue: #5498da;
|
||||
|
||||
// scss-lint:disable SelectorFormat
|
||||
|
||||
.flatpickr-calendar {
|
||||
border-radius: 0;
|
||||
|
||||
// Disable animation
|
||||
&.animate.open {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
&.arrowBottom::after {
|
||||
border-top-color: $background-grey;
|
||||
}
|
||||
|
||||
&.arrowTop::after {
|
||||
border-bottom-color: $background-blue;
|
||||
}
|
||||
|
||||
.flatpickr-months .flatpickr-month {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.flatpickr-months .flatpickr-month,
|
||||
.flatpickr-current-month .flatpickr-monthDropdown-months {
|
||||
background: $background-blue;
|
||||
}
|
||||
|
||||
.flatpickr-weekdays {
|
||||
background: $background-blue;
|
||||
|
||||
.flatpickr-weekday {
|
||||
background: $background-blue;
|
||||
}
|
||||
}
|
||||
|
||||
.flatpickr-day.selected,
|
||||
.flatpickr-day.startRange,
|
||||
.flatpickr-day.endRange,
|
||||
.flatpickr-day.selected.inRange,
|
||||
.flatpickr-day.startRange.inRange,
|
||||
.flatpickr-day.endRange.inRange,
|
||||
.flatpickr-day.selected:focus,
|
||||
.flatpickr-day.startRange:focus,
|
||||
.flatpickr-day.endRange:focus,
|
||||
.flatpickr-day.selected:hover,
|
||||
.flatpickr-day.startRange:hover,
|
||||
.flatpickr-day.endRange:hover,
|
||||
.flatpickr-day.selected.prevMonthDay,
|
||||
.flatpickr-day.startRange.prevMonthDay,
|
||||
.flatpickr-day.endRange.prevMonthDay,
|
||||
.flatpickr-day.selected.nextMonthDay,
|
||||
.flatpickr-day.startRange.nextMonthDay,
|
||||
.flatpickr-day.endRange.nextMonthDay {
|
||||
background: $background-blue;
|
||||
border-color: $background-blue;
|
||||
}
|
||||
}
|
||||
|
||||
// scss-lint:enable SelectorFormat
|
||||
|
||||
// customization for shortcut-buttons
|
||||
.shortcut-buttons-flatpickr-wrapper > .shortcut-buttons-flatpickr-buttons {
|
||||
justify-content: space-between;
|
||||
flex-grow: 1;
|
||||
}
|
||||
1475
app/webpacker/css/admin/plugins/font-awesome.scss
vendored
Normal file
1475
app/webpacker/css/admin/plugins/font-awesome.scss
vendored
Normal file
File diff suppressed because it is too large
Load Diff
135
app/webpacker/css/admin/plugins/jstree.scss
Normal file
135
app/webpacker/css/admin/plugins/jstree.scss
Normal file
@@ -0,0 +1,135 @@
|
||||
@import 'admin/globals/variables';
|
||||
@import 'admin/globals/mixins';
|
||||
@import 'admin/plugins/font-awesome';
|
||||
|
||||
#taxonomy_tree {
|
||||
> ul, .jstree-icon {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.jstree-icon {
|
||||
@extend [class^="icon-"]:before;
|
||||
}
|
||||
|
||||
.jstree-open > .jstree-icon {
|
||||
@extend .icon-caret-down;
|
||||
}
|
||||
.jstree-closed > .jstree-icon {
|
||||
@extend .icon-caret-right;
|
||||
}
|
||||
|
||||
li {
|
||||
background-image: none;
|
||||
|
||||
a {
|
||||
background-color: very-light($color-3);
|
||||
border: 1px solid $color-border;
|
||||
color: $color-body-text;
|
||||
font-weight: $font-weight-bold;
|
||||
text-shadow: none;
|
||||
width: 90%;
|
||||
height: auto;
|
||||
line-height: inherit;
|
||||
padding: 5px 0 5px 10px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.jstree-icon {
|
||||
padding-left: 0px;
|
||||
@extend .icon-move;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#vakata-dragged.jstree-apple .jstree-invalid,
|
||||
#vakata-dragged.jstree-apple .jstree-ok,
|
||||
#jstree-marker {
|
||||
background-image: none !important;
|
||||
background-color: transparent !important;
|
||||
@extend [class^="icon-"]:before;
|
||||
}
|
||||
#vakata-dragged.jstree-apple .jstree-invalid {
|
||||
@extend .icon-remove;
|
||||
color: $color-5;
|
||||
}
|
||||
#vakata-dragged.jstree-apple .jstree-ok {
|
||||
@extend .icon-ok;
|
||||
color: $color-2;
|
||||
}
|
||||
|
||||
#jstree-marker {
|
||||
@extend .icon-caret-right;
|
||||
color: $color-body-text !important;
|
||||
width: 4px !important;
|
||||
}
|
||||
|
||||
#jstree-marker-line {
|
||||
@include border-radius($border-radius !important);
|
||||
height: 0px !important;
|
||||
margin-left: 5px !important;
|
||||
margin-top: -2px !important;
|
||||
border: none !important;
|
||||
border-bottom: 1px solid $color-body-text !important;
|
||||
background-color: very-light($color-3) !important;
|
||||
|
||||
-webkit-box-shadow: none !important;
|
||||
-moz-box-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
|
||||
}
|
||||
|
||||
#vakata-contextmenu {
|
||||
background-color: $color-3 !important;
|
||||
-moz-box-shadow: none !important;
|
||||
-webkit-box-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
border: none !important;
|
||||
@include border-radius($border-radius !important);
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-left: 10px solid transparent;
|
||||
border-right: 10px solid transparent;
|
||||
border-bottom: 10px solid $color-3;
|
||||
top: 0px;
|
||||
margin-top: -10px;
|
||||
left: 25px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color-1 !important;
|
||||
line-height: inherit !important;
|
||||
padding: 5px 10px !important;
|
||||
margin: 0 !important;
|
||||
font-size: 90% !important;
|
||||
|
||||
&:hover {
|
||||
@include border-radius($border-radius !important);
|
||||
background-color: $color-2 !important;
|
||||
border: none !important;
|
||||
-moz-box-shadow: none !important;
|
||||
-webkit-box-shadow: none !important;
|
||||
line-height: inherit !important;
|
||||
padding: 5px 10px !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
li:first-child a:hover:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-left: 10px solid transparent;
|
||||
border-right: 10px solid transparent;
|
||||
border-bottom: 10px solid $color-2;
|
||||
top: 0px;
|
||||
margin-top: -10px;
|
||||
left: 25px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
li.vakata-separator {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
89
app/webpacker/css/admin/plugins/powertip.scss
Normal file
89
app/webpacker/css/admin/plugins/powertip.scss
Normal file
@@ -0,0 +1,89 @@
|
||||
@import 'admin/globals/variables';
|
||||
@import 'admin/globals/mixins';
|
||||
|
||||
#powerTip {
|
||||
background-color: $color-3;
|
||||
padding: 5px 15px;
|
||||
@include border-radius($border-radius);
|
||||
|
||||
&.n:before, &.ne:before, &.nw:before {
|
||||
border-top-width: 5px;
|
||||
border-top-color: $color-3;
|
||||
bottom: -5px;
|
||||
}
|
||||
|
||||
&.e:before {
|
||||
border-right-width: 5px;
|
||||
border-right-color: $color-3;
|
||||
left: -5px;
|
||||
}
|
||||
&.s:before, &.se:before, &.sw:before {
|
||||
border-bottom-width: 5px;
|
||||
border-bottom-color: $color-3;
|
||||
top: -5px;
|
||||
}
|
||||
&.w:before {
|
||||
border-left-width: 5px;
|
||||
border-left-color: $color-3;
|
||||
right: -5px;
|
||||
}
|
||||
&.ne:before, &.se:before {
|
||||
border-right-width: 5px;
|
||||
border-right-color: $color-3;
|
||||
left: -5px;
|
||||
}
|
||||
&.nw:before, &.sw:before {
|
||||
border-left-width: 5px;
|
||||
border-right-color: $color-3;
|
||||
right: -5px;
|
||||
}
|
||||
|
||||
&.clone, &.yellow, &.cancel {
|
||||
background-color: $color-notice;
|
||||
|
||||
&.n:before, &.ne:before, &.nw:before {
|
||||
border-top-color: $color-notice;
|
||||
}
|
||||
&.e:before, &.nw:before, &.sw:before {
|
||||
border-right-color: $color-notice;
|
||||
}
|
||||
&.s:before, &.se:before, &.sw:before {
|
||||
border-bottom-color: $color-notice;
|
||||
}
|
||||
&.w:before {
|
||||
border-left-color: $color-notice;
|
||||
}
|
||||
}
|
||||
&.edit, &.green, &.capture, &.save, &.add {
|
||||
background-color: $color-success;
|
||||
|
||||
&.n:before, &.ne:before, &.nw:before {
|
||||
border-top-color: $color-success;
|
||||
}
|
||||
&.e:before, &.nw:before, &.sw:before {
|
||||
border-right-color: $color-success;
|
||||
}
|
||||
&.s:before, &.se:before, &.sw:before {
|
||||
border-bottom-color: $color-success;
|
||||
}
|
||||
&.w:before {
|
||||
border-left-color: $color-success;
|
||||
}
|
||||
}
|
||||
&.remove, &.red, &.void {
|
||||
background-color: $color-error;
|
||||
|
||||
&.n:before, &.ne:before, &.nw:before {
|
||||
border-top-color: $color-error;
|
||||
}
|
||||
&.e:before, &.nw:before, &.sw:before {
|
||||
border-right-color: $color-error;
|
||||
}
|
||||
&.s:before, &.se:before, &.sw:before {
|
||||
border-bottom-color: $color-error;
|
||||
}
|
||||
&.w:before {
|
||||
border-left-color: $color-error;
|
||||
}
|
||||
}
|
||||
}
|
||||
193
app/webpacker/css/admin/plugins/select2.scss
Normal file
193
app/webpacker/css/admin/plugins/select2.scss
Normal file
@@ -0,0 +1,193 @@
|
||||
@import 'admin/globals/functions';
|
||||
@import 'admin/globals/variables';
|
||||
@import 'admin/globals/mixins';
|
||||
|
||||
@import 'admin/shared/forms';
|
||||
|
||||
@import 'admin/plugins/font-awesome';
|
||||
|
||||
.select2-container {
|
||||
&:hover .select2-choice, &.select2-container-active .select2-choice {
|
||||
background-color: $color-sel-hover-bg !important;
|
||||
border-color: $color-sel-hover-bg !important;
|
||||
}
|
||||
.select2-choice {
|
||||
background-image: none !important;
|
||||
background-color: $color-sel-bg;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
@include border-radius($border-radius);
|
||||
color: $color-1 !important;
|
||||
font-size: 90%;
|
||||
height: 31px;
|
||||
line-height: inherit !important;
|
||||
padding: 5px 15px 7px;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.select2-search-choice-close {
|
||||
background-image: none !important;
|
||||
font-size: 100% !important;
|
||||
@extend .icon-remove;
|
||||
@extend [class^="icon-"]:before;
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&.select2-container-active {
|
||||
.select2-choice {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
&.select2-dropdown-open .select2-choice div b {
|
||||
@extend .icon-caret-up
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select2-drop {
|
||||
border-color: $color-sel-hover-bg;
|
||||
box-shadow: none !important;
|
||||
z-index: 1000000;
|
||||
|
||||
&.select2-drop-above {
|
||||
border-color: $color-sel-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-search {
|
||||
@extend .icon-search;
|
||||
|
||||
font-size: 100%;
|
||||
color: darken($color-border, 15);
|
||||
padding: 0 9px 0 0;
|
||||
|
||||
&:before {
|
||||
@extend [class^="icon-"]:before;
|
||||
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
left: 13px;
|
||||
}
|
||||
|
||||
input {
|
||||
@extend input[type="text"];
|
||||
|
||||
padding: 6px 0 6px 25px;
|
||||
margin: 5px 0 0 5px;
|
||||
font-family: $base-font-family;
|
||||
font-size: 90%;
|
||||
box-shadow: none;
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-container .select2-choice .select2-arrow {
|
||||
background-image: none;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
|
||||
b {
|
||||
padding-top: 7px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: none;
|
||||
font-family: FontAwesome;
|
||||
font-weight: 200 !important;
|
||||
|
||||
&:before {
|
||||
content: "\f0d7";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select2-results {
|
||||
padding-left: 0 !important;
|
||||
|
||||
li {
|
||||
font-size: 85% !important;
|
||||
|
||||
&.select2-highlighted {
|
||||
.select2-result-label {
|
||||
&, h6 {
|
||||
color: $color-1 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select2-result-label {
|
||||
color: $color-body-text;
|
||||
min-height: 22px;
|
||||
clear: both;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
&.select2-no-results, &.select2-searching {
|
||||
padding: 5px;
|
||||
background-color: transparent;
|
||||
color: $color-body-text;
|
||||
text-align: center;
|
||||
font-weight: $font-weight-bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-highlighted {
|
||||
background-color: $color-sel-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-container-multi {
|
||||
&.select2-container-active, &.select2-dropdown-open {
|
||||
.select2-choices {
|
||||
border-color: $color-sel-hover-bg !important;
|
||||
box-shadow: none;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
.select2-choices {
|
||||
@extend input[type="text"];
|
||||
padding: 6px 3px 3px 3px;
|
||||
box-shadow: none;
|
||||
background-image: none !important;
|
||||
|
||||
.select2-search-choice {
|
||||
@include border-radius($border-radius);
|
||||
margin: 0 0 3px 3px;
|
||||
background-image: none;
|
||||
background-color: $color-sel-bg;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
color: $color-1 !important;
|
||||
font-size: 85%;
|
||||
|
||||
&:hover {
|
||||
background-color: $color-sel-hover-bg;
|
||||
}
|
||||
|
||||
.select2-search-choice-close {
|
||||
background-image: none !important;
|
||||
font-size: 85% !important;
|
||||
@extend .icon-remove;
|
||||
@extend [class^="icon-"]:before;
|
||||
margin-left: 2px;
|
||||
color: $color-1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label .select2-container {
|
||||
margin-top: -6px;
|
||||
.select2-choice {
|
||||
span {
|
||||
text-transform: none;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user