raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-03-18 04:39:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move CSS to Webpacker

Browse Source
This commit is contained in:
Matt-Yorkley
2021-06-13 11:42:27 +01:00
parent 482879245f
commit 8dfc30438b
171 changed files with 876 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
app/webpacker/css/admin/components/actions.scss Normal file
View File

@@ -0,0 +1,33 @@
@import 'admin/globals/variables';
table tbody tr {
&.highlight {
@each $action in $actions {
&.action-#{$action} td {
background-color: get-value($actions, $actions-bg-colors, $action);
border-color: get-value($actions, $actions-brd-colors, $action);
}
}
&.action-remove td, &.action-void td {
text-decoration: line-through;
&.actions {
text-decoration: none;
}
}
}
&.before-highlight {
@each $action in $actions {
&.action-#{$action} td {
border-bottom-color: get-value($actions, $actions-brd-colors, $action);
}
}
}
td.actions {
background-color: transparent !important;
}
}

81
app/webpacker/css/admin/components/alert-box.scss Normal file
View File

@@ -0,0 +1,81 @@
@import "../../darkswarm/mixins";
@import "../variables";
.alert-box {
position: relative;
display: block;
background-color: #eff5dc;
border: 1px solid $spree-green;
color: #666;
margin-top: 1em;
margin-bottom: 1em;
@include border-radius(3px);
transition: opacity 300ms ease-out;
padding: 0.77778em 1.33333em 0.77778em 0.77778em;
a.close {
position: absolute;
right: 5px;
top: 5px;
font-size: 1.5em;
}
&.ok {
border: 1px solid $spree-green;
background-color: #fbffee;
color: $spree-green;
font-weight: bold;
a.button {
padding: 3px 10px;
background-color: #a7c44d;
&:hover {
background-color: $spree-green;
}
}
a.close {
color: $spree-green;
}
}
&.error {
border: 1px solid #c82020;
background-color: #f5dcdc;
color: #c82020;
font-weight: bold;
a.button {
padding: 3px 10px;
background-color: #c85252;
&:hover {
background-color: #c82020;
}
}
a.close {
color: #c82020;
}
}
&.warning {
border: 1px solid #e6912e;
background-color: #fff4e6;
color: #e6912e;
font-weight: bold;
a.button {
padding: 3px 10px;
background-color: #db9350;
&:hover {
background-color: #e6912e;
}
}
a.close {
color: #e6912e;
}
}
}

23
app/webpacker/css/admin/components/alert_row.scss Normal file
View File

@@ -0,0 +1,23 @@
@import "../variables";
.alert-row{
margin-bottom: 10px;
font-weight: bold;
background-color: $spree-light-blue;
.column, .columns {
padding-top: 8px;
padding-bottom: 8px;
&.alpha { padding-left: 10px; }
&.omega { padding-right: 10px; }
}
span {
line-height: 3rem;
}
a.close {
line-height: 3rem;
font-size: 2.0rem;
}
}

33
app/webpacker/css/admin/components/date-picker.scss Normal file
View File

@@ -0,0 +1,33 @@
@import 'admin/globals/variables';
@import 'admin/globals/mixins';
@import 'admin/plugins/font-awesome';
// scss-lint:disable QualifyingElement
.date-range-filter {
.range-divider {
padding: 0;
}
input.datepicker {
width: 96px !important;
}
}
input.datetimepicker {
min-width: 12.9em;
}
.container input[readonly].flatpickr-input,
.container input[readonly].datepicker,
.container input[readonly].datetimepicker {
background-color: $white;
cursor: pointer;
}
img.ui-datepicker-trigger {
margin-left: -1.75em;
position: absolute;
margin-top: 0.5em;
}
// scss-lint:enable QualifyingElement

38
app/webpacker/css/admin/components/dialogs.scss Normal file
View File

@@ -0,0 +1,38 @@
@import "../variables";
#info-dialog, #confirm-dialog {
.message {
.text, .icon {
position: relative;
float:left;
display: inline;
}
.text {
padding-top: 10px;
width: 80%;
font-size: 1rem;
}
.icon {
width: 20%;
font-size: 4rem;
}
}
&.error {
.message {
.icon {
color: $warning-red;
}
}
}
&.info {
.message {
.icon {
color: $spree-blue;
}
}
}
}

10
app/webpacker/css/admin/components/input.scss Normal file
View File

@@ -0,0 +1,10 @@
@import '../../darkswarm/branding';
.container {
input {
&[readonly] {
background-color: $disabled-light;
cursor: default;
}
}
}

91
app/webpacker/css/admin/components/jquery_dialog.scss Normal file
View File

