diff --git a/app/views/spree/admin/orders/_filters.html.haml b/app/views/spree/admin/orders/_filters.html.haml index 18b16f9dc3..f328c149ea 100644 --- a/app/views/spree/admin/orders/_filters.html.haml +++ b/app/views/spree/admin/orders/_filters.html.haml @@ -54,6 +54,6 @@ .actions.filter-actions %a.button.icon-search{'ng-click' => 'fetchResults()'} = t(:filter_results) - %a.button{'ng-click' => 'clearFilters()', "id": "clear_filters_button", "class": ("secondary" if feature?(:admin_style_v2, spree_current_user)) } + %a.button{'ng-click' => 'clearFilters()', "id": "clear_filters_button"} = t(:clear_filters) diff --git a/app/views/spree/admin/orders/index.html.haml b/app/views/spree/admin/orders/index.html.haml index 538298ba26..33224c8957 100644 --- a/app/views/spree/admin/orders/index.html.haml +++ b/app/views/spree/admin/orders/index.html.haml @@ -100,17 +100,17 @@ %td.align-center %span{'ng-bind-html' => 'order.display_total'} %td.actions - .flex - %div.row-loading-icons - %div{ng: {show: 'rowStatus[order.id] == "loading"', cloak: true}, style: "width: 30px; height: 30px;"} - = render partial: "components/spinner" - %i.success.icon-ok-sign{ng: {show: 'rowStatus[order.id] == "success"'} } - %i.error.icon-remove-sign.with-tip{ng: {show: 'rowStatus[order.id] == "error"'}, 'ofn-with-tip' => t('.order_not_updated')} - %a.icon_link.with-tip.icon-edit.no-text{'ng-href' => '{{order.edit_path}}', 'data-action' => 'edit', 'ofn-with-tip' => t('.edit')} - %div{'ng-if' => 'order.ready_to_ship'} - %button.icon-road.icon_link.with-tip.no-text{'ng-click' => 'shipOrder(order)', rel: 'nofollow', 'ofn-with-tip' => t('.ship')} - %div{'ng-if' => 'order.ready_to_capture'} - %button.icon-capture.icon_link.no-text{'ng-click' => 'capturePayment(order)', rel: 'nofollow', 'ofn-with-tip' => t('.capture')} + %div.row-loading-icons + %div{ng: {show: 'rowStatus[order.id] == "loading"', cloak: true}, style: "width: 30px; height: 30px;"} + = render partial: "components/spinner" + %i.success.icon-ok-sign{ng: {show: 'rowStatus[order.id] == "success"'} } + %i.error.icon-remove-sign.with-tip{ng: {show: 'rowStatus[order.id] == "error"'}, 'ofn-with-tip' => t('.order_not_updated')} + %a.icon_link.with-tip.icon-edit.no-text{'ng-href' => '{{order.edit_path}}', 'data-action' => 'edit', 'ofn-with-tip' => t('.edit')} + %div{'ng-if' => 'order.ready_to_ship'} + %button.icon-road.icon_link.with-tip.no-text{'ng-click' => 'shipOrder(order)', rel: 'nofollow', 'ofn-with-tip' => t('.ship')} + %div{'ng-if' => 'order.ready_to_capture'} + %button.icon-capture.icon_link.no-text{'ng-click' => 'capturePayment(order)', rel: 'nofollow', 'ofn-with-tip' => t('.capture')} + .sixteen.columns.alpha#loading{ 'ng-show' => 'RequestMonitor.loading' } = render partial: "components/admin_spinner" %h1 diff --git a/app/webpacker/css/admin/v2/components/buttons.scss b/app/webpacker/css/admin/v2/components/buttons.scss deleted file mode 100644 index 37aadada0e..0000000000 --- a/app/webpacker/css/admin/v2/components/buttons.scss +++ /dev/null @@ -1,66 +0,0 @@ -/* Overide buttons.scss app/webpacker/css/admin/components/buttons.scss */ - -@mixin backgroundAndBorder($color) { - background-color: $color; - border: 2px solid $color; -} - -input[type="submit"], -select[type="submit"], -.select2-container-multi [type="submit"].select2-choices, -input[type="button"], -select[type="button"], -.select2-container-multi [type="button"].select2-choices, -button, -.button, -.actions a:not([class*="icon-"]), -.admin__section-header .ofn-drop-down // Same behavior as the button -{ - &.disabled, - &[disabled] { - @include backgroundAndBorder($v2-light-grey); - } - - &:not(.disabled):not([disabled]):not(.secondary) { - // Change the color of the button only if it's not disabled - @include backgroundAndBorder($v2-blue-light); - - &:hover { - @include backgroundAndBorder($v2-blue); - box-shadow: $v2-box-shadow; - } - } - - &.secondary { - background-color: $white; - border: 2px solid $v2-blue-light; - color: $v2-blue-light; - - &:hover { - background-color: $v2-blue-lightest; - color: $v2-blue; - box-shadow: $v2-box-shadow; - } - } - - &.active { - @include backgroundAndBorder($v2-blue); - } -} - -#table-filter .actions { - /* used to draw a line on the right and left of the actions buttons - We can then remove the dropshadow on the buttons */ - &:before, - &:after { - background-color: $v2-light-grey; // same color as the border of the fieldset. see forms.scss - height: 1px; - content: attr(data-initials); - flex-grow: 1; // make the line as long as it can - } -} - -#table-filter fieldset:has(.actions) { - // do not apply border to filter actions as it's drawn by the #table-filter .actions before and after pseudo elements - border-bottom: 0; -} diff --git a/app/webpacker/css/admin/v2/components/progress.scss b/app/webpacker/css/admin/v2/components/progress.scss deleted file mode 100644 index e9b6450c30..0000000000 --- a/app/webpacker/css/admin/v2/components/progress.scss +++ /dev/null @@ -1,9 +0,0 @@ -/* Overide app/webpacker/css/admin/components/progress.scss file */ - -#progress { - background-color: $v2-blue; -} - -#loading { - color: $v2-blue; -} diff --git a/app/webpacker/css/admin/v2/components/tables.scss b/app/webpacker/css/admin/v2/components/tables.scss deleted file mode 100644 index 8f40899bbe..0000000000 --- a/app/webpacker/css/admin/v2/components/tables.scss +++ /dev/null @@ -1,75 +0,0 @@ -/* Overide tables.scss app/webpacker/css/admin/components/tables.scss */ - -table thead th { - background-color: $v2-medium-light-grey; - border: none; - color: $v2-blue; - text-transform: capitalize; - font-size: 13px; - - a { - border: none; - color: $v2-blue; - } -} - -table tbody tr { - &:first-child th, - &:first-child td { - border-top: none; // Don't show the top border of the first row - } - td:not(:first-child) { - border-left: none; // Only show left border on the first cells, as it indicates the order state by its color - } - - td { - border-bottom: none; // By default, do not show the border of the cells - border-right: none; - border-top: none; - - border-bottom: 2px solid $v2-medium-light-grey; - &.actions { - border-bottom: 2px solid $v2-medium-light-grey !important; // needs to be important because of already defined with important - } - > .flex { - column-gap: 10px; - } - } - &.even, - &.odd { - td { - background-color: transparent; // Do not use odd and even colors for background - } - } -} - -table th.actions, -table td.actions { - // Special for icons in the actions column - [class*="icon-"] { - color: $v2-blue; - &.no-text { - border: 2px solid $v2-blue-light; - background-color: $v2-blue-lightest; - - &:hover { - border-color: $v2-blue; - background-color: $v2-blue-light; - box-shadow: $v2-box-shadow; - - &:before { - color: white; - } - } - } - } -} - -table#listing_orders td { - // When the table is the listing of orders, we need to increase the height of the cells - padding: 20px 0; - - &.actions { - padding-left: 20px; - } -} diff --git a/app/webpacker/css/admin/v2/main.scss b/app/webpacker/css/admin/v2/main.scss index 60260a9bc9..16c8b4370e 100644 --- a/app/webpacker/css/admin/v2/main.scss +++ b/app/webpacker/css/admin/v2/main.scss @@ -1,13 +1,5 @@ @import "variables.scss"; -@import "shared/typography.scss"; body.admin.admin-v2 { @import "navigation.scss"; - @import "plugins/select2.scss"; - @import "plugins/powertip.scss"; - @import "plugins/flatpickr-customization.scss"; - @import "shared/forms.scss"; - @import "components/buttons.scss"; - @import "components/tables.scss"; - @import "components/progress.scss"; } diff --git a/app/webpacker/css/admin/v2/navigation.scss b/app/webpacker/css/admin/v2/navigation.scss index d0f5b641c1..714a4560a6 100644 --- a/app/webpacker/css/admin/v2/navigation.scss +++ b/app/webpacker/css/admin/v2/navigation.scss @@ -3,8 +3,14 @@ li { color: $v2-medium-dark-grey; - i { - @include v2-link-color(); + &:hover { + a, i { + color: $v2-orange; + } + } + + a { + color: $v2-medium-dark-grey; } } } @@ -21,8 +27,7 @@ display: none; } - li a:hover, - li.selected a { + li a:hover, li.selected a { background-color: $v2-orange-light; span { @@ -35,6 +40,7 @@ } } + #sub-menu { background-color: $v2-orange-light; @@ -42,10 +48,10 @@ font-size: 100%; } - li a:hover, - li.selected a { + li a:hover, li.selected a { text-shadow: 1px 1px 9px $v2-orange; background-color: lighten($v2-orange-light, 7%); + &:after { display: none; } @@ -60,3 +66,4 @@ color: $v2-medium-dark-grey; } } + diff --git a/app/webpacker/css/admin/v2/plugins/flatpickr-customization.scss b/app/webpacker/css/admin/v2/plugins/flatpickr-customization.scss deleted file mode 100644 index 7ebd19741c..0000000000 --- a/app/webpacker/css/admin/v2/plugins/flatpickr-customization.scss +++ /dev/null @@ -1,46 +0,0 @@ -/* Override flatpickr styles: app/webpacker/css/admin/plugins/flatpickr-customization.scss */ - -.flatpickr-calendar { - &.arrowTop::after { - border-bottom-color: $v2-blue-light; - } - .flatpickr-months .flatpickr-month, - .flatpickr-current-month .flatpickr-monthDropdown-months { - background: $v2-blue-light; - color: white; - input { - color: white; - } - } - - .flatpickr-weekdays { - background: $v2-blue-light; - - .flatpickr-weekday { - background: $v2-blue-light; - color: white; - } - } - - .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: $v2-blue-light; - border-color: $v2-blue-light; - } -} diff --git a/app/webpacker/css/admin/v2/plugins/powertip.scss b/app/webpacker/css/admin/v2/plugins/powertip.scss deleted file mode 100644 index dedef2bf60..0000000000 --- a/app/webpacker/css/admin/v2/plugins/powertip.scss +++ /dev/null @@ -1,31 +0,0 @@ -/* Overide file powertip.scss app/webpacker/css/admin/v2/plugins/powertip.scss */ - -#powerTip { - background-color: $v2-blue; - - &.n:before, - &.ne:before, - &.nw:before { - border-top-color: $v2-blue; - } - - &.e:before { - border-right-color: $v2-blue; - } - &.s:before, - &.se:before, - &.sw:before { - border-bottom-color: $v2-blue; - } - &.w:before { - border-left-color: $v2-blue; - } - &.ne:before, - &.se:before { - border-right-color: $v2-blue; - } - &.nw:before, - &.sw:before { - border-right-color: $v2-blue; - } -} diff --git a/app/webpacker/css/admin/v2/plugins/select2.scss b/app/webpacker/css/admin/v2/plugins/select2.scss deleted file mode 100644 index e0096e701e..0000000000 --- a/app/webpacker/css/admin/v2/plugins/select2.scss +++ /dev/null @@ -1,70 +0,0 @@ -/* Override select2 styles app/webpacker/css/admin/plugins/select2.scss */ - -.select2-container { - .select2-choice { - background-color: transparent; - border: 1px solid $v2-light-grey !important; - color: $v2-medium-grey !important; - padding-left: 5px; - font-size: 13px; - padding-top: 3px; - - .select2-arrow { - color: $v2-medium-grey; - } - } - - &.select2-container-active, - &:hover { - .select2-choice { - background-color: transparent !important; - border-color: $v2-medium-grey !important; - } - } - - &.select2-dropdown-open.select2-container-active { - &:not(.select2-drop-above) { - .select2-choice { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - } - } - &.select2-drop-above .select.select2-choice { - border-top-left-radius: 0; - border-top-right-radius: 0; - } - } -} - -.select2-container-multi { - .select2-choices { - border-color: $v2-medium-grey !important; - .select2-search-choice { - background-color: $v2-blue-light; - } - } -} - -.select2-drop { - border-color: $v2-medium-grey; -} - -.select2-search { - color: $v2-medium-grey; -} - -.select2-results { - margin-right: 0; - li { - .select2-result-label { - color: $v2-medium-grey; - } - &.select2-highlighted { - background-color: $v2-blue; - } - &.select2-no-results, - &.select2-searching { - color: $v2-medium-grey; - } - } -} diff --git a/app/webpacker/css/admin/v2/shared/forms.scss b/app/webpacker/css/admin/v2/shared/forms.scss deleted file mode 100644 index 86ebddd051..0000000000 --- a/app/webpacker/css/admin/v2/shared/forms.scss +++ /dev/null @@ -1,55 +0,0 @@ -/* Overide forms.scss app/webpacker/css/admin/shared/forms.scss */ - -input[type="text"], -.select2-container-multi .select2-choices, -.select2-search input, -.select2-search select, -select, -input[type="password"], -input[type="email"], -input[type="url"], -input[type="tel"], -input[type="date"], -input[type="datetime"], -input[type="time"], -input[type="number"], -textarea, -fieldset { - // Change the color of all inputs - color: $v2-medium-grey; - border-color: $v2-light-grey !important; - - &:focus { - border-color: $v2-medium-grey; - } -} - -fieldset label { - color: $v2-medium-grey; -} - -fieldset legend { - color: $v2-blue; -} - -input[type="checkbox"], -input[type="radio"] { - accent-color: $v2-blue; -} - -fieldset .filter-actions { - button, - .button, - input[type="submit"] { - box-shadow: none; - width: 200px; // adjust at the same size in order to center them. Not ideal but works for now. - - &:first-of-type { - margin-right: 0; // don't see any reason to have a margin right on the first button as it's managed by the flexbox - } - - &:hover { - box-shadow: $v2-box-shadow; - } - } -} diff --git a/app/webpacker/css/admin/v2/shared/typography.scss b/app/webpacker/css/admin/v2/shared/typography.scss deleted file mode 100644 index f0dcc73983..0000000000 --- a/app/webpacker/css/admin/v2/shared/typography.scss +++ /dev/null @@ -1,18 +0,0 @@ -// Overide app/webpacker/css/admin/shared/typography.scss - -@mixin v2-link-color() { - color: $v2-blue; - border-color: $v2-blue; - &:hover { - color: $v2-blue-dark; - border-color: $v2-blue-dark; - } -} - -body.admin.admin-v2 { - color: $v2-body-grey; - - a:not(.button) { - @include v2-link-color(); - } -} diff --git a/app/webpacker/css/admin/v2/variables.scss b/app/webpacker/css/admin/v2/variables.scss index ddaba6a9f0..1eba6e0a5c 100644 --- a/app/webpacker/css/admin/v2/variables.scss +++ b/app/webpacker/css/admin/v2/variables.scss @@ -1,23 +1,9 @@ // Should finally replace (or at least complete) the file /admin/globale/variables.scss -$v2-orange: #f27052; -$v2-orange-light: #f5947d; -$v2-orange-lighter: #f8b7a8; -$v2-orange-lightest: #fcdbd4; +$v2-orange: #F27052; +$v2-orange-light: #F5947D; +$v2-orange-lighter: #F8B7A8; +$v2-orange-lightest: #FCDBD4; $v2-dark-grey: #333333; $v2-medium-dark-grey: #444444; -$v2-body-grey: #666666; -$v2-medium-grey: #717171; -$v2-medium-light-grey: #e6e6e6; -$v2-light-grey: #e7e7e7; - -$v2-blue: #017a9a; -$v2-blue-dark: #005e7a; -$v2-blue-light: #0096ad; -$v2-blue-lightest: #e6f7fa; // Could be used as a background color for the action icons - -$v2-green: #019854; -$v2-green-light: #01cb70; - -$v2-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); // Default box shadow for actions stuff