@@ -0,0 +1,91 @@
@import "../variables";
/**
Main colors:
dark: #545454
light: #ccc
*/
.ui-dialog {
border: 0px solid #4a4a4a;
border-radius:5px;
padding:0px;
-moz-box-shadow: 3px 3px 4px #797979;
-webkit-box-shadow: 3px 3px 4px #797979;
box-shadow: 3px 3px 4px #797979;
position: fixed;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#545454')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#545454');
}
.ui-dialog .ui-state-hover {
&.ui-dialog-titlebar-close{
}
}
.ui-dialog .ui-widget-header{
background-image: none;
background-color: #ffffff;
border:0px;
border-radius: 8px;
padding: 0px 5px 0px 5px;
}
.ui-dialog .ui-widget-content{
border: none;
border-radius: 8px;
padding: 0px 50px 30px 50px;
}
.ui-dialog .ui-corner-all{
border-radius: 8px;
}
.ui-state-hover, .ui-widget-header .ui-state-hover, .ui-widget-content .ui-state-hover {
background-color: #ffffff;
background: none;
}
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close {
float: right;
border: none;
background: none;
&:before {
color: #000000;
font-size: 2em;
font-weight: 400;
content: '\00d7';
display: inline;
}
&:hover {
&:before {
color: $warning-red;
}
}
.ui-icon {
&.ui-icon-closethick {
display: none;
}
}
.ui-button-text {
display: none;
}
}
.ui-widget-overlay {
background: #000000;
opacity: 0.5;
position: fixed;
height: 100vh;
width: 100vw;
left: 0px;
top: 0px;
}

63
app/webpacker/css/admin/components/messages.scss Normal file
View File

@@ -0,0 +1,63 @@
@import 'admin/globals/variables';
.errorExplanation {
padding: 5px;
border: 1px solid very-light($color-error, 12);
background-color: very-light($color-error, 6);
border-radius: 3px;
color: very-light($color-error, 30);
margin-bottom: 15px;
h2 {
font-size: 140%;
color: very-light($color-error, 30);
margin-bottom: 5px;
}
p {
padding: 10px 0;
}
ul {
list-style-position: inside;
li {
font-weight: $font-weight-bold;
}
}
}
.flash-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
.flash {
padding: 18px;
text-align: center;
font-size: 120%;
color: $color-1;
font-weight: 600;
&.notice { background-color: rgba($color-notice, 0.8) }
&.success { background-color: rgba($color-success, 0.8) }
&.error { background-color: rgba($color-error, 0.8) }
// Adjust heights to fit main layout dimension (header, navbar...)
&:nth-child(2) { padding: 24px; }
&:nth-child(3) { padding: 20px; }
}
}
.notice:not(.flash) {
padding: 1rem;
margin-bottom: 1.5rem;
background-color: $spree-light-blue;
border-radius: $border-radius;
a {
font-weight: bold;
}
}

175
app/webpacker/css/admin/components/navigation.scss Normal file
View File

@@ -0,0 +1,175 @@
@import 'admin/globals/variables';
// Navigation
//---------------------------------------------------
.inline-menu {
margin: 0;
-webkit-margin-before: 0;
-webkit-padding-start: 0;
}
nav.menu {
ul {
list-style: none;
li {
a {
padding: 10px 0;
display: block;
position: relative;
text-align: left;
border: 1px solid transparent;
text-transform: uppercase;
font-weight: 600;
font-size: 90%;
}
&.active a {
color: $color-2;
border-left-width: 0;
border-bottom-color: $color-2;
}
&:hover a {
color: $color-2;
}
}
}
}
[data-hook="admin_login_navigation_bar"] {
ul {
text-align: right;
li {
padding: 5px 0 5px 10px;
text-align: right;
font-size: 90%;
color: $color-link;
margin-top: 8px;
&[data-hook="user-logged-in-as"] {
width: 50%;
color: $color-body-text;
}
&:hover {
i {
color: $color-2;
}
}
}
}
}
#admin-menu {
background-color: $color-3;
ul {
display: flex;
}
li {
min-width: 90px;
flex-grow: 1;
a {
display: block;
padding: 25px 5px;
color: $color-1 !important;
text-transform: uppercase;
position: relative;
text-align: center;
font-weight: 600;
i {
display: inline;
}
&:hover {
background-color: $color-2;
&:after {
content: '';
position: absolute;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 5px solid $color-2;
bottom: 0px;
margin-bottom: -5px;
left: 50%;
margin-left: -10px;
z-index: 1;
}
}
span.text {
font-weight: 600;
}
}
a::before {
font-weight: normal;
padding-top: 0;
}
.dropdown {
width: 300px;
background-color: $color-3;
width: 200px;
z-index: 100000;
> li {
width: 200px !important;
a:after {
display: none;
}
}
}
&.selected a {
@extend a:hover;
}
}
}
#sub-menu {
background-color: $color-2;
padding-bottom: 0;
li {
a {
display: block;
padding: 12px 20px;
color: $color-1;
text-align: center;
text-transform: uppercase;
position: relative;
font-size: 85%;
}
&.selected a, a:hover {
&:after {
content: '';
position: absolute;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 5px solid $color-2;
bottom: 0px;
margin-bottom: -5px;
left: 50%;
margin-left: -10px;
z-index: 1;
}
}
}
}
#header figure {
margin: 0.25em 0;
}
#login-nav {
line-height: 1.75em;
}

8
app/webpacker/css/admin/components/ng-cloak.scss Normal file
View File

@@ -0,0 +1,8 @@
// https://docs.angularjs.org/api/ng/directive/ngCloak
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
display: none !important;
}

10
app/webpacker/css/admin/components/page_actions.scss Normal file
View File

@@ -0,0 +1,10 @@
.page-actions {
li {
margin-top: 1px;
margin-bottom: 1px;
}
a {
display: inline-block;
}
}

35
app/webpacker/css/admin/components/pagination.scss Normal file
View File

@@ -0,0 +1,35 @@
@import 'admin/globals/variables';
@import "admin/variables";
.pagination {
text-align: center;
margin: 2em 0 1em;
padding: 10px 0;
.page {
padding: 5px 8px;
text-align: center;
display: inline-block;
text-align: center;
&.current {
background-color: $color-2;
border-radius: 3px;
color: $color-1;
}
}
button {
margin: 0 0.35em;
&.active {
background-color: darken($spree-blue, 15%);
cursor: default;
}
&.disabled {
background-color: $disabled_button;
cursor: default;
}
}
}

7
app/webpacker/css/admin/components/per_page_controls.scss Normal file
View File

@@ -0,0 +1,7 @@
.per-page {
float: left;
.per-page-feedback {
margin-left: 1em;
}
}

29
app/webpacker/css/admin/components/product_autocomplete.scss Normal file
View File

@@ -0,0 +1,29 @@
.select2-result-label {
.variant-autocomplete-item {
.variant-details {
padding: 0 10px;
float: left;
}
.variant-image {
margin-top: 5px;
background-color: white;
float: left;
margin-right: 10px;
}
ul.variant-details {
li {
display: inline-block;
&:after {
content: ' / ';
}
&:last-child:after {
content: '';
}
}
}
}
}

31
app/webpacker/css/admin/components/progress.scss Normal file
View File

@@ -0,0 +1,31 @@
@import 'admin/globals/variables';
@import 'admin/globals/mixins';
#progress {
@include border-radius(10px);
position: fixed;
top: -10px;
left: 50%;
z-index: 1000;
opacity: 0.8;
width: 200px;
background-color: $spree-blue;
color: $color-1;
display: none;
font-size: 120%;
font-weight: bold;
line-height: 40px;
margin-left: -100px;
padding-top: 15px;
text-align: center;
text-transform: uppercase;
.spinner {
position: absolute;
left: 50%;
width: 30px;
height: 30px;
top: -5px;
margin-left: -15px;
}
}

21
app/webpacker/css/admin/components/save_bar.scss Normal file
View File

@@ -0,0 +1,21 @@
@import "../variables";
#save-bar {
position: fixed;
width: 100%;
z-index: 100;
bottom: 0px;
left: 0;
padding: 8px 8px;
font-weight: bold;
background-color: $spree-light-blue;
color: $spree-blue;
h5 {
color: $spree-blue;
}
input {
margin-right: 5px;
}
}

28
app/webpacker/css/admin/components/sidebar.scss Normal file
View File

@@ -0,0 +1,28 @@
@import 'admin/globals/variables';
// Sidebar
//---------------------------------------------------
#sidebar {
overflow: visible;
border-top: 1px solid $color-border;
margin-top: 17px;
.sidebar-title {
color: $color-2;
text-transform: uppercase;
text-align: center;
font-size: 14px;
font-weight: 600;
> span {
display: inline;
background: #fff;
padding: 5px 10px;
position: relative;
top: -14px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
}

20
app/webpacker/css/admin/components/simple_modal.scss Normal file
View File

@@ -0,0 +1,20 @@
@import '../variables';
.reveal-modal.simple-modal {
width: 300px;
.close-reveal-modal {
color: $modal-close-button-color;
font-size: 23px;
right: .45rem;
top: .35rem;
:hover {
color: $modal-close-button-hover-color;
}
}
label {
margin-top: 20px;
}
}

36
app/webpacker/css/admin/components/states.scss Normal file
View File

@@ -0,0 +1,36 @@
@import 'admin/globals/variables';
.state {
text-transform: uppercase;
font-size: 80%;
font-weight: 600;
&:before {
content: '';
position: relative;
display: inline-block;
margin-right: 3px;
border-radius: $body-font-size/2;
width: $body-font-size - 4px;
height: $body-font-size - 4px;
}
@each $state in $states {
&.#{$state}:before {
background-color: get-value($states, $states-bg-colors, $state);
// &, a {
// color: get-value($states, $states-text-colors, $state);
// }
}
}
}
table tbody tr {
&[class*="state"] td:first-child {
border-left-width: 3px;
}
&.state-complete td:first-child { border-left-color: $color-success }
&.state-cart td:first-child { border-left-color: very-light($color-notice, 6) }
&.state-canceled td:first-child { border-left-color: $color-error }
}

73
app/webpacker/css/admin/components/stripe_connect_button.scss Normal file
View File

File diff suppressed because one or more lines are too long

41
app/webpacker/css/admin/components/subscriptions_states.scss Normal file
View File

@@ -0,0 +1,41 @@
@import "../variables";
#subscriptions .state {
border-radius: 3px;
text-transform: uppercase;
font-weight: 600;
border: 1px solid transparent;
padding: 2px 5px;
width: 100%;
display: inline-block;
text-align: center;
&:before {
display: none;
}
&.active {
background-color: $spree-green;
&, a { color: #ffffff; }
}
&.paused {
background-color: #ff9300;
&, a { color: #ffffff; }
}
&.canceled {
background-color: #c60f13;
&, a { color: #ffffff; }
}
&.ended {
background-color: #7a7a7a;
&, a { color: #ffffff; }
}
&.pending {
background-color: #7a7a7a;
&, a { color: #ffffff; }
}
}

16
app/webpacker/css/admin/components/table-filter.scss Normal file
View File

@@ -0,0 +1,16 @@
#table-filter {
.field {
input[type="text"], input[type="phone"],
input[type="email"], input[type="number"],
input[type="url"] {
width: 100%;
}
}
.actions {
display: flex;
align-items: center;
justify-content: center;
column-gap: 20px;
}
}

32
app/webpacker/css/admin/components/table_loading.scss Normal file
View File

@@ -0,0 +1,32 @@
@import '../variables';
.row-loading {
opacity: .5;
}
.row-loading-icons {
margin-left: 3em;
position: absolute;
.spinner {
border: 0;
width: 2.3em;
}
i {
font-size: 2.3em;
opacity: .75;
&::before {
vertical-align: top;
}
&.success {
color: $spree-green;
}
&.error {
color: $warning-red;
}
}
}

1
app/webpacker/css/admin/components/timepicker.scss Normal file
View File

@@ -0,0 +1 @@
.ui-timepicker-div.ui-timepicker-oneLine dl dd { width: 25%; }

21
app/webpacker/css/admin/components/todo.scss Normal file
View File

@@ -0,0 +1,21 @@
.todolist{
.todo {
&.done {
.title {
color: #aaaaaa;
a {
color: #aaaaaa;
}
}
i {
color: #aaaaaa;
}
.steps {
display: none;
}
}
}
}

4
app/webpacker/css/admin/components/tooltip.scss Normal file
View File

@@ -0,0 +1,4 @@
#powerTip {
max-width: 240px;
white-space: normal;
}

79
app/webpacker/css/admin/components/wizard_progress.scss Normal file
View File

@@ -0,0 +1,79 @@
@import "../variables";
$color_unselected: #d9d9d9;
$color_selected: $spree-blue;
ul.wizard-progress {
list-style: none;
margin: 15px 0;
padding: 0;
text-align: center;
display: block;
li {
background-color: $color_unselected;
color: #494949;
display: inline-block;
margin: 0;
font-size: 0.9rem;
text-transform: uppercase;
line-height: 30px;
padding: 0 25px 0 40px;
position: relative;
a {
color: #494949;
}
&:first-child {
padding-left: 25px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
&:last-child {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
&:after {
display: none;
}
&:before {
display: none;
}
}
&:before, &:after {
background-color: $color_unselected;
content: "";
display: block;
position: absolute;
}
&:after {
border-radius: 3px;
border-right: 3px solid #fff;
border-top: 3px solid #fff;
height: 21px;
right: -15px;
top: 3px;
transform: rotate(45deg);
width: 21px;
z-index: 5;
}
&:before {
height: 30px;
right: 3px;
width: 20px;
z-index: 6;
}
&.current {
background-color: $color_selected;
color: #fff;
a {
color: #fff;
}
&:after {
background-color: $color_selected;
}
&:before {
background-color: $color_selected;
}
}
}
}