Apparence backoffice

ShopBundle/Controller/Backend/MerchantController.php

@@ -71,6 +71,7 @@ class MerchantController extends AdminController
                         $response = parent::editAction() ;
 
                         if ($response instanceof RedirectResponse) {
+
                                 $referer = $this->request->headers->get('referer');
                                 return new RedirectResponse($referer);
                         }

ShopBundle/Controller/Backend/OrderController.php

@@ -5,13 +5,11 @@ namespace Lc\ShopBundle\Controller\Backend;
 use Doctrine\ORM\EntityManagerInterface;
 use EasyCorp\Bundle\EasyAdminBundle\Event\EasyAdminEvents;
 use FOS\UserBundle\Model\UserManagerInterface;
-use Lc\ShopBundle\Context\MerchantUtilsInterface;
 use Lc\ShopBundle\Context\OrderPaymentInterface;
 use Lc\ShopBundle\Context\OrderProductInterface;
 use Lc\ShopBundle\Context\OrderReductionCartInterface;
 use Lc\ShopBundle\Context\OrderReductionCreditInterface;
 use Lc\ShopBundle\Context\OrderShopInterface;
-use Lc\ShopBundle\Context\OrderUtilsInterface;
 use Lc\ShopBundle\Context\UserInterface;
 use Lc\ShopBundle\Form\Backend\Order\AddPoductToOrderType;
 use Lc\ShopBundle\Form\Backend\Order\AddRedeliveryOrderProductType;
@@ -21,21 +19,21 @@ use Lc\ShopBundle\Form\Backend\Order\DeleteOrderReductionCreditType;
 use Lc\ShopBundle\Form\Backend\Order\OrderDeliveryAddressType;
 use Lc\ShopBundle\Form\Backend\Order\OrderInvoiceAddressType;
 use Lc\ShopBundle\Form\Backend\Order\OrderPaymentType;
-use Lc\ShopBundle\Form\Backend\Order\OrderProductsActionType;
 use Lc\ShopBundle\Form\Backend\Order\OrderProductsType;
 use Lc\ShopBundle\Form\Backend\Order\AddOrderReductionCartType;
 use Lc\ShopBundle\Form\Backend\Order\AddOrderReductionCreditType;
+use Lc\ShopBundle\Form\Backend\Order\OrderSendPaymentLink;
 use Lc\ShopBundle\Form\Backend\Order\OrderStatusType;
 use Lc\ShopBundle\Model\CreditHistory;
 use Lc\ShopBundle\Model\OrderStatus;
-use Lc\ShopBundle\Services\CreditUtils;
+use Lc\ShopBundle\Services\MailUtils;
 use Lc\ShopBundle\Services\Utils;
 use Lc\ShopBundle\Services\UtilsManager;
 use Mailjet\MailjetSwiftMailer\SwiftMailer\MailjetTransport;
-use Proxies\__CG__\App\Entity\OrderProduct;
 use Symfony\Bridge\Doctrine\Form\Type\EntityType;
 use Symfony\Component\Form\Extension\Core\Type\SubmitType;
 use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Generator\UrlGeneratorInterface;
 use Symfony\Component\Security\Core\Security;
 use Symfony\Contracts\Translation\TranslatorInterface;
 
@@ -43,10 +41,12 @@ use Symfony\Contracts\Translation\TranslatorInterface;
 class OrderController extends AdminController
 {
         protected $creditUtils;
+        protected $mailUtils;
 
         public function __construct(Security $security, UserManagerInterface $userManager, EntityManagerInterface $em, MailjetTransport $mailjetTransport, UtilsManager $utilsManager, TranslatorInterface $translator)
         {
                 $this->creditUtils = $utilsManager->getCreditUtils();
+                $this->mailUtils = $utilsManager->getMailUtils();
                 parent::__construct($security, $userManager, $em, $mailjetTransport, $utilsManager, $translator);
         }
 
@@ -177,8 +177,6 @@ class OrderController extends AdminController
         }
 
 
-
-
         public function orderInvoiceAddressAction()
         {
 
@@ -397,6 +395,34 @@ class OrderController extends AdminController
                 return $this->createOrderAjaxReponse($orderShop);
         }
 
+        public function orderSendPaymentLinkAction(){
+                $orderShop = $this->getOrderShopEntity();
+                $formOrderSendPaymentLink = $this->createForm(OrderSendPaymentLink::class);
+                $formOrderSendPaymentLink->handleRequest($this->request);
+
+
+                if ($formOrderSendPaymentLink->isSubmitted() && $formOrderSendPaymentLink->isValid()) {
+                        $orderShop->setOrderAllowByAdmin(true);
+                        $this->em->persist($orderShop);
+                        $this->em->flush();
+                        $this->mailUtils->send([
+                                MailUtils::SUBJECT => 'Régler votre commande',
+                                MailUtils::TO_EMAIL => $orderShop->getUser()->getEmail(),
+                                MailUtils::TO_NAME => $orderShop->getUser()->getName(),
+                                MailUtils::CONTENT_TEMPLATE => 'mail/order-payment-link',
+                                MailUtils::CONTENT_DATA => [
+                                        'order_shop' => $orderShop,
+                                        'link' => $this->generateUrl('frontend_order_payment',array(),UrlGeneratorInterface::ABSOLUTE_URL)
+                                ],
+                        ]);
+
+                        $this->utils->addFlash('success', 'success.order.removeReductionCredit');
+                } else {
+                        $this->utils->addFlash('error', $formOrderSendPaymentLink->getErrors());
+                }
+                return $this->createOrderAjaxReponse($orderShop);
+        }
+
         protected function createOrderAjaxReponse(OrderShopInterface $order)
         {
                 $response['flashMessages'] = $this->utils->getFlashMessages();
@@ -426,9 +452,12 @@ class OrderController extends AdminController
                                         $parameters['form_order_products'] = $this->createCustomForm(OrderProductsType::class, 'orderProducts', $parameters)->createView();
                                         $parameters['form_order_status'] = $this->createCustomForm(OrderStatusType::class, 'orderStatus', $parameters)->createView();
                                         $parameters['form_order_invoice_address'] = $this->createCustomForm(OrderInvoiceAddressType::class, 'orderInvoiceAddress', $parameters)->createView();
+                                        $parameters['form_order_send_payment_link'] = $this->createCustomForm(OrderSendPaymentLink::class, 'orderSendPaymentLink', $parameters)->createView();
                                         break;
+                                case OrderStatus::ALIAS_ERROR_PAYMENT_ONLINE :
                                 case OrderStatus::ALIAS_WAITING_PAYMENT_CREDIT :
                                 case OrderStatus::ALIAS_WAITING_PAYMENT_ONLINE :
+                                        $parameters['form_order_send_payment_link'] = $this->createCustomForm(OrderSendPaymentLink::class, 'orderSendPaymentLink', $parameters)->createView();
                                         $parameters['form_order_payment'] = $this->createCustomForm(OrderPaymentType::class, 'orderPayment', $parameters, false)->createView();
                                         $parameters['form_delete_order_payment'] = $this->createCustomForm(DeleteOrderPaymentType::class, 'deleteOrderPayment', $parameters)->createView();
                                         $parameters['form_order_status'] = $this->createCustomForm(OrderStatusType::class, 'orderStatus', $parameters)->createView();
@@ -472,15 +501,15 @@ class OrderController extends AdminController
 
                 if (!$user instanceof UserInterface) return $user;
                 else {
-                        $orderShopUser = $this->em->getRepository(OrderShopInterface::class)->findCartCurrent(['user'=>$user]);
-                        if($orderShopUser){
+                        $orderShopUser = $this->em->getRepository(OrderShopInterface::class)->findCartCurrent(['user' => $user]);
+                        if ($orderShopUser) {
                                 $this->utils->addFlash('info', 'error.order.otherOrderAlreadyExist');
                                 return $this->redirectToRoute('easyadmin', [
                                         'action' => 'edit',
                                         'entity' => $this->entity['name'],
                                         'id' => $orderShopUser->getId()
                                 ]);
-                        }else {
+                        } else {
 
 
                                 $orderShop = $this->orderUtils->createOrderShop(array(

ShopBundle/Controller/Backend/UserController.php

@@ -2,8 +2,11 @@
 
 namespace Lc\ShopBundle\Controller\Backend;
 
+use App\Form\Backend\Common\AddressType;
 use FOS\UserBundle\Doctrine\UserManager;
 use FOS\UserBundle\Model\UserManagerInterface ;
+use Lc\ShopBundle\Context\AddressInterface;
+use Lc\ShopBundle\Model\Address;
 
 class UserController extends AdminController
 {
@@ -24,4 +27,6 @@ class UserController extends AdminController
                 $this->userManager->updateUser($user, false);
                 parent::updateEntity($user);
         }
+
+
 }

ShopBundle/Form/Backend/Common/AddressType.php

@@ -2,6 +2,7 @@
 
 namespace Lc\ShopBundle\Form\Backend\Common;
 
+use Lc\ShopBundle\Model\Address;
 use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
 use Symfony\Component\Form\Extension\Core\Type\CollectionType;
 use Symfony\Component\Form\Extension\Core\Type\TextareaType;
@@ -25,14 +26,14 @@ class AddressType extends AbstractType
 
         public function buildForm(FormBuilderInterface $builder, array $options)
         {
+                dump($options);
                 $builder
                         ->add('title', TextType::class, ['label' => 'Titre'])
                         ->add('type', ChoiceType::class, [
                                 'label' => 'Type',
                                 'choices' => [
-                                        '--' => '',
-                                        'Particulier' => 'individual',
-                                        'Personne morale' => 'legal-person',
+                                        'field.Address.typeOptions.' . Address::TYPE_INDIVIDUAL => Address::TYPE_INDIVIDUAL,
+                                        'field.Address.typeOptions.' . Address::TYPE_LEGAL_PERSON => Address::TYPE_LEGAL_PERSON
                                 ]
                         ])
                         ->add('civility', ChoiceType::class, [
@@ -44,15 +45,17 @@ class AddressType extends AbstractType
                                         'Homme' => 0,
                                 ],
                         ])
-
                         ->add('lastname', TextType::class, ['required' => false])
                         ->add('firstname', TextType::class, ['required' => false])
                         ->add('address', TextareaType::class)
                         ->add('zip', TextType::class)
                         ->add('city', TextType::class)
-                        ->add('country', TextType::class)
                         ->add('phone', CollectionType::class, [
                                 'allow_add'=>true,
+                                'allow_delete'=>true,
+                                'entry_options'  => [
+                                        'label'=>false,
+                                ],
                                 'required' => false
                         ])
                         ->add('company', TextType::class, ['required' => false])
@@ -65,7 +68,8 @@ class AddressType extends AbstractType
         {
                 $resolver->setDefaults([
                         'label' => false,
-                        'data_class' => $this->em->getClassMetadata(AddressInterface::class)->getName()
+                        'data_class' => $this->em->getClassMetadata(AddressInterface::class)->getName(),
+                        'translation_domain' => 'lcshop'
                 ]);
         }
 }

ShopBundle/Form/Backend/Merchant/MerchantConfigType.php

@@ -30,7 +30,9 @@ class MerchantConfigType extends AbstractType
         {
 
                 $builder->addEventListener(FormEvents::PRE_SET_DATA, function (FormEvent $event) {
+
                         $form = $event->getForm();
+
                         $merchantConfig = $event->getData();
 
                         if ($merchantConfig) {

ShopBundle/Form/Backend/Merchant/MerchantConfigsType.php

@@ -0,0 +1,68 @@
+<?php
+
+namespace Lc\ShopBundle\Form\Backend\Merchant;
+
+use App\Entity\MerchantConfig;
+use CKSource\Bundle\CKFinderBundle\Form\Type\CKFinderFileChooserType;
+use Doctrine\Common\Collections\ArrayCollection;
+use Lc\ShopBundle\Context\MerchantConfigInterface;
+use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
+use Symfony\Component\Form\Extension\Core\Type\CollectionType;
+use Symfony\Component\Form\Extension\Core\Type\DateType;
+use Symfony\Component\Form\Extension\Core\Type\HiddenType;
+use Symfony\Component\Form\Extension\Core\Type\TextType;
+use Doctrine\ORM\EntityManagerInterface;
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\FormBuilderInterface;
+use Symfony\Component\Form\FormEvent;
+use Symfony\Component\Form\FormEvents;
+use Symfony\Component\OptionsResolver\OptionsResolver;
+use Symfony\Component\Security\Core\Security;
+use Vich\UploaderBundle\Form\Type\VichImageType;
+
+class MerchantConfigsType extends AbstractType
+{
+        protected $em;
+
+        public function __construct(EntityManagerInterface $entityManager, Security $security)
+        {
+                $this->em = $entityManager;
+        }
+
+        public function buildForm(FormBuilderInterface $builder, array $options)
+        {
+
+                $builder->addEventListener(FormEvents::PRE_SET_DATA, function (FormEvent $event) {
+
+                        $builder = $event->getForm()->getParent();
+
+                        // Reindex collection using id
+                        $indexedCollection = new ArrayCollection();
+                        foreach ($event->getData() as $collectionItem) {
+                                $indexedCollection->set($collectionItem->getName(), $collectionItem);
+                        }
+
+
+                        $builder->add('merchantConfigs', CollectionType::class, [
+                                'translation_domain' => 'lcshop',
+                                'entry_type'=> MerchantConfigType::class,
+                                'data'=>$indexedCollection,
+                                'required' => false,
+                                'allow_add'=> false,
+                                'allow_delete'=>false,
+                                'by_reference'=>false
+                        ]);
+
+
+                });
+
+        }
+
+        public function configureOptions(OptionsResolver $resolver)
+        {
+                $resolver->setDefaults([
+                        'label' => false,
+                ]);
+        }
+}
+

ShopBundle/Form/Backend/Order/OrderSendPaymentLink.php

@@ -0,0 +1,57 @@
+<?php
+
+namespace Lc\ShopBundle\Form\Backend\Order;
+
+
+use Doctrine\ORM\EntityManagerInterface;
+use Lc\ShopBundle\Context\OrderPaymentInterface;
+use Lc\ShopBundle\Context\OrderShopInterface;
+use Lc\ShopBundle\Model\OrderPayment;
+use Lc\ShopBundle\Services\Utils;
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Extension\Core\Type\ButtonType;
+use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
+use Symfony\Component\Form\Extension\Core\Type\DateType;
+use Symfony\Component\Form\Extension\Core\Type\HiddenType;
+use Symfony\Component\Form\Extension\Core\Type\MoneyType;
+use Symfony\Component\Form\Extension\Core\Type\NumberType;
+use Symfony\Component\Form\Extension\Core\Type\TextareaType;
+use Symfony\Component\Form\Extension\Core\Type\TextType;
+use Symfony\Component\Form\FormBuilderInterface;
+use Symfony\Component\OptionsResolver\OptionsResolver;
+
+class OrderSendPaymentLink extends AbstractType
+{
+        protected $em;
+
+        public function __construct(EntityManagerInterface $em)
+        {
+                $this->em = $em;
+        }
+
+        public function buildForm(FormBuilderInterface $builder, array $options)
+        {
+                $builder
+
+                        ->add('message', TextareaType::class, array(
+                                'mapped'=>false
+                        ))
+                        ->add('send', ButtonType::class, array(
+                                'label' => 'action.send'
+                        ))
+
+                        ->add('goto', ButtonType::class, array(
+                                'label' => 'action.goto'
+                        ));
+
+
+        }
+
+        public function configureOptions(OptionsResolver $resolver)
+        {
+                $resolver->setDefaults([
+                        'data_class' => $this->em->getClassMetadata(OrderShopInterface::class)->getName(),
+                        'translation_domain' => 'lcshop'
+                ]);
+        }
+}

ShopBundle/Model/Address.php

@@ -9,6 +9,10 @@ use Doctrine\ORM\Mapping as ORM;
  */
 abstract class Address extends AbstractEntity
 {
+
+        const TYPE_INDIVIDUAL = 'individual';
+        const TYPE_LEGAL_PERSON = 'legal-person';
+
         /**
          * @ORM\ManyToOne(targetEntity="Lc\ShopBundle\Context\UserInterface", inversedBy="addresses")
          * @ORM\JoinColumn(nullable=true)

ShopBundle/Model/Document.php

@@ -12,10 +12,10 @@ use Lc\ShopBundle\Context\FilterMerchantInterface;
  */
 abstract class Document extends AbstractDocumentEntity implements FilterMerchantInterface
 {
-        const TYPE_INVOICE = 'invoice' ;
-        const TYPE_QUOTATION = 'quotation' ;
-        const TYPE_PURCHASE_ORDER = 'purchase-order' ;
-        const TYPE_DELIVERY_NOTE = 'delivery-note' ;
+        const TYPE_INVOICE = 'invoice';
+        const TYPE_QUOTATION = 'quotation';
+        const TYPE_PURCHASE_ORDER = 'purchase-order';
+        const TYPE_DELIVERY_NOTE = 'delivery-note';
 
         /**
          * @ORM\ManyToOne(targetEntity="Lc\ShopBundle\Context\MerchantInterface")
@@ -85,6 +85,11 @@ abstract class Document extends AbstractDocumentEntity implements FilterMerchant
                 $this->orderShops = new ArrayCollection();
         }
 
+        public function __toString()
+        {
+                return $this->getReference();
+        }
+
         public function getMerchant(): ?Merchant
         {
                 return $this->merchant;
@@ -99,17 +104,14 @@ abstract class Document extends AbstractDocumentEntity implements FilterMerchant
 
         public function getLabel()
         {
-                if($this->getType() == self::TYPE_INVOICE) {
-                        return 'Facture' ;
-                }
-                elseif($this->getType() == self::TYPE_QUOTATION) {
-                        return 'Devis' ;
-                }
-                elseif($this->getType() == self::TYPE_PURCHASE_ORDER) {
-                        return 'Bon de commande' ;
-                }
-                elseif($this->getType() == self::TYPE_DELIVERY_NOTE) {
-                        return 'Bon de livraison' ;
+                if ($this->getType() == self::TYPE_INVOICE) {
+                        return 'Facture';
+                } elseif ($this->getType() == self::TYPE_QUOTATION) {
+                        return 'Devis';
+                } elseif ($this->getType() == self::TYPE_PURCHASE_ORDER) {
+                        return 'Bon de commande';
+                } elseif ($this->getType() == self::TYPE_DELIVERY_NOTE) {
+                        return 'Bon de livraison';
                 }
         }
 

ShopBundle/Model/User.php

@@ -114,7 +114,7 @@ abstract class User extends UserModelFOS
 
         public function getName()
         {
-                return strtoupper($this->getLastname()).' '.$this->getFirstname();
+                return $this->getFirstname().' '.strtoupper($this->getLastname());
         }
 
         public function setEmail($email)

ShopBundle/Resources/public/css/backend/bootstrap/bootstrap-reboot.css

@@ -0,0 +1,382 @@
+/*!
+ * Bootstrap Reboot v4.3.1 (https://getbootstrap.com/)
+ * Copyright 2011-2019 The Bootstrap Authors
+ * Copyright 2011-2019 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
+ */
+/* line 19, ../../../sass/backend/bootstrap/_reboot.scss */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* line 25, ../../../sass/backend/bootstrap/_reboot.scss */
+html {
+  font-family: sans-serif;
+  line-height: 1.15;
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* line 35, ../../../sass/backend/bootstrap/_reboot.scss */
+article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
+  display: block;
+}
+
+/* line 46, ../../../sass/backend/bootstrap/_reboot.scss */
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #212529;
+  text-align: left;
+  background-color: #fff;
+}
+
+/* line 62, ../../../sass/backend/bootstrap/_reboot.scss */
+[tabindex="-1"]:focus {
+  outline: 0 !important;
+}
+
+/* line 72, ../../../sass/backend/bootstrap/_reboot.scss */
+hr {
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+}
+
+/* line 88, ../../../sass/backend/bootstrap/_reboot.scss */
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+
+/* line 97, ../../../sass/backend/bootstrap/_reboot.scss */
+p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+/* line 110, ../../../sass/backend/bootstrap/_reboot.scss */
+abbr[title],
+abbr[data-original-title] {
+  text-decoration: underline;
+  text-decoration: underline dotted;
+  cursor: help;
+  border-bottom: 0;
+  text-decoration-skip-ink: none;
+}
+
+/* line 119, ../../../sass/backend/bootstrap/_reboot.scss */
+address {
+  margin-bottom: 1rem;
+  font-style: normal;
+  line-height: inherit;
+}
+
+/* line 125, ../../../sass/backend/bootstrap/_reboot.scss */
+ol,
+ul,
+dl {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+/* line 132, ../../../sass/backend/bootstrap/_reboot.scss */
+ol ol,
+ul ul,
+ol ul,
+ul ol {
+  margin-bottom: 0;
+}
+
+/* line 139, ../../../sass/backend/bootstrap/_reboot.scss */
+dt {
+  font-weight: 700;
+}
+
+/* line 143, ../../../sass/backend/bootstrap/_reboot.scss */
+dd {
+  margin-bottom: .5rem;
+  margin-left: 0;
+}
+
+/* line 148, ../../../sass/backend/bootstrap/_reboot.scss */
+blockquote {
+  margin: 0 0 1rem;
+}
+
+/* line 152, ../../../sass/backend/bootstrap/_reboot.scss */
+b,
+strong {
+  font-weight: bolder;
+}
+
+/* line 157, ../../../sass/backend/bootstrap/_reboot.scss */
+small {
+  font-size: 80%;
+}
+
+/* line 166, ../../../sass/backend/bootstrap/_reboot.scss */
+sub,
+sup {
+  position: relative;
+  font-size: 75%;
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+/* line 174, ../../../sass/backend/bootstrap/_reboot.scss */
+sub {
+  bottom: -.25em;
+}
+
+/* line 175, ../../../sass/backend/bootstrap/_reboot.scss */
+sup {
+  top: -.5em;
+}
+
+/* line 182, ../../../sass/backend/bootstrap/_reboot.scss */
+a {
+  color: #007bff;
+  text-decoration: none;
+  background-color: transparent;
+}
+/* line 13, ../../../sass/backend/bootstrap/mixins/_hover.scss */
+a:hover {
+  color: #0056b3;
+  text-decoration: underline;
+}
+
+/* line 199, ../../../sass/backend/bootstrap/_reboot.scss */
+a:not([href]):not([tabindex]) {
+  color: inherit;
+  text-decoration: none;
+}
+/* line 17, ../../../sass/backend/bootstrap/mixins/_hover.scss */
+a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {
+  color: inherit;
+  text-decoration: none;
+}
+/* line 208, ../../../sass/backend/bootstrap/_reboot.scss */
+a:not([href]):not([tabindex]):focus {
+  outline: 0;
+}
+
+/* line 218, ../../../sass/backend/bootstrap/_reboot.scss */
+pre,
+code,
+kbd,
+samp {
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 1em;
+}
+
+/* line 226, ../../../sass/backend/bootstrap/_reboot.scss */
+pre {
+  margin-top: 0;
+  margin-bottom: 1rem;
+  overflow: auto;
+}
+
+/* line 240, ../../../sass/backend/bootstrap/_reboot.scss */
+figure {
+  margin: 0 0 1rem;
+}
+
+/* line 250, ../../../sass/backend/bootstrap/_reboot.scss */
+img {
+  vertical-align: middle;
+  border-style: none;
+}
+
+/* line 255, ../../../sass/backend/bootstrap/_reboot.scss */
+svg {
+  overflow: hidden;
+  vertical-align: middle;
+}
+
+/* line 267, ../../../sass/backend/bootstrap/_reboot.scss */
+table {
+  border-collapse: collapse;
+}
+
+/* line 271, ../../../sass/backend/bootstrap/_reboot.scss */
+caption {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  color: #6c757d;
+  text-align: left;
+  caption-side: bottom;
+}
+
+/* line 279, ../../../sass/backend/bootstrap/_reboot.scss */
+th {
+  text-align: inherit;
+}
+
+/* line 290, ../../../sass/backend/bootstrap/_reboot.scss */
+label {
+  display: inline-block;
+  margin-bottom: 0.5rem;
+}
+
+/* line 299, ../../../sass/backend/bootstrap/_reboot.scss */
+button {
+  border-radius: 0;
+}
+
+/* line 308, ../../../sass/backend/bootstrap/_reboot.scss */
+button:focus {
+  outline: 1px dotted;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
+/* line 313, ../../../sass/backend/bootstrap/_reboot.scss */
+input,
+button,
+select,
+optgroup,
+textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+/* line 324, ../../../sass/backend/bootstrap/_reboot.scss */
+button,
+input {
+  overflow: visible;
+}
+
+/* line 329, ../../../sass/backend/bootstrap/_reboot.scss */
+button,
+select {
+  text-transform: none;
+}
+
+/* line 337, ../../../sass/backend/bootstrap/_reboot.scss */
+select {
+  word-wrap: normal;
+}
+
+/* line 345, ../../../sass/backend/bootstrap/_reboot.scss */
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/* line 358, ../../../sass/backend/bootstrap/_reboot.scss */
+button:not(:disabled),
+[type="button"]:not(:disabled),
+[type="reset"]:not(:disabled),
+[type="submit"]:not(:disabled) {
+  cursor: pointer;
+}
+
+/* line 365, ../../../sass/backend/bootstrap/_reboot.scss */
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+/* line 373, ../../../sass/backend/bootstrap/_reboot.scss */
+input[type="radio"],
+input[type="checkbox"] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+/* line 380, ../../../sass/backend/bootstrap/_reboot.scss */
+input[type="date"],
+input[type="time"],
+input[type="datetime-local"],
+input[type="month"] {
+  -webkit-appearance: listbox;
+}
+
+/* line 392, ../../../sass/backend/bootstrap/_reboot.scss */
+textarea {
+  overflow: auto;
+  resize: vertical;
+}
+
+/* line 398, ../../../sass/backend/bootstrap/_reboot.scss */
+fieldset {
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+/* line 413, ../../../sass/backend/bootstrap/_reboot.scss */
+legend {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  padding: 0;
+  margin-bottom: .5rem;
+  font-size: 1.5rem;
+  line-height: inherit;
+  color: inherit;
+  white-space: normal;
+}
+
+/* line 425, ../../../sass/backend/bootstrap/_reboot.scss */
+progress {
+  vertical-align: baseline;
+}
+
+/* line 430, ../../../sass/backend/bootstrap/_reboot.scss */
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/* line 435, ../../../sass/backend/bootstrap/_reboot.scss */
+[type="search"] {
+  outline-offset: -2px;
+  -webkit-appearance: none;
+}
+
+/* line 448, ../../../sass/backend/bootstrap/_reboot.scss */
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/* line 457, ../../../sass/backend/bootstrap/_reboot.scss */
+::-webkit-file-upload-button {
+  font: inherit;
+  -webkit-appearance: button;
+}
+
+/* line 466, ../../../sass/backend/bootstrap/_reboot.scss */
+output {
+  display: inline-block;
+}
+
+/* line 470, ../../../sass/backend/bootstrap/_reboot.scss */
+summary {
+  display: list-item;
+  cursor: pointer;
+}
+
+/* line 475, ../../../sass/backend/bootstrap/_reboot.scss */
+template {
+  display: none;
+}
+
+/* line 481, ../../../sass/backend/bootstrap/_reboot.scss */
+[hidden] {
+  display: none !important;
+}

ShopBundle/Resources/public/css/backend/custom.css

@@ -0,0 +1,725 @@
+@charset "UTF-8";
+/* STRUCTURE  */
+/* line 3, ../../sass/backend/custom.scss */
+body {
+  font-size: 0.9rem;
+}
+
+/* line 4, ../../sass/backend/custom.scss */
+[class*="sidebar-dark-"] .nav-sidebar > .nav-item.menu-open, [class*="sidebar-dark-"] .nav-sidebar > .nav-item:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+/* line 6, ../../sass/backend/custom.scss */
+.align-center {
+  text-align: center;
+}
+
+/* line 7, ../../sass/backend/custom.scss */
+.align-left {
+  text-align: left;
+}
+
+/* line 8, ../../sass/backend/custom.scss */
+.align-right {
+  text-align: right;
+}
+
+/* line 10, ../../sass/backend/custom.scss */
+.hidden {
+  display: none;
+}
+
+/* line 12, ../../sass/backend/custom.scss */
+.select2-container--default .select2-results__option[aria-disabled=true] {
+  display: none;
+}
+
+/* line 16, ../../sass/backend/custom.scss */
+.field-collection-item-action {
+  font-size: 2rem;
+  font-weight: bold;
+  margin-left: 4px;
+  width: 7%;
+  text-align: center;
+  display: inline-block;
+  line-height: 2.2rem;
+}
+
+/* line 25, ../../sass/backend/custom.scss */
+.field-collection-item-row .form-control {
+  width: 92%;
+  float: left;
+}
+
+/*****************************************  ADMIN SIDEBAR ***************************************/
+/* line 34, ../../sass/backend/custom.scss */
+.main-sidebar p {
+  font-size: 0.8rem;
+}
+
+/* line 35, ../../sass/backend/custom.scss */
+.main-sidebar .sidebar {
+  padding-left: 0px;
+  padding-right: 0px;
+  margin-top: 57px;
+}
+
+/* line 36, ../../sass/backend/custom.scss */
+.main-sidebar .nav-link {
+  padding: .4rem .5rem .4rem .7rem;
+}
+
+/* line 41, ../../sass/backend/custom.scss */
+#lc-flash-messages {
+  display: none;
+}
+
+/* line 43, ../../sass/backend/custom.scss */
+.main-sidebar .logo-long {
+  padding: 8px 0;
+  text-align: center;
+}
+
+/* line 44, ../../sass/backend/custom.scss */
+.main-sidebar .logo-long img {
+  height: 40px;
+  display: inline-block;
+}
+
+/* line 45, ../../sass/backend/custom.scss */
+.sidebar-collapse .main-sidebar .logo-long span {
+  display: none;
+}
+
+/* line 46, ../../sass/backend/custom.scss */
+.sidebar-collapse .main-sidebar:hover .logo-long span {
+  display: inline-block;
+}
+
+/* line 48, ../../sass/backend/custom.scss */
+.table.datatable-simple .highlight {
+  background: var(--teal);
+}
+
+/* line 49, ../../sass/backend/custom.scss */
+.datatable-field-search.small {
+  width: 50px;
+}
+
+/* line 51, ../../sass/backend/custom.scss */
+.dataTables_length, .dataTables_filter {
+  padding: .75rem 1.25rem 0.25rem;
+}
+
+/* line 53, ../../sass/backend/custom.scss */
+table.fixedHeader-floating {
+  margin-top: 0px !important;
+}
+
+/* line 54, ../../sass/backend/custom.scss */
+table th.sorting_asc, table th.sorting_desc {
+  border-top: 3px solid var(--success);
+}
+
+/* line 55, ../../sass/backend/custom.scss */
+table th.filtered {
+  border-top: 3px solid var(--primary);
+}
+
+/* line 57, ../../sass/backend/custom.scss */
+td.actions {
+  white-space: nowrap;
+  text-align: right;
+}
+
+/* line 59, ../../sass/backend/custom.scss */
+.table td, .table th {
+  padding: 0.35rem;
+}
+
+/* line 60, ../../sass/backend/custom.scss */
+.delivery-field .form-group {
+  display: inline-block;
+  margin-bottom: 0px;
+  margin-right: 15px;
+}
+
+/* line 61, ../../sass/backend/custom.scss */
+.delivery-field .form-group .form-control {
+  width: 150px;
+}
+
+/* line 63, ../../sass/backend/custom.scss */
+table th input {
+  width: auto;
+}
+
+/* line 64, ../../sass/backend/custom.scss */
+table th .select2-container--default .select2-selection--single {
+  padding: 0.3rem 0.4rem;
+}
+
+/************************  LOGIN PAGE *********************/
+/* line 67, ../../sass/backend/custom.scss */
+.login-logo {
+  display: block;
+  margin: auto;
+}
+
+/************************  form error *********************/
+/* line 70, ../../sass/backend/custom.scss */
+.form-sent .form-control:invalid {
+  border-color: #dc3545;
+  padding-right: 2.25rem;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23dc3545' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23dc3545' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E");
+  background-repeat: no-repeat;
+  background-position: center right calc(.375em + .1875rem);
+  background-size: calc(.75em + .375rem) calc(.75em + .375rem);
+}
+
+/* line 71, ../../sass/backend/custom.scss */
+.form-sent select.form-control:invalid + .select2 .select2-selection {
+  border-color: #dc3545;
+}
+
+/* line 72, ../../sass/backend/custom.scss */
+.form-sent select.form-control:invalid + .select2 .select2-selection b {
+  border-color: #dc3545 transparent transparent transparent;
+}
+
+/*CUSTOM Checkbox
+ /* Customize the label (the container) */
+/* line 77, ../../sass/backend/custom.scss */
+.form-check-label {
+  display: block;
+  position: relative;
+  padding-left: 26px;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+/* Hide the browser's default checkbox */
+/* line 79, ../../sass/backend/custom.scss */
+.form-check-label input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
+
+/* Create a custom checkbox */
+/* line 82, ../../sass/backend/custom.scss */
+.form-check {
+  padding-left: 0px;
+}
+
+/* line 84, ../../sass/backend/custom.scss */
+.form-sent .form-check-label input:invalid ~ .checkmark {
+  border-color: #dc3545;
+}
+
+/* line 85, ../../sass/backend/custom.scss */
+.form-check-label input:disabled ~ .checkmark {
+  display: none;
+}
+
+/* line 86, ../../sass/backend/custom.scss */
+.form-check-label input ~ .checkmark {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 18px;
+  width: 18px;
+  background-color: #eee;
+  border: 1px solid var(--primary);
+}
+
+/* line 87, ../../sass/backend/custom.scss */
+.form-check-label.big input ~ .checkmark {
+  height: 21px;
+  width: 21px;
+}
+
+/* line 88, ../../sass/backend/custom.scss */
+.form-check-label input[type="checkbox"] ~ .checkmark {
+  top: 2px;
+}
+
+/* line 89, ../../sass/backend/custom.scss */
+.form-check-label input[type="radio"] ~ .checkmark {
+  top: 3px;
+  border-radius: 50%;
+}
+
+/* line 90, ../../sass/backend/custom.scss */
+.form-check-label:hover input ~ .checkmark {
+  background-color: #ccc;
+}
+
+/* When the checkbox is checked, add a blue background */
+/* line 92, ../../sass/backend/custom.scss */
+.form-check-label input:checked ~ .checkmark {
+  background-color: var(--primary);
+}
+
+/* Create the checkmark/indicator (hidden when not checked) */
+/* line 94, ../../sass/backend/custom.scss */
+.form-check-label .checkmark:after {
+  content: "";
+  position: absolute;
+  display: none;
+}
+
+/* Show the checkmark when checked */
+/* line 96, ../../sass/backend/custom.scss */
+.form-check-label input:checked ~ .checkmark:after {
+  display: block;
+}
+
+/* Style the checkmark/indicator */
+/* line 98, ../../sass/backend/custom.scss */
+.form-check-label .checkmark:after {
+  left: 7px;
+  top: 3px;
+  width: 6px;
+  height: 11px;
+  border: solid white;
+  border-width: 0 3px 3px 0;
+  -webkit-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+
+/* line 99, ../../sass/backend/custom.scss */
+.form-check-label input[type="checkbox"] ~ .checkmark:after {
+  left: 6px;
+  top: 2px;
+  width: 6px;
+  height: 10px;
+  border: solid white;
+  border-width: 0 3px 3px 0;
+  -webkit-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+
+/* line 100, ../../sass/backend/custom.scss */
+.form-check-label input[type="radio"] ~ .checkmark:after {
+  top: 4px;
+  left: 4px;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: white;
+}
+
+/* line 102, ../../sass/backend/custom.scss */
+.form-check-label.big input[type="checkbox"] ~ .checkmark:after {
+  left: 7px;
+  top: 3px;
+  width: 6px;
+  height: 11px;
+}
+
+/* Create a custom radio button */
+/* line 106, ../../sass/backend/custom.scss */
+.product-categories .parent .form-group.field-checkbox .form-check-label {
+  padding-left: 0px;
+  font-style: italic;
+}
+
+/* line 107, ../../sass/backend/custom.scss */
+.product-categories .children .form-group.field-checkbox {
+  margin-left: 20px;
+}
+
+/* line 108, ../../sass/backend/custom.scss */
+.product-categories .form-group {
+  margin-bottom: 0.15rem;
+}
+
+/* line 109, ../../sass/backend/custom.scss */
+.lc-deleted-field {
+  display: none;
+}
+
+/* line 110, ../../sass/backend/custom.scss */
+.lc-offline-field {
+  opacity: 0.5;
+}
+
+/* line 111, ../../sass/backend/custom.scss */
+.lc-offline-field label::after {
+  content: ' [hors ligne]';
+}
+
+/* Général */
+/* line 117, ../../sass/backend/custom.scss */
+.btn.btn-primary.action-save {
+  float: right;
+}
+
+/* line 118, ../../sass/backend/custom.scss */
+.button-action .btn {
+  margin-left: 10px;
+}
+
+/* line 120, ../../sass/backend/custom.scss */
+.input-group-text {
+  padding: 0.25rem 0.75rem;
+}
+
+/* line 124, ../../sass/backend/custom.scss */
+.col-form-label {
+  font-weight: bold;
+}
+
+/* line 126, ../../sass/backend/custom.scss */
+#toast-container.toast-top-right {
+  top: 60px;
+}
+
+/* SIDEBAR */
+/* line 129, ../../sass/backend/custom.scss */
+.main-header.navbar {
+  padding: 0;
+  min-height: 57px;
+}
+
+/* line 130, ../../sass/backend/custom.scss */
+.lc-navbar li {
+  border-left: 1px solid #e0e0e0;
+  padding: 0.5rem 1.5rem;
+}
+
+/* line 131, ../../sass/backend/custom.scss */
+.lc-navbar li label {
+  margin-bottom: 0;
+  vertical-align: middle;
+  font-weight: normal !important;
+}
+
+/* line 133, ../../sass/backend/custom.scss */
+#switch-merchant {
+  min-width: 170px;
+}
+
+/* Sortable */
+/* line 139, ../../sass/backend/custom.scss */
+.ui-sortable-helper {
+  display: table;
+}
+
+/* line 140, ../../sass/backend/custom.scss */
+.ui-state-highlight {
+  background: #eee;
+}
+
+/* line 141, ../../sass/backend/custom.scss */
+.lc-sortable div:last-child {
+  display: none;
+}
+
+/* Ckfinder */
+/*
+
+.lc-ckfinder-wrap{width: 240px; height: 170px; position: relative;}
+.lc-ckfinder-wrap .lc-ckfinder-illu-wrap{position:relative; : 100%; height: 139px; display: flex; align-items: center; justify-content: center; background: #eee; background-size: contain;}
+.lc-ckfinder-wrap .lc-ckfinder-illu{width: 100%; height: 100%; background-size: contain; position: absolute; top: 0; left: 0;z-index: 1; background-repeat: no-repeat; background-position: center center; }
+.lc-ckfinder-wrap .lc-ckfinder-illu-wrap i{font-size: 5rem;}
+.lc-ckfinder-wrap .lc-ckfinder-remove{border: 0px; font-size: 1.8rem; position: absolute;z-index: 2; color:#dc3545; top: -20px; right: -20px; background: 0; display: none;}
+
+.lc-ckfinder-wrap .lc-ckfinder-button{width: 100%; bottom: 0px; left: 0; position: absolute;}
+*/
+/* VUES JS  */
+/* line 156, ../../sass/backend/custom.scss */
+.nav-item .btn {
+  padding-right: 15px;
+  position: relative;
+}
+
+/* line 157, ../../sass/backend/custom.scss */
+.nav-item .btn .invalid-form {
+  display: none;
+  position: absolute;
+  top: -7px;
+  right: -6px;
+  color: #dc3545;
+  background: #fff;
+  border-radius: 10px;
+  font-size: 1.2rem;
+}
+
+/* line 158, ../../sass/backend/custom.scss */
+.nav-item.has-invalid .btn .invalid-form {
+  display: inline-block;
+  z-index: 2;
+}
+
+/* ProductFamily */
+/* line 163, ../../sass/backend/custom.scss */
+.field-unit-quantity {
+  border-bottom: 2px dotted #eee;
+  padding-bottom: 10px;
+  margin-bottom: 20px;
+}
+
+/* line 164, ../../sass/backend/custom.scss */
+.field-reduction-apply {
+  border-top: 2px dotted #eee;
+  padding-top: 10px;
+  margin-top: 20px;
+}
+
+/* line 166, ../../sass/backend/custom.scss */
+.new-productfamily #nav-params,
+.edit-productfamily #nav-params {
+  margin-bottom: 30px;
+}
+
+/* line 171, ../../sass/backend/custom.scss */
+.new-productfamily #nav-params .btn,
+.edit-productfamily #nav-params .btn {
+  margin-left: 20px;
+}
+
+/* line 176, ../../sass/backend/custom.scss */
+.new-productfamily #product-categories .row,
+.edit-productfamily #product-categories .row {
+  padding: 10px;
+}
+
+/* line 181, ../../sass/backend/custom.scss */
+.new-productfamily #product-categories .form-group,
+.edit-productfamily #product-categories .form-group {
+  width: 100%;
+  padding: 4px;
+}
+
+/* line 187, ../../sass/backend/custom.scss */
+.new-productfamily #product-categories .children,
+.edit-productfamily #product-categories .children {
+  margin-left: 20px;
+  width: 100%;
+}
+
+/* line 193, ../../sass/backend/custom.scss */
+.new-productfamily ul.products,
+.edit-productfamily ul.products {
+  padding: 0px;
+  list-style-type: none;
+}
+
+/* line 199, ../../sass/backend/custom.scss */
+.new-productfamily ul.products li.product,
+.edit-productfamily ul.products li.product {
+  padding: 0px;
+  margin-bottom: 20px;
+  position: relative;
+}
+
+/* line 206, ../../sass/backend/custom.scss */
+.new-productfamily ul.products li.add,
+.edit-productfamily ul.products li.add {
+  text-align: right;
+}
+
+/* line 211, ../../sass/backend/custom.scss */
+.autoresize textarea {
+  height: auto;
+  min-height: 38px;
+}
+
+/* ORDER */
+/* line 217, ../../sass/backend/custom.scss */
+.table-order-summary {
+  width: 100%;
+}
+
+/* line 220, ../../sass/backend/custom.scss */
+.order-product-item.redelivery {
+  background: rgba(18, 104, 253, 0.38) !important;
+}
+
+/*.select2-container--bootstrap .select2-selection{max-width: none;}*/
+/*.order-product-item{margin: 15px 0; padding: 0;}*/
+/* Product */
+/* line 225, ../../sass/backend/custom.scss */
+.product-form-modal {
+  display: none;
+}
+
+/* line 226, ../../sass/backend/custom.scss */
+.product-form.modal .form-check-label {
+  font-style: italic;
+  color: #666;
+  text-align: left;
+}
+
+/* line 227, ../../sass/backend/custom.scss */
+.products-collection-table .inherited {
+  color: #888;
+  font-style: italic;
+  font-weight: initial;
+}
+
+/* line 228, ../../sass/backend/custom.scss */
+.products-collection-table td {
+  position: relative;
+}
+
+/* line 229, ../../sass/backend/custom.scss */
+.card-body.p-0 .products-collection-table tbody > tr > td:first-of-type, .card-body.p-0 .products-collection-table tbody > tr > th:first-of-type, .card-body.p-0 .products-collection-table thead > tr > td:first-of-type, .card-body.p-0 .products-collection-table thead > tr > th:first-of-type {
+  padding-left: 0.35rem;
+}
+
+/* line 230, ../../sass/backend/custom.scss */
+.products-collection-table .btn-empty-field {
+  position: absolute;
+  right: 3px;
+  font-size: 0.7rem;
+  top: 5px;
+  padding: 0px;
+}
+
+/* line 231, ../../sass/backend/custom.scss */
+#lc-product-family-edit .products-collection-table {
+  table-layout: fixed;
+}
+
+/* line 232, ../../sass/backend/custom.scss */
+#lc-product-family-edit .products-collection-table tr {
+  border-bottom: 1px solid #dee2e6;
+}
+
+/* line 233, ../../sass/backend/custom.scss */
+#lc-product-family-edit .products-collection-table th {
+  font-size: 13px;
+  border-left: 1px solid #dee2e6;
+  border-top: 1px solid #dee2e6;
+  text-align: center;
+}
+
+/* line 234, ../../sass/backend/custom.scss */
+#lc-product-family-edit .products-collection-table th span {
+  white-space: initial;
+}
+
+/* line 235, ../../sass/backend/custom.scss */
+#lc-product-family-edit .products-collection-table th:last-child {
+  border-right: 1px solid #dee2e6;
+}
+
+/* line 236, ../../sass/backend/custom.scss */
+#lc-product-family-edit .products-collection-table td {
+  border-left: 1px solid #dee2e6;
+  text-align: center;
+  font-size: 13px;
+}
+
+/* line 237, ../../sass/backend/custom.scss */
+#lc-product-family-edit .products-collection-table td:last-child {
+  border-right: 1px solid #dee2e6;
+  white-space: nowrap;
+}
+
+/* line 238, ../../sass/backend/custom.scss */
+#lc-product-family-edit .btn-add-product {
+  margin: 20px 0;
+  float: right;
+}
+
+/* line 239, ../../sass/backend/custom.scss */
+#lc-product-family-edit .inherited {
+  color: #888;
+  font-style: italic;
+  font-weight: initial;
+}
+
+/* line 240, ../../sass/backend/custom.scss */
+#lc-product-family-edit .products-collection-table td .value {
+  min-width: 80%;
+  margin: auto;
+  min-height: 35px;
+  cursor: pointer;
+}
+
+/* line 241, ../../sass/backend/custom.scss */
+#lc-product-family-edit .products-collection-table td .modal {
+  text-align: left;
+}
+
+/* DeliveryZone */
+/* line 245, ../../sass/backend/custom.scss */
+#autocomplete-cities {
+  position: relative;
+}
+
+/* line 249, ../../sass/backend/custom.scss */
+#autocomplete-cities .ui-autocomplete {
+  left: 30%;
+  top: 41px;
+  margin-left: 18px;
+}
+
+/* line 255, ../../sass/backend/custom.scss */
+.head-reminders {
+  margin-top: 15px;
+}
+
+/* TABLEAU DE BORD */
+/* line 258, ../../sass/backend/custom.scss */
+.todo-list > li {
+  position: relative;
+}
+
+/* line 259, ../../sass/backend/custom.scss */
+.todo-list > li .text {
+  margin-left: 30px;
+}
+
+/* line 260, ../../sass/backend/custom.scss */
+.todo-list > li .tools {
+  position: absolute;
+  top: 4px;
+  right: 15px;
+}
+
+/* line 262, ../../sass/backend/custom.scss */
+#addTicketMessageForm {
+  margin-top: 30px;
+  border-top: 2px dotted #eee;
+  padding-top: 30px;
+}
+
+/* line 264, ../../sass/backend/custom.scss */
+#dashboard .list-btn-statistic {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+/* line 265, ../../sass/backend/custom.scss */
+#dashboard .btn-statistic {
+  width: 120px;
+  height: 70px;
+  text-align: center;
+  border: 1px solid black;
+  line-height: 1rem;
+}
+
+/* line 266, ../../sass/backend/custom.scss */
+#dashboard .btn-statistic small {
+  margin-bottom: 10px;
+  display: block;
+}
+
+/* line 267, ../../sass/backend/custom.scss */
+#dashboard .btn-statistic .value {
+  display: block;
+}

ShopBundle/Resources/public/js/backend/script/default/init-list.js

@@ -122,6 +122,7 @@ function initDataTable() {
 
         var table = $(".table.datatable-simple").DataTable({
             orderCellsTop: true,
+            pageLength: 50,
             fixedHeader: {
                 header: true,
                 headerOffset: $('.main-header').outerHeight(),

ShopBundle/Resources/public/js/backend/script/merchant/vuejs-merchant.js

@@ -0,0 +1,50 @@
+// Reference array sent to dynamic staticRenderFns
+var staticRenderFns = [];
+
+appOrder = new Vue({
+    el: '#lc-merchant-edit',
+    delimiters: ['${', '}'],
+    data() {
+        return Object.assign(
+            {
+                addressType: null,
+                currentSection:'general',
+                sectionsArray: [
+                    {
+                        name: 'general',
+                        nameDisplay: 'Catalogue'
+                    },
+                    {
+                        name: 'product',
+                        nameDisplay: 'Produits'
+                    },
+                    {
+                        name: 'order',
+                        nameDisplay: 'Commandes'
+                    },
+                    {
+                        name: 'email',
+                        nameDisplay: 'Emails'
+                    },
+                    {
+                        name: 'delivery',
+                        nameDisplay: 'Livraisons'
+                    },
+                    {
+                        name: 'address',
+                        nameDisplay: 'Adresse'
+                    }
+                ]
+            }, window.addressValues);
+    },
+    mounted: function () {},
+    methods: {
+        changeSection: function (section) {
+            this.currentSection = section.name;
+
+        },
+    },
+    watch: {}
+});
+
+

ShopBundle/Resources/public/js/backend/script/order/vuejs-order.js

@@ -6,35 +6,11 @@ Vue.component('order-product', {
     mixins: [mixinTemplate],
     props: ['template', 'keyItem', 'orderProduct', 'editionMode'],
     computed: {},
-    /* data:function() {
-         return{
-
-             product:null
-         };
-        /!* return Object.assign(
-             {
-                 /!*title: null,
-                 price: null,
-                 priceWithTax: null,
-                 priceWithTaxAndReduction: null,
-                 totalWithoutTax: null,
-                 totalWithTax: null,
-                 buyingPrice: null,
-                 quantity: 1,
-                 unit: null,
-                 product: null*!/
-             }, window.orderProducts[this.key])*!/
-     },*/
     mounted: function () {
-        log(this.editionMode);
         this.setFields()
-//this.$el.replace(/__name__/g, this.key);
+
     },
     methods: {
-        init: function () {
-            //log(this.$els);
-            //log(this.$element);
-        },
         setFields: function () {
             var app = this;
             fields = ['fieldQuantity', 'fieldProduct'];
@@ -47,7 +23,6 @@ Vue.component('order-product', {
                     $(app.$refs[field]).prop('name', name);
                     $(app.$refs[field]).prop('id', id);
                 }
-                //log(app.$refs[field]);
             });
         },
         updateOrderProducts: function () {
@@ -60,7 +35,7 @@ Vue.component('order-product', {
             this.$parent.updateOrderProducts();
         },
         modalAddRedeliveryOrderProduct:function () {
-log(this.orderProduct.unit);
+
             $(this.$parent.$refs['addRedeliveryOrderProductFormOrderProduct']).val(this.orderProduct.id);
             $(this.$parent.$refs['addRedeliveryOrderProductFormTitle']).val(this.orderProduct.title);
             $(this.$parent.$refs['addRedeliveryOrderProductFormUnit']).val(this.orderProduct.unit).trigger('change');
@@ -68,13 +43,7 @@ log(this.orderProduct.unit);
             $(this.$parent.$refs['addRedeliveryOrderProductFormQuantityOrder']).val(this.orderProduct.quantityOrder);
             $('#modal-add-redelivery-order-product').modal('show');
         }
-        /*log($('#order-products-list').data('prototype'));
-        var prototype = $('#order-products-list').data('prototype');
 
-        var newForm = prototype;
-        newForm = newForm.replace(/__name__/g, key);
-
-        */
     }
 
 
@@ -242,6 +211,12 @@ appOrder = new Vue({
         addRedeliveryOrderProduct: function () {
             this.postForm('#addRedeliveryOrderProductForm', '#modal-add-redelivery-order-product');
         },
+        sendPaymentLink: function(){
+            this.postForm('#orderSendPaymentLinkForm', '#modal-order-send-payment-link');
+        },
+        gotoPaymentLink: function(){
+            this.postForm('#orderSendPaymentLinkForm', '#modal-order-send-payment-link');
+        },
         postForm: function (formId, modalId) {
             var app = this;
             if(checkFormValidity(formId)) {

ShopBundle/Resources/public/js/backend/script/supplier/vuejs-supplier.js

@@ -0,0 +1,37 @@
+// Reference array sent to dynamic staticRenderFns
+var staticRenderFns = [];
+
+appOrder = new Vue({
+    el: '#lc-supplier-edit',
+    delimiters: ['${', '}'],
+    data() {
+        return Object.assign(
+            {
+                addressType: null,
+                currentSection:'general',
+                sectionsArray: [
+                    {
+                        name: 'general',
+                        nameDisplay: 'Général'
+                    },
+                    {
+                        name: 'address',
+                        nameDisplay: 'Adresse'
+                    },
+                    {
+                        name: 'seo',
+                        nameDisplay: 'SEO'
+                    }
+                ]
+            });
+    },
+    mounted: function () {},
+    methods: {
+        changeSection: function (section) {
+            this.currentSection = section.name;
+        },
+    },
+    watch: {}
+});
+
+

ShopBundle/Resources/public/js/backend/script/ticket/init-edit.js

@@ -12,3 +12,4 @@ jQuery(document).ready(function () {
             });
     });
 });
+

ShopBundle/Resources/public/js/backend/script/user/init-edit.js

@@ -0,0 +1,76 @@
+jQuery(document).ready(function () {
+    $('.btn-edit-user-address').on('click', function () {
+        var url = $(this).data('url');
+        var btn = this;
+
+        $.ajax({
+            url: url,
+            method: "POST",
+            dataType: "json",
+            success: function (response) {
+                setFlashMessages(response.flashMessages);
+                $('body').append(response.data);
+                $('#modal-user-address').modal('show');
+                $('#modal-user-address').on('hidden.bs.modal', function (e) {
+                    $('#modal-user-address').remove();
+                });
+
+                initUserAddressForm($('#modal-user-address').find('form'), btn);
+            }
+        });
+    });
+});
+
+appUserAddress = null;
+function initUserAddressForm(form, btn) {
+    appUserAddress = null;
+
+    $(form).find('button').off('click');
+    $(form).find('button').on('click', function () {
+        if(checkFormValidity('#'+$(form).prop('id'))) {
+
+            $.ajax({
+                url: $(form).prop('action'),
+                method: "POST",
+                data: $(form).serialize(),
+                dataType: "json",
+                success: function (response) {
+                    $('#modal-user-address').modal('hide');
+
+                    setFlashMessages(response.flashMessages);
+                    if (response.status == 'error') {
+                        $('body').append(response.data);
+                        $('#modal-user-address').modal('show');
+                        initUserAddressForm($('#modal-user-address').find('form'));
+                    } else {
+                        if($(btn).hasClass('btn-edit-user-address')){
+                            $('btn').parents('.user-address-item').replaceWith(response.data);
+                        }else{
+                            $('#user-addresses').append(response.data);
+                        }
+                    }
+                }
+            });
+        }
+    });
+
+    appUserAddress = new Vue({
+        el: '#lc-user-address',
+        delimiters: ['${', '}'],
+        data() {
+            return Object.assign(
+                {
+                    addressType:null
+                }, window.addressValues);
+        },
+        mounted: function () {
+            $(this.$el).find('select.form-control').each(function(i,select){
+                setSelect2($(select));
+            });
+        },
+        methods: {
+
+        }
+    });
+
+}

ShopBundle/Resources/public/sass/backend/adminlte/.csslintrc

@@ -0,0 +1,23 @@
+{
+  "adjoining-classes": false,
+  "box-sizing": false,
+  "box-model": false,
+  "compatible-vendor-prefixes": false,
+  "floats": false,
+  "font-sizes": false,
+  "gradients": false,
+  "important": false,
+  "known-properties": false,
+  "outline-none": false,
+  "qualified-headings": false,
+  "regex-selectors": false,
+  "shorthand": false,
+  "text-indent": false,
+  "unique-headings": false,
+  "universal-selector": false,
+  "unqualified-attributes": false,
+  "ids": false,
+  "fallback-colors": false,
+  "vendor-prefix": false,
+  "import": false
+}

ShopBundle/Resources/public/sass/backend/adminlte/_alerts.scss

@@ -0,0 +1,36 @@
+//
+// Component: Alert
+//
+
+.alert {
+  .icon {
+    margin-right: 10px;
+  }
+
+  .close {
+    color: $black;
+    opacity: .2;
+
+    &:hover {
+      opacity: .5;
+    }
+  }
+
+  a {
+    color: $white;
+    text-decoration: underline;
+  }
+}
+
+//Alert Variants
+@each $color, $value in $theme-colors {
+  .alert-#{$color} {
+    color: color-yiq($value);
+    background: $value;
+    border-color: darken($value, 5%);
+  }
+
+  .alert-default-#{$color} {
+    @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level));
+  }
+}

ShopBundle/Resources/public/sass/backend/adminlte/_bootstrap-variables.scss

@@ -0,0 +1,910 @@
+// Variables
+//
+// Variables should follow the `$component-state-property-size` formula for
+// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
+
+
+//
+// Color system
+//
+
+// stylelint-disable
+$white:    #ffffff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #6c757d !default;
+$gray-700: #495057 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$black:    #000 !default;
+
+$grays: () !default;
+$grays: map-merge((
+        "100": $gray-100,
+        "200": $gray-200,
+        "300": $gray-300,
+        "400": $gray-400,
+        "500": $gray-500,
+        "600": $gray-600,
+        "700": $gray-700,
+        "800": $gray-800,
+        "900": $gray-900
+), $grays);
+
+$blue:    #007bff !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #e83e8c !default;
+$red:     #dc3545 !default;
+$orange:  #fd7e14 !default;
+$yellow:  #ffc107 !default;
+$green:   #28a745 !default;
+$teal:    #20c997 !default;
+$cyan:    #17a2b8 !default;
+
+$colors: () !default;
+$colors: map-merge((
+        "blue":       $blue,
+        "indigo":     $indigo,
+        "purple":     $purple,
+        "pink":       $pink,
+        "red":        $red,
+        "orange":     $orange,
+        "yellow":     $yellow,
+        "green":      $green,
+        "teal":       $teal,
+        "cyan":       $cyan,
+        "white":      $white,
+        "gray":       $gray-600,
+        "gray-dark":  $gray-800
+), $colors);
+
+$primary:       $blue !default;
+$secondary:     $gray-600 !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         $gray-100 !default;
+$dark:          $gray-800 !default;
+
+$theme-colors: () !default;
+$theme-colors: map-merge((
+        "primary":    $primary,
+        "secondary":  $secondary,
+        "success":    $success,
+        "info":       $info,
+        "warning":    $warning,
+        "danger":     $danger,
+        "light":      $light,
+        "dark":       $dark
+), $theme-colors);
+// stylelint-enable
+
+// Set a specific jump point for requesting color jumps
+$theme-color-interval:      8% !default;
+
+// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
+$yiq-contrasted-threshold: 150 !default;
+
+// Customize the light and dark text colors for use in our YIQ color contrast function.
+$yiq-text-dark: #1F2D3D !default;
+$yiq-text-light: $white !default;
+
+// Options
+//
+// Quickly modify global styling by enabling or disabling optional features.
+
+$enable-caret:                                true !default;
+$enable-rounded:                              true !default;
+$enable-shadows:                              true !default;
+$enable-gradients:                            false !default;
+$enable-transitions:                          true !default;
+$enable-prefers-reduced-motion-media-query:   true !default;
+$enable-hover-media-query:                    false !default; // Deprecated, no longer affects any compiled CSS
+$enable-grid-classes:                         true !default;
+$enable-pointer-cursor-for-buttons:           true !default;
+$enable-print-styles:                         true !default;
+$enable-responsive-font-sizes:                false !default;
+$enable-validation-icons:                     true !default;
+$enable-deprecation-messages:                 true !default;
+
+// Spacing
+//
+// Control the default styling of most Bootstrap elements by modifying these
+// variables. Mostly focused on spacing.
+// You can add more entries to the $spacers map, should you need more variation.
+
+// stylelint-disable
+$spacer: 1rem !default;
+$spacers: () !default;
+$spacers: map-merge((
+        0: 0,
+        1: ($spacer * .25),
+        2: ($spacer * .5),
+        3: $spacer,
+        4: ($spacer * 1.5),
+        5: ($spacer * 3)
+), $spacers);
+
+// This variable affects the `.h-*` and `.w-*` classes.
+$sizes: () !default;
+$sizes: map-merge((
+        25: 25%,
+        50: 50%,
+        75: 75%,
+        100: 100%
+), $sizes);
+// stylelint-enable
+
+// Body
+//
+// Settings for the `<body>` element.
+
+$body-bg:                   $white !default;
+$body-color:                $gray-900 !default;
+
+// Links
+//
+// Style anchor elements.
+
+$link-color:                theme-color("primary") !default;
+$link-decoration:           none !default;
+$link-hover-color:          darken($link-color, 15%) !default;
+$link-hover-decoration:     none !default;
+
+// Paragraphs
+//
+// Style p element.
+
+$paragraph-margin-bottom:   1rem !default;
+
+
+// Grid breakpoints
+//
+// Define the minimum dimensions at which your layout will change,
+// adapting to different screen sizes, for use in media queries.
+
+$grid-breakpoints: (
+        xs: 0,
+        sm: 576px,
+        md: 768px,
+        lg: 992px,
+        xl: 1200px
+) !default;
+
+@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
+@include _assert-starts-at-zero($grid-breakpoints);
+
+
+// Grid containers
+//
+// Define the maximum width of `.container` for different screen sizes.
+
+$container-max-widths: (
+        sm: 540px,
+        md: 720px,
+        lg: 960px,
+        xl: 1140px
+) !default;
+
+@include _assert-ascending($container-max-widths, "$container-max-widths");
+
+
+// Grid columns
+//
+// Set the number of columns and specify the width of the gutters.
+
+$grid-columns:                12 !default;
+$grid-gutter-width:           15px !default;
+
+// Components
+//
+// Define common padding and border radius sizes and more.
+
+$line-height-lg:              1.5 !default;
+$line-height-sm:              1.5 !default;
+
+$border-width:                1px !default;
+$border-color:                $gray-300 !default;
+
+$border-radius:               .25rem !default;
+$border-radius-lg:            .3rem !default;
+$border-radius-sm:            .2rem !default;
+
+$component-active-color:      $white !default;
+$component-active-bg:         theme-color("primary") !default;
+
+$caret-width:                 .3em !default;
+
+$transition-base:             all .2s ease-in-out !default;
+$transition-fade:             opacity .15s linear !default;
+$transition-collapse:         height .35s ease !default;
+
+
+// Fonts
+//
+// Font, line-height, and color for body text, headings, and more.
+
+// stylelint-disable value-keyword-case
+$font-family-sans-serif:      "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
+$font-family-base:            $font-family-sans-serif !default;
+// stylelint-enable value-keyword-case
+
+$font-size-base:              1rem !default; // Assumes the browser default, typically `16px`
+$font-size-lg:                ($font-size-base * 1.25) !default;
+$font-size-sm:                ($font-size-base * .875) !default;
+
+$font-weight-light:           300 !default;
+$font-weight-normal:          400 !default;
+$font-weight-bold:            700 !default;
+
+$font-weight-base:            $font-weight-normal !default;
+$line-height-base:            1.5 !default;
+
+$h1-font-size:                $font-size-base * 2.5 !default;
+$h2-font-size:                $font-size-base * 2 !default;
+$h3-font-size:                $font-size-base * 1.75 !default;
+$h4-font-size:                $font-size-base * 1.5 !default;
+$h5-font-size:                $font-size-base * 1.25 !default;
+$h6-font-size:                $font-size-base !default;
+
+$headings-margin-bottom:      ($spacer / 2) !default;
+$headings-font-family:        inherit !default;
+$headings-font-weight:        500 !default;
+$headings-line-height:        1.2 !default;
+$headings-color:              inherit !default;
+
+$display1-size:               6rem !default;
+$display2-size:               5.5rem !default;
+$display3-size:               4.5rem !default;
+$display4-size:               3.5rem !default;
+
+$display1-weight:             300 !default;
+$display2-weight:             300 !default;
+$display3-weight:             300 !default;
+$display4-weight:             300 !default;
+$display-line-height:         $headings-line-height !default;
+
+$lead-font-size:              ($font-size-base * 1.25) !default;
+$lead-font-weight:            300 !default;
+
+$small-font-size:             80% !default;
+
+$text-muted:                  $gray-600 !default;
+
+$blockquote-small-color:      $gray-600 !default;
+$blockquote-font-size:        ($font-size-base * 1.25) !default;
+
+$hr-border-color:             rgba($black, .1) !default;
+$hr-border-width:             $border-width !default;
+
+$mark-padding:                .2em !default;
+
+$dt-font-weight:              $font-weight-bold !default;
+
+$kbd-box-shadow:              inset 0 -.1rem 0 rgba($black, .25) !default;
+$nested-kbd-font-weight:      $font-weight-bold !default;
+
+$list-inline-padding:         .5rem !default;
+
+$mark-bg:                     #fcf8e3 !default;
+
+$hr-margin-y:                 $spacer !default;
+
+
+// Tables
+//
+// Customizes the `.table` component with basic values, each used across all table variations.
+
+$table-cell-padding:          .75rem !default;
+$table-cell-padding-sm:       .3rem !default;
+
+$table-bg:                    transparent !default;
+$table-accent-bg:             rgba($black, .05) !default;
+$table-hover-bg:              rgba($black, .075) !default;
+$table-active-bg:             $table-hover-bg !default;
+
+$table-border-width:          $border-width !default;
+$table-border-color:          $gray-300 !default;
+
+$table-head-bg:               $gray-200 !default;
+$table-head-color:            $gray-700 !default;
+
+$table-dark-bg:               $gray-900 !default;
+$table-dark-accent-bg:        rgba($white, .05) !default;
+$table-dark-hover-bg:         rgba($white, .075) !default;
+$table-dark-border-color:     lighten($gray-900, 10%) !default;
+$table-dark-color:            $body-bg !default;
+
+
+// Buttons + Forms
+//
+// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
+
+$input-btn-padding-y:         .375rem !default;
+$input-btn-padding-x:         .75rem !default;
+$input-btn-line-height:       $line-height-base !default;
+
+$input-btn-focus-width:       .2rem !default;
+$input-btn-focus-color:       rgba($component-active-bg, .25) !default;
+$input-btn-focus-box-shadow:  0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
+
+$input-btn-padding-y-sm:      .25rem !default;
+$input-btn-padding-x-sm:      .5rem !default;
+$input-btn-line-height-sm:    $line-height-sm !default;
+
+$input-btn-padding-y-lg:      .5rem !default;
+$input-btn-padding-x-lg:      1rem !default;
+$input-btn-line-height-lg:    $line-height-lg !default;
+
+$input-btn-border-width:      $border-width !default;
+
+
+// Buttons
+//
+// For each of Bootstrap's buttons, define text, background, and border color.
+
+$btn-padding-y:               $input-btn-padding-y !default;
+$btn-padding-x:               $input-btn-padding-x !default;
+$btn-line-height:             $input-btn-line-height !default;
+
+$btn-padding-y-sm:            $input-btn-padding-y-sm !default;
+$btn-padding-x-sm:            $input-btn-padding-x-sm !default;
+$btn-line-height-sm:          $input-btn-line-height-sm !default;
+
+$btn-padding-y-lg:            $input-btn-padding-y-lg !default;
+$btn-padding-x-lg:            $input-btn-padding-x-lg !default;
+$btn-line-height-lg:          $input-btn-line-height-lg !default;
+
+$btn-border-width:            $input-btn-border-width !default;
+
+$btn-font-weight:             $font-weight-normal !default;
+$btn-box-shadow:              none !default;
+$btn-focus-width:             0 !default;
+$btn-focus-box-shadow:        none !default;
+$btn-disabled-opacity:        .65 !default;
+$btn-active-box-shadow:       none !default;
+
+$btn-link-disabled-color:     $gray-600 !default;
+
+$btn-block-spacing-y:         .5rem !default;
+
+// Allows for customizing button radius independently from global border radius
+$btn-border-radius:           $border-radius !default;
+$btn-border-radius-lg:        $border-radius-lg !default;
+$btn-border-radius-sm:        $border-radius-sm !default;
+
+$btn-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+
+
+// Forms
+
+$input-padding-y:                       $input-btn-padding-y !default;
+$input-padding-x:                       $input-btn-padding-x !default;
+$input-line-height:                     $input-btn-line-height !default;
+
+$input-padding-y-sm:                    $input-btn-padding-y-sm !default;
+$input-padding-x-sm:                    $input-btn-padding-x-sm !default;
+$input-line-height-sm:                  $input-btn-line-height-sm !default;
+
+$input-padding-y-lg:                    $input-btn-padding-y-lg !default;
+$input-padding-x-lg:                    $input-btn-padding-x-lg !default;
+$input-line-height-lg:                  $input-btn-line-height-lg !default;
+
+$input-bg:                              $white !default;
+$input-disabled-bg:                     $gray-200 !default;
+
+$input-color:                           $gray-700 !default;
+$input-border-color:                    $gray-400 !default;
+$input-border-width:                    $input-btn-border-width !default;
+$input-box-shadow:                      inset 0 0 0 rgba($black, 0) !default;
+
+$input-border-radius:                   $border-radius !default;
+$input-border-radius-lg:                $border-radius-lg !default;
+$input-border-radius-sm:                $border-radius-sm !default;
+
+$input-focus-bg:                        $input-bg !default;
+$input-focus-border-color:              lighten($component-active-bg, 25%) !default;
+$input-focus-color:                     $input-color !default;
+$input-focus-width:                     0 !default;
+$input-focus-box-shadow:                none !default;
+
+$input-placeholder-color:               lighten($gray-600, 15%) !default;
+
+$input-height-border:                   $input-border-width * 2 !default;
+
+$input-height-inner:                    ($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2) !default;
+$input-height-inner-half:               calc(#{$input-line-height * .5em} + #{$input-padding-y}) !default;
+$input-height-inner-quarter:            calc(#{$input-line-height * .25em} + #{$input-padding-y / 2}) !default;
+
+$input-height:                          calc(#{$input-height-inner} + #{$input-height-border}) !default;
+
+$input-height-inner-sm:                 ($font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2) !default;
+$input-height-sm:                       calc(#{$input-height-inner-sm} + #{$input-height-border}) !default;
+
+$input-height-inner-lg:                 ($font-size-lg * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2) !default;
+$input-height-lg:                       calc(#{$input-height-inner-lg} + #{$input-height-border}) !default;
+
+$input-transition:                      border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+
+$form-text-margin-top:                  .25rem !default;
+
+$form-check-input-gutter:               1.25rem !default;
+$form-check-input-margin-y:             .3rem !default;
+$form-check-input-margin-x:             .25rem !default;
+
+$form-check-inline-margin-x:            .75rem !default;
+$form-check-inline-input-margin-x:      .3125rem !default;
+
+$form-group-margin-bottom:              1rem !default;
+
+$input-group-addon-color:               $input-color !default;
+$input-group-addon-bg:                  $gray-200 !default;
+$input-group-addon-border-color:        $input-border-color !default;
+
+$custom-control-gutter:                 .5rem !default;
+$custom-control-spacer-x:               1rem !default;
+
+$custom-control-indicator-size:         1rem !default;
+$custom-control-indicator-bg:           $gray-300 !default;
+$custom-control-indicator-bg-size:      50% 50% !default;
+$custom-control-indicator-box-shadow:   inset 0 .25rem .25rem rgba($black, .1) !default;
+
+$custom-control-indicator-disabled-bg:          $gray-200 !default;
+$custom-control-label-disabled-color:           $gray-600 !default;
+
+$custom-control-indicator-checked-color:        $component-active-color !default;
+$custom-control-indicator-checked-bg:           $component-active-bg !default;
+$custom-control-indicator-checked-disabled-bg:  rgba(theme-color("primary"), .5) !default;
+$custom-control-indicator-checked-box-shadow:   none !default;
+
+$custom-control-indicator-focus-box-shadow:     0 0 0 1px $body-bg, $input-btn-focus-box-shadow !default;
+
+$custom-control-indicator-active-color:         $component-active-color !default;
+$custom-control-indicator-active-bg:            lighten($component-active-bg, 35%) !default;
+$custom-control-indicator-active-box-shadow:    none !default;
+
+$custom-checkbox-indicator-border-radius:       $border-radius !default;
+$custom-checkbox-indicator-icon-checked:        str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), "#", "%23") !default;
+
+$custom-checkbox-indicator-indeterminate-bg:    $component-active-bg !default;
+$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default;
+$custom-checkbox-indicator-icon-indeterminate:  str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3E%3C/svg%3E"), "#", "%23") !default;
+$custom-checkbox-indicator-indeterminate-box-shadow: none !default;
+
+$custom-radio-indicator-border-radius:          50% !default;
+$custom-radio-indicator-icon-checked:           str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-indicator-checked-color}'/%3E%3C/svg%3E"), "#", "%23") !default;
+
+$custom-select-padding-y:           .375rem !default;
+$custom-select-padding-x:          .75rem !default;
+$custom-select-height:              $input-height !default;
+$custom-select-indicator-padding:   1rem !default; // Extra padding to account for the presence of the background-image based indicator
+$custom-select-line-height:         $input-btn-line-height !default;
+$custom-select-color:               $input-color !default;
+$custom-select-disabled-color:      $gray-600 !default;
+$custom-select-bg:                  $white !default;
+$custom-select-disabled-bg:         $gray-200 !default;
+$custom-select-bg-size:             8px 10px !default; // In pixels because image dimensions
+$custom-select-indicator-color:     $gray-800 !default;
+$custom-select-indicator:           str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"), "#", "%23") !default;
+$custom-select-border-width:        $input-btn-border-width !default;
+$custom-select-border-color:        $input-border-color !default;
+$custom-select-border-radius:       $border-radius !default;
+
+$custom-select-focus-border-color:  $input-focus-border-color !default;
+$custom-select-focus-box-shadow:    none !default;
+
+$custom-select-font-size-sm:        75% !default;
+$custom-select-height-sm:           $input-height-sm !default;
+
+$custom-select-font-size-lg:        125% !default;
+$custom-select-height-lg:           $input-height-lg !default;
+
+$custom-file-height:                $input-height !default;
+$custom-file-focus-border-color:    $input-focus-border-color !default;
+$custom-file-focus-box-shadow:      $custom-select-focus-box-shadow !default;
+
+$custom-file-padding-y:             $input-btn-padding-y !default;
+$custom-file-padding-x:             $input-btn-padding-x !default;
+$custom-file-line-height:           $input-btn-line-height !default;
+$custom-file-color:                 $input-color !default;
+$custom-file-bg:                    $input-bg !default;
+$custom-file-border-width:          $input-btn-border-width !default;
+$custom-file-border-color:          $input-border-color !default;
+$custom-file-border-radius:         $input-border-radius !default;
+$custom-file-box-shadow:            $custom-select-focus-box-shadow !default;
+$custom-file-button-color:          $custom-file-color !default;
+$custom-file-button-bg:             $input-group-addon-bg !default;
+$custom-file-text: (
+        en: "Browse"
+) !default;
+
+$custom-range-thumb-focus-box-shadow:        0 0 0 1px $body-bg, $input-btn-focus-box-shadow !default;
+
+
+// Form validation
+$form-feedback-margin-top:          $form-text-margin-top !default;
+$form-feedback-font-size:           $small-font-size !default;
+$form-feedback-valid-color:         theme-color("success") !default;
+$form-feedback-invalid-color:       theme-color("danger") !default;
+
+
+// Dropdowns
+//
+// Dropdown menu container and contents.
+
+$dropdown-min-width:                10rem !default;
+$dropdown-padding-y:                .5rem !default;
+$dropdown-spacer:                   .125rem !default;
+$dropdown-bg:                       $white !default;
+$dropdown-border-color:             rgba($black, .15) !default;
+$dropdown-border-radius:            $border-radius !default;
+$dropdown-border-width:             $border-width !default;
+$dropdown-divider-bg:               $gray-200 !default;
+$dropdown-box-shadow:               0 .5rem 1rem rgba($black, .175) !default;
+
+$dropdown-link-color:               $gray-900 !default;
+$dropdown-link-hover-color:         darken($gray-900, 5%) !default;
+$dropdown-link-hover-bg:            $gray-100 !default;
+
+$dropdown-link-active-color:        $component-active-color !default;
+$dropdown-link-active-bg:           $component-active-bg !default;
+
+$dropdown-link-disabled-color:      $gray-600 !default;
+
+$dropdown-item-padding-y:           .25rem !default;
+$dropdown-item-padding-x:           1rem !default;
+
+$dropdown-header-color:             $gray-600 !default;
+
+
+// Z-index master list
+//
+// Warning: Avoid customizing these values. They're used for a bird's eye view
+// of components dependent on the z-axis and are designed to all work together.
+
+$zindex-dropdown:                   1000 !default;
+$zindex-sticky:                     1020 !default;
+$zindex-fixed:                      1030 !default;
+$zindex-modal-backdrop:             1040 !default;
+$zindex-modal:                      1050 !default;
+$zindex-popover:                    1060 !default;
+$zindex-tooltip:                    1070 !default;
+
+// Navs
+
+$nav-link-padding-y:                .5rem !default;
+$nav-link-padding-x:                1rem !default;
+$nav-link-disabled-color:           $gray-600 !default;
+
+$nav-tabs-border-color:             $gray-300 !default;
+$nav-tabs-border-width:             $border-width !default;
+$nav-tabs-border-radius:            $border-radius !default;
+$nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color !default;
+$nav-tabs-link-active-color:        $gray-700 !default;
+$nav-tabs-link-active-bg:           $body-bg !default;
+$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;
+
+$nav-pills-border-radius:           $border-radius !default;
+$nav-pills-link-active-color:       $component-active-color !default;
+$nav-pills-link-active-bg:          $component-active-bg !default;
+
+// Navbar
+
+$navbar-padding-y:                  ($spacer / 2) !default;
+$navbar-padding-x:                  ($spacer / 2) !default;
+
+$navbar-nav-link-padding-x:         1rem !default;
+
+$navbar-brand-font-size:            $font-size-lg !default;
+// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
+$nav-link-height:                   ($font-size-base * $line-height-base + $nav-link-padding-y * 2) !default;
+$navbar-brand-height:               $navbar-brand-font-size * $line-height-base !default;
+$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) / 2 !default;
+
+$navbar-toggler-padding-y:          .25rem !default;
+$navbar-toggler-padding-x:          .75rem !default;
+$navbar-toggler-font-size:          $font-size-lg !default;
+$navbar-toggler-border-radius:      $btn-border-radius !default;
+
+$navbar-dark-color:                 rgba($white, .75) !default;
+$navbar-dark-hover-color:           rgba($white, 1) !default;
+$navbar-dark-active-color:          $white !default;
+$navbar-dark-disabled-color:        rgba($white, .25) !default;
+$navbar-dark-toggler-icon-bg:       str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
+$navbar-dark-toggler-border-color:  rgba($white, .1) !default;
+
+$navbar-light-color:                rgba($black, .5) !default;
+$navbar-light-hover-color:          rgba($black, .7) !default;
+$navbar-light-active-color:         rgba($black, .9) !default;
+$navbar-light-disabled-color:       rgba($black, .3) !default;
+$navbar-light-toggler-icon-bg:      str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
+$navbar-light-toggler-border-color: rgba($black, .1) !default;
+
+// Pagination
+
+$pagination-padding-y:              .5rem !default;
+$pagination-padding-x:              .75rem !default;
+$pagination-padding-y-sm:           .25rem !default;
+$pagination-padding-x-sm:           .5rem !default;
+$pagination-padding-y-lg:           .75rem !default;
+$pagination-padding-x-lg:           1.5rem !default;
+$pagination-line-height:            1.25 !default;
+
+$pagination-color:                  $link-color !default;
+$pagination-bg:                     $white !default;
+$pagination-border-width:           $border-width !default;
+$pagination-border-color:           $gray-300 !default;
+
+$pagination-focus-box-shadow:       $input-btn-focus-box-shadow !default;
+
+$pagination-hover-color:            $link-hover-color !default;
+$pagination-hover-bg:               $gray-200 !default;
+$pagination-hover-border-color:     $gray-300 !default;
+
+$pagination-active-color:           $component-active-color !default;
+$pagination-active-bg:              $component-active-bg !default;
+$pagination-active-border-color:    $pagination-active-bg !default;
+
+$pagination-disabled-color:         $gray-600 !default;
+$pagination-disabled-bg:            $white !default;
+$pagination-disabled-border-color:  $gray-300 !default;
+
+
+// Jumbotron
+
+$jumbotron-padding:                 2rem !default;
+$jumbotron-bg:                      $gray-200 !default;
+
+
+// Cards
+
+$card-spacer-y:                     .75rem !default;
+$card-spacer-x:                     1.25rem !default;
+$card-border-width:                 0 !default; //$border-width !default;
+$card-border-radius:                $border-radius !default;
+$card-border-color:                 rgba($black, .125) !default;
+$card-inner-border-radius:          calc(#{$card-border-radius} - #{$card-border-width}) !default;
+$card-cap-bg:                       rgba($black, .03) !default;
+$card-bg:                           $white !default;
+
+$card-img-overlay-padding:          1.25rem !default;
+
+$card-group-margin:                 ($grid-gutter-width / 2) !default;
+$card-deck-margin:                  $card-group-margin !default;
+
+$card-columns-count:                3 !default;
+$card-columns-gap:                  1.25rem !default;
+$card-columns-margin:               $card-spacer-y !default;
+
+
+// Tooltips
+
+$tooltip-font-size:           $font-size-sm !default;
+$tooltip-max-width:           200px !default;
+$tooltip-color:               $white !default;
+$tooltip-bg:                  $black !default;
+$tooltip-border-radius:        $border-radius !default;
+$tooltip-opacity:             .9 !default;
+$tooltip-padding-y:           .25rem !default;
+$tooltip-padding-x:           .5rem !default;
+$tooltip-margin:              0 !default;
+
+$tooltip-arrow-width:         .8rem !default;
+$tooltip-arrow-height:        .4rem !default;
+$tooltip-arrow-color:         $tooltip-bg !default;
+
+// Form tooltips must come after regular tooltips
+$form-feedback-tooltip-padding-y:     $tooltip-padding-y !default;
+$form-feedback-tooltip-padding-x:     $tooltip-padding-x !default;
+$form-feedback-tooltip-font-size:     $tooltip-font-size !default;
+$form-feedback-tooltip-line-height:   $line-height-base !default;
+$form-feedback-tooltip-opacity:       $tooltip-opacity !default;
+$form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
+
+// Popovers
+
+$popover-font-size:                 $font-size-sm !default;
+$popover-bg:                        $white !default;
+$popover-max-width:                 276px !default;
+$popover-border-width:              $border-width !default;
+$popover-border-color:              rgba($black, .2) !default;
+$popover-border-radius:             $border-radius-lg !default;
+$popover-box-shadow:                0 .25rem .5rem rgba($black, .2) !default;
+
+$popover-header-bg:                 darken($popover-bg, 3%) !default;
+$popover-header-color:              $headings-color !default;
+$popover-header-padding-y:          .5rem !default;
+$popover-header-padding-x:          .75rem !default;
+
+$popover-body-color:                $body-color !default;
+$popover-body-padding-y:            $popover-header-padding-y !default;
+$popover-body-padding-x:            $popover-header-padding-x !default;
+
+$popover-arrow-width:               1rem !default;
+$popover-arrow-height:              .5rem !default;
+$popover-arrow-color:               $popover-bg !default;
+
+$popover-arrow-outer-color:         fade-in($popover-border-color, .05) !default;
+
+
+// Badges
+
+$badge-font-size:                   75% !default;
+$badge-font-weight:                 $font-weight-bold !default;
+$badge-padding-y:                   .25em !default;
+$badge-padding-x:                   .4em !default;
+$badge-border-radius:               $border-radius !default;
+
+$badge-pill-padding-x:              .6em !default;
+// Use a higher than normal value to ensure completely rounded edges when
+// customizing padding or font-size on labels.
+$badge-pill-border-radius:          10rem !default;
+
+
+// Modals
+
+// Padding applied to the modal body
+$modal-inner-padding:         1rem !default;
+
+$modal-dialog-margin:         .5rem !default;
+$modal-dialog-margin-y-sm-up: 1.75rem !default;
+
+$modal-title-line-height:           $line-height-base !default;
+
+$modal-content-bg:               $white !default;
+$modal-content-border-color:     rgba($black, .2) !default;
+$modal-content-border-width:     $border-width !default;
+$modal-content-box-shadow-xs:    0 .25rem .5rem rgba($black, .5) !default;
+$modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .5) !default;
+
+$modal-backdrop-bg:           $black !default;
+$modal-backdrop-opacity:      .5 !default;
+$modal-header-border-color:   $gray-200 !default;
+$modal-footer-border-color:   $modal-header-border-color !default;
+$modal-header-border-width:   $modal-content-border-width !default;
+$modal-footer-border-width:   $modal-header-border-width !default;
+$modal-header-padding:        1rem !default;
+
+$modal-lg:                          800px !default;
+$modal-md:                          500px !default;
+$modal-sm:                          300px !default;
+
+$modal-transition:                  transform .3s ease-out !default;
+
+
+// Alerts
+//
+// Define alert colors, border radius, and padding.
+
+$alert-padding-y:                   .75rem !default;
+$alert-padding-x:                   1.25rem !default;
+$alert-margin-bottom:               1rem !default;
+$alert-border-radius:               $border-radius !default;
+$alert-link-font-weight:            $font-weight-bold !default;
+$alert-border-width:                $border-width !default;
+
+$alert-bg-level:                    -10 !default;
+$alert-border-level:                -9 !default;
+$alert-color-level:                 6 !default;
+
+
+// Progress bars
+
+$progress-height:                   1rem !default;
+$progress-font-size:                ($font-size-base * .75) !default;
+$progress-bg:                       $gray-200 !default;
+$progress-border-radius:            $border-radius !default;
+$progress-box-shadow:               inset 0 .1rem .1rem rgba($black, .1) !default;
+$progress-bar-color:                $white !default;
+$progress-bar-bg:                   theme-color("primary") !default;
+$progress-bar-animation-timing:     1s linear infinite !default;
+$progress-bar-transition:           width .6s ease !default;
+
+// List group
+
+$list-group-bg:                     $white !default;
+$list-group-border-color:           rgba($black, .125) !default;
+$list-group-border-width:           $border-width !default;
+$list-group-border-radius:          $border-radius !default;
+
+$list-group-item-padding-y:         .75rem !default;
+$list-group-item-padding-x:         1.25rem !default;
+
+$list-group-hover-bg:               $gray-100 !default;
+$list-group-active-color:           $component-active-color !default;
+$list-group-active-bg:              $component-active-bg !default;
+$list-group-active-border-color:    $list-group-active-bg !default;
+
+$list-group-disabled-color:         $gray-600 !default;
+$list-group-disabled-bg:            $list-group-bg !default;
+
+$list-group-action-color:           $gray-700 !default;
+$list-group-action-hover-color:     $list-group-action-color !default;
+
+$list-group-action-active-color:    $body-color !default;
+$list-group-action-active-bg:       $gray-200 !default;
+
+
+// Image thumbnails
+
+$thumbnail-padding:                 .25rem !default;
+$thumbnail-bg:                      $body-bg !default;
+$thumbnail-border-width:            $border-width !default;
+$thumbnail-border-color:            $gray-300 !default;
+$thumbnail-border-radius:           $border-radius !default;
+$thumbnail-box-shadow:              0 1px 2px rgba($black, .075) !default;
+
+
+// Figures
+
+$figure-caption-font-size:          90% !default;
+$figure-caption-color:              $gray-600 !default;
+
+
+// Breadcrumbs
+
+$breadcrumb-padding-y:              .75rem !default;
+$breadcrumb-padding-x:              1rem !default;
+$breadcrumb-item-padding:           .5rem !default;
+
+$breadcrumb-margin-bottom:          1rem !default;
+
+$breadcrumb-bg:                     $gray-200 !default;
+$breadcrumb-divider-color:          $gray-600 !default;
+$breadcrumb-active-color:           $gray-600 !default;
+$breadcrumb-divider:                "/" !default;
+
+
+// Carousel
+
+$carousel-control-color:            $white !default;
+$carousel-control-width:            15% !default;
+$carousel-control-opacity:          .5 !default;
+
+$carousel-indicator-width:          30px !default;
+$carousel-indicator-height:         3px !default;
+$carousel-indicator-spacer:         3px !default;
+$carousel-indicator-active-bg:      $white !default;
+
+$carousel-caption-width:            70% !default;
+$carousel-caption-color:            $white !default;
+
+$carousel-control-icon-width:       20px !default;
+
+$carousel-control-prev-icon-bg:     str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"), "#", "%23") !default;
+$carousel-control-next-icon-bg:     str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"), "#", "%23") !default;
+
+$carousel-transition:               transform .6s ease !default;
+
+
+// Close
+
+$close-font-size:                   $font-size-base * 1.5 !default;
+$close-font-weight:                 $font-weight-bold !default;
+$close-color:                       $black !default;
+$close-text-shadow:                 0 1px 0 $white !default;
+
+// Code
+
+$code-font-size:                    87.5% !default;
+$code-color:                        $pink !default;
+
+$kbd-padding-y:                     .2rem !default;
+$kbd-padding-x:                     .4rem !default;
+$kbd-font-size:                     $code-font-size !default;
+$kbd-color:                         $white !default;
+$kbd-bg:                            $gray-900 !default;
+
+$pre-color:                         $gray-900 !default;
+$pre-scrollable-max-height:         340px !default;
+
+
+// Printing
+$print-page-size:                   a3 !default;
+$print-body-min-width:              map-get($grid-breakpoints, "lg") !default;

ShopBundle/Resources/public/sass/backend/adminlte/_brand.scss

@@ -0,0 +1,76 @@
+//
+// Component: Brand
+//
+
+.brand-link {
+  $brand-link-padding-y: $navbar-brand-padding-y + $navbar-padding-y;
+  display: block;
+  font-size: $navbar-brand-font-size;
+  line-height: $line-height-lg;
+  padding: $brand-link-padding-y $sidebar-padding-x;
+  transition: width $transition-speed $transition-fn;
+  white-space: nowrap;
+
+  &:hover {
+    color: $white;
+    text-decoration: none;
+  }
+
+  .text-sm & {
+    font-size: inherit;
+  }
+
+  [class*='sidebar-dark'] & {
+    border-bottom: 1px solid lighten($dark, 10%);
+    color: rgba($white, .8);
+  }
+
+  [class*='sidebar-light'] & {
+    border-bottom: 1px solid $gray-300;
+    color: rgba($black, .8);
+  }
+
+  .brand-image {
+    float: left;
+    line-height: .8;
+    margin-left: .8rem;
+    margin-right: .5rem;
+    margin-top: -3px;
+    max-height: 33px;
+    width: auto;
+  }
+
+  .brand-image-xs {
+    float: left;
+    line-height: .8;
+    margin-top: -.1rem;
+    max-height: 33px;
+    width: auto;
+  }
+
+  .brand-image-xl {
+    line-height: .8;
+    max-height: 40px;
+    width: auto;
+  }
+
+  &.text-sm,
+  .text-sm & {
+    .brand-image {
+      height: 29px;
+      margin-bottom: -.25rem;
+      margin-left: .95rem;
+      margin-top: -.25rem;
+    }
+
+    .brand-image-xs {
+      margin-top: -.2rem;
+      max-height: 29px;
+    }
+
+    .brand-image-xl {
+      margin-top: -.225rem;
+      max-height: 38px;
+    }
+  }
+}

ShopBundle/Resources/public/sass/backend/adminlte/_buttons.scss

@@ -0,0 +1,108 @@
+//
+// Component: Button
+//
+
+.btn {
+  &.disabled,
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  // Flat buttons
+  &.btn-flat {
+    @include border-radius(0);
+    border-width: 1px;
+    box-shadow: none;
+  }
+
+  // input file btn
+  &.btn-file {
+    overflow: hidden;
+    position: relative;
+
+    > input[type='file'] {
+      background: $white;
+      cursor: inherit;
+      display: block;
+      font-size: 100px;
+      min-height: 100%;
+      min-width: 100%;
+      opacity: 0;
+      outline: none;
+      position: absolute;
+      right: 0;
+      text-align: right;
+      top: 0;
+    }
+  }
+
+  .text-sm & {
+    font-size: $font-size-sm !important;
+  }
+}
+
+// Button color variations
+.btn-default {
+  background-color: $button-default-background-color;
+  border-color: $button-default-border-color;
+  color: $button-default-color;
+
+  &:hover,
+  &:active,
+  &.hover {
+    background-color: darken($button-default-background-color, 5%);
+    color: darken($button-default-color, 10%);
+  }
+}
+
+// Application buttons
+.btn-app {
+  @include border-radius(3px);
+  background-color: $button-default-background-color;
+  border: 1px solid $button-default-border-color;
+  color: $gray-600;
+  font-size: 12px;
+  height: 60px;
+  margin: 0 0 10px 10px;
+  min-width: 80px;
+  padding: 15px 5px;
+  position: relative;
+  text-align: center;
+
+  // Icons within the btn
+  > .fa,
+  > .fas,
+  > .far,
+  > .fab,
+  > .glyphicon,
+  > .ion {
+    display: block;
+    font-size: 20px;
+  }
+
+  &:hover {
+    background: $button-default-background-color;
+    border-color: darken($button-default-border-color, 20%);
+    color: $button-default-color;
+  }
+
+  &:active,
+  &:focus {
+    @include box-shadow(inset 0 3px 5px rgba($black, 0.125));
+  }
+
+  // The badge
+  > .badge {
+    font-size: 10px;
+    font-weight: 400;
+    position: absolute;
+    right: -10px;
+    top: -3px;
+  }
+}
+
+// Extra Button Size
+
+.btn-xs {
+  @include button-size($button-padding-y-xs, $button-padding-x-xs, $button-font-size-xs, $button-line-height-xs, $button-border-radius-xs);
+}

ShopBundle/Resources/public/sass/backend/adminlte/_callout.scss

@@ -0,0 +1,51 @@
+//
+// Component: Callout
+//
+
+// Base styles (regardless of theme)
+.callout {
+  @if $enable-rounded {
+    @include border-radius($border-radius);
+  }
+
+  @if $enable-shadows {
+    box-shadow: map-get($elevations, 1);
+  } @else {
+    border: 1px solid $gray-300;
+  }
+
+  background-color: $white;
+  border-left: 5px solid $gray-200;
+  margin-bottom: map-get($spacers, 3);
+  padding: 1rem;
+
+  a {
+    color: $gray-700;
+    text-decoration: underline;
+
+    &:hover {
+      color: $gray-200;
+    }
+  }
+
+  p:last-child {
+    margin-bottom: 0;
+  }
+
+  // Themes for different contexts
+  &.callout-danger {
+    border-left-color: darken(theme-color('danger'), 10%);
+  }
+
+  &.callout-warning {
+    border-left-color: darken(theme-color('warning'), 10%);
+  }
+
+  &.callout-info {
+    border-left-color: darken(theme-color('info'), 10%);
+  }
+
+  &.callout-success {
+    border-left-color: darken(theme-color('success'), 10%);
+  }
+}

ShopBundle/Resources/public/sass/backend/adminlte/_cards.scss

@@ -0,0 +1,474 @@
+//
+// Component: Cards
+//
+
+// Color variants
+@each $name, $color in $theme-colors {
+  @include cards-variant($name, $color);
+}
+
+@each $name, $color in $colors {
+  @include cards-variant($name, $color);
+}
+
+.card {
+  @include box-shadow($card-shadow);
+  margin-bottom: map-get($spacers, 3);
+
+  &.bg-dark {
+    .card-header {
+      border-color: $card-dark-border-color;
+    }
+
+    &,
+    .card-body {
+      color: $white;
+    }
+  }
+
+  &.maximized-card {
+    height: 100% !important;
+    left: 0;
+    max-height: 100% !important;
+    max-width: 100% !important;
+    position: fixed;
+    top: 0;
+    width: 100% !important;
+    z-index: 9999;
+
+    &.was-collapsed .card-body {
+      display: block !important;
+    }
+
+    [data-widget='collapse'] {
+      display: none;
+    }
+
+    .card-header,
+    .card-footer {
+      @include border-radius(0 !important);
+    }
+  }
+
+  // collapsed mode
+  &.collapsed-card {
+    .card-body,
+    .card-footer {
+      display: none;
+    }
+  }
+
+  .nav.flex-column {
+    > li {
+      border-bottom: 1px solid $card-border-color;
+      margin: 0;
+
+      &:last-of-type {
+        border-bottom: 0;
+      }
+    }
+  }
+
+  // fixed height to 300px
+  &.height-control {
+    .card-body {
+      max-height: 300px;
+      overflow: auto;
+    }
+  }
+
+  .border-right {
+    border-right: 1px solid $card-border-color;
+  }
+
+  .border-left {
+    border-left: 1px solid $card-border-color;
+  }
+
+  &.card-tabs {
+    &:not(.card-outline) {
+      & > .card-header {
+        border-bottom: 0;
+
+        .nav-item {
+          &:first-child .nav-link {
+            margin-left: -1px;
+          }
+        }
+      }
+    }
+
+    &.card-outline {
+      .nav-item {
+        border-bottom: 0;
+
+        &:first-child .nav-link {
+          border-left: 0;
+          margin-left: 0;
+        }
+      }
+    }
+
+    .card-tools {
+      margin: .3rem .5rem;
+    }
+
+    &:not(.expanding-card).collapsed-card {
+      .card-header {
+        border-bottom: 0;
+
+        .nav-tabs {
+          border-bottom: 0;
+
+          .nav-item {
+            margin-bottom: 0;
+          }
+        }
+      }
+    }
+
+    &.expanding-card {
+      .card-header {
+        .nav-tabs {
+          .nav-item {
+            margin-bottom: -1px;
+          }
+        }
+      }
+    }
+  }
+
+  &.card-outline-tabs {
+    border-top: 0;
+
+    .card-header {
+      .nav-item {
+        &:first-child .nav-link {
+          border-left: 0;
+          margin-left: 0;
+        }
+      }
+
+      a {
+        border-top: 3px solid transparent;
+
+        &:hover {
+          border-top: 3px solid $nav-tabs-border-color;
+        }
+
+        &.active {
+          &:hover {
+            margin-top: 0;
+          }
+        }
+      }
+    }
+
+    .card-tools {
+      margin: .5rem .5rem .3rem;
+    }
+
+    &:not(.expanding-card).collapsed-card .card-header {
+      border-bottom: 0;
+
+      .nav-tabs {
+        border-bottom: 0;
+
+        .nav-item {
+          margin-bottom: 0;
+        }
+      }
+    }
+
+    &.expanding-card {
+      .card-header {
+        .nav-tabs {
+          .nav-item {
+            margin-bottom: -1px;
+          }
+        }
+      }
+    }
+  }
+
+}
+
+// Maximized Card Body Scroll fix
+html.maximized-card {
+  overflow: hidden;
+}
+
+// Add clearfix to header, body and footer
+.card-header,
+.card-body,
+.card-footer {
+  @include clearfix;
+}
+
+// Box header
+.card-header {
+  background-color: transparent;
+  border-bottom: 1px solid $card-border-color;
+  padding: (($card-spacer-y / 2) * 2) $card-spacer-x;
+  position: relative;
+
+  @if $enable-rounded {
+    @include border-top-radius($border-radius);
+  }
+
+  .collapsed-card & {
+    border-bottom: 0;
+  }
+
+  > .card-tools {
+    float: right;
+    margin-right: -$card-spacer-x / 2;
+
+    .input-group,
+    .nav,
+    .pagination {
+      margin-bottom: -$card-spacer-y / 2.5;
+      margin-top: -$card-spacer-y / 2.5;
+    }
+
+    [data-toggle='tooltip'] {
+      position: relative;
+    }
+  }
+}
+
+.card-title {
+  float: left;
+  font-size: $card-title-font-size;
+  font-weight: $card-title-font-weight;
+  margin: 0;
+}
+
+.card-text {
+  clear: both;
+}
+
+
+// Box Tools Buttons
+.btn-tool {
+  background: transparent;
+  color: $gray-500;
+  font-size: $font-size-sm;
+  margin: -(($card-spacer-y / 2) * 2) 0;
+  padding: .25rem .5rem;
+
+  .btn-group.show &,
+  &:hover {
+    color: $gray-700;
+  }
+
+  .show &,
+  &:focus {
+    box-shadow: none !important;
+  }
+}
+
+.text-sm {
+  .card-title {
+    font-size: $card-title-font-size-sm;
+  }
+
+  .nav-link {
+    padding: $card-nav-link-padding-sm-y $card-nav-link-padding-sm-x;
+  }
+}
+
+// Box Body
+.card-body {
+  // @include border-radius-sides(0, 0, $border-radius, $border-radius);
+  // .no-header & {
+  //   @include border-top-radius($border-radius);
+  // }
+
+  // Tables within the box body
+  > .table {
+    margin-bottom: 0;
+
+    > thead > tr > th,
+    > thead > tr > td {
+      border-top-width: 0;
+    }
+  }
+
+  // Calendar within the box body
+  .fc {
+    margin-top: 5px;
+  }
+
+  .full-width-chart {
+    margin: -19px;
+  }
+
+  &.p-0 .full-width-chart {
+    margin: -9px;
+  }
+}
+
+.chart-legend {
+  @include list-unstyled;
+  margin: 10px 0;
+
+  > li {
+    @media (max-width: map-get($grid-breakpoints, sm)) {
+      float: left;
+      margin-right: 10px;
+    }
+  }
+}
+
+// Comment Box
+.card-comments {
+  background: $gray-100;
+
+  .card-comment {
+    @include clearfix;
+    border-bottom: 1px solid $gray-200;
+    padding: 8px 0;
+
+    &:last-of-type {
+      border-bottom: 0;
+    }
+
+    &:first-of-type {
+      padding-top: 0;
+    }
+
+    img {
+      height: $card-img-size;
+      width: $card-img-size;
+      float: left;
+    }
+  }
+
+  .comment-text {
+    color: lighten($gray-700, 20%);
+    margin-left: 40px;
+  }
+
+  .username {
+    color: $gray-700;
+    display: block;
+    font-weight: 600;
+  }
+
+  .text-muted {
+    font-size: 12px;
+    font-weight: 400;
+  }
+}
+
+// Widgets
+//-----------
+
+// Widget: TODO LIST
+.todo-list {
+  list-style: none;
+  margin: 0;
+  overflow: auto;
+  padding: 0;
+
+  // Todo list element
+  > li {
+    @include border-radius(2px);
+    background: $gray-100;
+    border-left: 2px solid $gray-200;
+    color: $gray-700;
+    margin-bottom: 2px;
+    padding: 10px;
+
+    &:last-of-type {
+      margin-bottom: 0;
+    }
+
+    > input[type='checkbox'] {
+      margin: 0 10px 0 5px;
+    }
+
+    .text {
+      display: inline-block;
+      font-weight: 600;
+      margin-left: 5px;
+    }
+
+    // Time labels
+    .badge {
+      font-size: .7rem;
+      margin-left: 10px;
+    }
+
+    // Tools and options box
+    .tools {
+      color: theme-color('danger');
+      display: none;
+      float: right;
+
+      // icons
+      > .fa,
+      > .fas,
+      > .far,
+      > .fab,
+      > .glyphicon,
+      > .ion {
+        cursor: pointer;
+        margin-right: 5px;
+      }
+    }
+
+    &:hover .tools {
+      display: inline-block;
+    }
+
+    &.done {
+      color: darken($gray-500, 25%);
+
+      .text {
+        font-weight: 500;
+        text-decoration: line-through;
+      }
+
+      .badge {
+        background: $gray-500 !important;
+      }
+    }
+  }
+
+  // Color variants
+  @each $name, $color in $theme-colors {
+    .#{$name} {
+      border-left-color: $color;
+    }
+  }
+
+  @each $name, $color in $colors {
+    .#{$name} {
+      border-left-color: $color;
+    }
+  }
+
+  .handle {
+    cursor: move;
+    display: inline-block;
+    margin: 0 5px;
+  }
+}
+
+// END TODO WIDGET
+
+// Input in box
+.card-input {
+  max-width: 200px;
+}
+
+// Nav Tabs override
+.card-default {
+  .nav-item {
+    &:first-child .nav-link {
+      border-left: 0;
+    }
+  }
+}

ShopBundle/Resources/public/sass/backend/adminlte/_carousel.scss

@@ -0,0 +1,24 @@
+//
+// Component: Carousel
+//
+
+.carousel-control {
+  &.left,
+  &.right {
+    background-image: none;
+  }
+
+  > .fa,
+  > .fas,
+  > .far,
+  > .fab,
+  > .glyphicon,
+  > .ion {
+    display: inline-block;
+    font-size: 40px;
+    margin-top: -20px;
+    position: absolute;
+    top: 50%;
+    z-index: 5;
+  }
+}

ShopBundle/Resources/public/sass/backend/adminlte/_colors.scss

@@ -0,0 +1,91 @@
+//
+// Misc: Colors
+//
+
+// Background colors (theme colors)
+@each $name, $color in $theme-colors {
+  @include background-variant($name, $color);
+}
+
+// Background colors (colors)
+@each $name, $color in $colors {
+  @include background-variant($name, $color);
+}
+
+.bg-gray {
+  background-color: $gray-500;
+  color: color-yiq($gray-500);
+}
+
+.bg-gray-light {
+  background-color: lighten($gray-200, 3%);
+  color: color-yiq(lighten($gray-200, 3%)) !important;
+}
+
+.bg-black {
+  background-color: $black;
+  color: color-yiq($black) !important;
+}
+
+.bg-white {
+  background-color: $white;
+  color: color-yiq($white) !important;
+}
+
+// Gradient Background colors (theme colors)
+@each $name, $color in $theme-colors {
+  @include background-gradient-variant($name, $color);
+}
+
+// Gradient Background colors (colors)
+@each $name, $color in $colors {
+  @include background-gradient-variant($name, $color);
+}
+
+// Backgrund Color Disabled
+[class^='bg-'].disabled {
+  opacity: .65;
+}
+
+// Text muted hover
+a.text-muted:hover {
+  color: theme-color(primary) !important;
+}
+
+// Link Styles
+.link-muted {
+  color: darken($gray-500, 30%);
+
+  &:hover,
+  &:focus {
+    color: darken($gray-500, 40%);
+  }
+}
+
+.link-black {
+  color: $gray-600;
+
+  &:hover,
+  &:focus {
+    color: lighten($gray-500, 20%);
+  }
+}
+
+// Accent colors (theme colors)
+@each $name, $color in $theme-colors {
+  @include accent-variant($name, $color);
+}
+
+// Accent colors (colors)
+@each $name, $color in $colors {
+  @include accent-variant($name, $color);
+}
+
+// Accent button override fix
+[class*="accent-"] {
+  @each $name, $color in $theme-colors {
+    a.btn-#{$name} {
+      color: color-yiq($color);
+    }
+  }
+}

ShopBundle/Resources/public/sass/backend/adminlte/_control-sidebar.scss

@@ -0,0 +1,178 @@
+//
+// Component: Control Sidebar
+//
+ 
+html.control-sidebar-animate {
+  overflow-x: hidden;
+}
+
+.control-sidebar {
+  bottom: $main-footer-height;
+  position: absolute;
+  top: $main-header-height;
+  z-index: $zindex-control-sidebar;
+  
+  &,
+  &::before {
+    bottom: $main-footer-height;
+    display: none;
+    right: -$control-sidebar-width;
+    width: $control-sidebar-width;
+    @include transition(right $transition-speed $transition-fn, display $transition-speed $transition-fn);
+  }
+
+  &::before {
+    content: '';
+    display: block;
+    position: fixed;
+    top: 0;
+    z-index: -1;
+  }
+}
+
+body.text-sm {
+  .control-sidebar {
+    bottom: $main-footer-height-sm;
+    top: $main-header-height-sm;
+  }
+}
+
+.main-header.text-sm ~ .control-sidebar {
+  top: $main-header-height-sm;
+}
+
+.main-footer.text-sm ~ .control-sidebar {
+  bottom: $main-footer-height-sm;
+}
+
+.control-sidebar-push-slide {
+    .content-wrapper,
+    .main-footer {
+      @include transition(margin-right $transition-speed $transition-fn);
+    }
+  }
+
+// Control sidebar open state
+.control-sidebar-open {
+  .control-sidebar {
+    display: block;
+
+    &,
+    &::before {
+      right: 0;
+    }
+  }
+
+  &.control-sidebar-push,
+  &.control-sidebar-push-slide {
+    .content-wrapper,
+    .main-footer {
+      margin-right: $control-sidebar-width;
+    }
+  }
+}
+
+// Control sidebar slide over content state
+.control-sidebar-slide-open {
+  .control-sidebar {
+    display: block;
+
+    &,
+    &::before {
+      right: 0;
+      @include transition(right $transition-speed $transition-fn, display $transition-speed $transition-fn);
+    }
+  }
+
+  &.control-sidebar-push,
+  &.control-sidebar-push-slide {
+    .content-wrapper,
+    .main-footer {
+      margin-right: $control-sidebar-width;
+    }
+  }
+}
+
+// Dark skin
+.control-sidebar-dark {
+  &,
+  a,
+  .nav-link {
+    color: $sidebar-dark-color;
+  }
+
+  //  Background
+  & {
+    background: $sidebar-dark-bg;
+  }
+
+  a:hover {
+    color: $sidebar-dark-hover-color;
+  }
+
+  // Headers and labels
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  label {
+    color: $sidebar-dark-hover-color;
+  }
+
+  // Tabs
+  .nav-tabs {
+    background-color: $sidebar-dark-hover-bg;
+    border-bottom: 0;
+    margin-bottom: 5px;
+
+    .nav-item {
+      margin: 0;
+    }
+
+    .nav-link {
+      border-radius: 0;
+      padding: 10px 20px;
+      position: relative;
+      text-align: center;
+
+      &,
+      &:hover,
+      &:active,
+      &:focus,
+      &.active {
+        border: 0;
+      }
+
+      &:hover,
+      &:active,
+      &:focus,
+      &.active {
+        border-bottom-color: transparent;
+        border-left-color: transparent;
+        border-top-color: transparent;
+        color: $sidebar-dark-hover-color;
+      }
+
+      &.active {
+        background-color: $sidebar-dark-bg;
+      }
+    }
+  }
+
+  .tab-pane {
+    padding: 10px 15px;
+  }
+}
+
+// Light skin
+.control-sidebar-light {
+  color: lighten($sidebar-light-color, 10%);
+
+  //  Background
+  & {
+    background: $sidebar-light-bg;
+    border-left: $main-header-bottom-border;
+  }
+}

ShopBundle/Resources/public/sass/backend/adminlte/_direct-chat.scss

@@ -0,0 +1,224 @@
+//
+// Component: Direct Chat
+//
+ 
+.direct-chat {
+  .card-body {
+    overflow-x: hidden;
+    padding: 0;
+    position: relative;
+  }
+
+  &.chat-pane-open {
+    .direct-chat-contacts {
+      @include translate(0, 0);
+    }
+  }
+
+
+  &.timestamp-light {
+    .direct-chat-timestamp {
+      color: lighten(color-yiq($yiq-text-light), 10%);
+    }
+  }
+
+  &.timestamp-dark {
+    .direct-chat-timestamp {
+      color: darken(color-yiq($yiq-text-dark), 20%);
+    }
+  }
+}
+
+.direct-chat-messages {
+  @include translate(0, 0);
+  height: 250px;
+  overflow: auto;
+  padding: 10px;
+}
+
+.direct-chat-msg,
+.direct-chat-text {
+  display: block;
+}
+
+.direct-chat-msg {
+  @include clearfix;
+  margin-bottom: 10px;
+}
+
+.direct-chat-messages,
+.direct-chat-contacts {
+  transition: transform .5s ease-in-out;
+}
+
+.direct-chat-text {
+  @if $enable-rounded {
+    @include border-radius($border-radius-lg);
+  }
+
+  background: $direct-chat-default-msg-bg;
+  border: 1px solid $direct-chat-default-msg-border-color;
+  color: $direct-chat-default-font-color;
+  margin: 5px 0 0 50px;
+  padding: 5px 10px;
+  position: relative;
+
+  //Create the arrow
+  &::after,
+  &::before {
+    border: solid transparent;
+    border-right-color: $direct-chat-default-msg-border-color;
+    content: ' ';
+    height: 0;
+    pointer-events: none;
+    position: absolute;
+    right: 100%;
+    top: 15px;
+    width: 0;
+  }
+
+  &::after {
+    border-width: 5px;
+    margin-top: -5px;
+  }
+
+  &::before {
+    border-width: 6px;
+    margin-top: -6px;
+  }
+
+  .right & {
+    margin-left: 0;
+    margin-right: 50px;
+
+    &::after,
+    &::before {
+      border-left-color: $direct-chat-default-msg-border-color;
+      border-right-color: transparent;
+      left: 100%;
+      right: auto;
+    }
+  }
+}
+
+.direct-chat-img {
+  @include border-radius(50%);
+  float: left;
+  height: 40px;
+  width: 40px;
+
+  .right & {
+    float: right;
+  }
+}
+
+.direct-chat-infos {
+  display: block;
+  font-size: $font-size-sm;
+  margin-bottom: 2px;
+}
+
+.direct-chat-name {
+  font-weight: 600;
+}
+
+.direct-chat-timestamp {
+  color: darken($gray-500, 25%);
+}
+
+//Direct chat contacts pane
+.direct-chat-contacts-open {
+  .direct-chat-contacts {
+    @include translate(0, 0);
+  }
+}
+
+.direct-chat-contacts {
+  @include translate(101%, 0);
+  background: $dark;
+  bottom: 0;
+  color: $white;
+  height: 250px;
+  overflow: auto;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+
+.direct-chat-contacts-light {
+  background: $light;
+
+  .contacts-list-name {
+    color: $gray-700;
+  }
+
+  .contacts-list-date {
+    color: $gray-600;
+  }
+
+  .contacts-list-msg {
+    color: darken($gray-600, 10%);
+  }
+}
+
+//Contacts list -- for displaying contacts in direct chat contacts pane
+.contacts-list {
+  @include list-unstyled;
+
+  > li {
+    @include clearfix;
+    border-bottom: 1px solid rgba($black, 0.2);
+    margin: 0;
+    padding: 10px;
+
+    &:last-of-type {
+      border-bottom: 0;
+    }
+  }
+}
+
+.contacts-list-img {
+  @include border-radius(50%);
+  float: left;
+  width: 40px;
+}
+
+.contacts-list-info {
+  color: $white;
+  margin-left: 45px;
+}
+
+.contacts-list-name,
+.contacts-list-status {
+  display: block;
+}
+
+.contacts-list-name {
+  font-weight: 600;
+}
+
+.contacts-list-status {
+  font-size: $font-size-sm;
+}
+
+.contacts-list-date {
+  color: $gray-400;
+  font-weight: normal;
+}
+
+.contacts-list-msg {
+  color: darken($gray-400, 10%);
+}
+
+// Color variants
+@each $name, $color in $theme-colors {
+  .direct-chat-#{$name} {
+    @include direct-chat-variant($color);
+  }
+}
+
+@each $name, $color in $colors {
+  .direct-chat-#{$name} {
+    @include direct-chat-variant($color);
+  }
+}

ShopBundle/Resources/public/sass/backend/adminlte/_dropdown.scss

@@ -0,0 +1,272 @@
+//
+// Component: Dropdown
+//
+
+// General Dropdown Rules
+//.dropdown-item {
+//  &:first-of-type {
+//    @include border-top-radius($border-radius);
+//  }
+//  &:last-of-type {
+//    @include border-bottom-radius($border-radius);
+//  }
+//}
+
+.text-sm {
+  .dropdown-menu {
+    font-size: $font-size-sm !important;
+  }
+
+  .dropdown-toggle::after {
+    vertical-align: .2rem
+  }
+}
+
+.dropdown-item-title {
+  font-size: $font-size-base;
+  margin: 0;
+}
+
+.dropdown-icon {
+  &::after {
+    margin-left: 0;
+  }
+}
+
+// Dropdown Sizes
+.dropdown-menu-lg {
+  max-width: 300px;
+  min-width: 280px;
+  padding: 0;
+
+  .dropdown-divider {
+    margin: 0;
+  }
+
+  .dropdown-item {
+    padding: $dropdown-padding-y $dropdown-item-padding-x;
+  }
+
+  p {
+    margin: 0;
+    white-space: normal;
+  }
+}
+
+// Dropdown Submenu
+.dropdown-submenu {
+  position: relative;
+
+  & > a:after {
+    @include caret-right;
+    float: right;
+    margin-left: .5rem;
+    margin-top: .5rem;
+  }
+
+  & > .dropdown-menu {
+    left: 100%;
+    margin-left: 0px;
+    margin-top: 0px;
+    top: 0;
+  }
+}
+
+// Dropdown Hover
+.dropdown-hover {
+  &:hover,
+  &.nav-item.dropdown:hover,
+  .dropdown-submenu:hover,
+  &.dropdown-submenu:hover {
+    > .dropdown-menu {
+      display: block;
+    }
+  }
+}
+
+
+
+// Dropdown Sizes
+.dropdown-menu-xl {
+  max-width: 420px;
+  min-width: 360px;
+  padding: 0;
+
+  .dropdown-divider {
+    margin: 0;
+  }
+
+  .dropdown-item {
+    padding: $dropdown-padding-y $dropdown-item-padding-x;
+  }
+
+  p {
+    margin: 0;
+    white-space: normal;
+  }
+}
+
+// Dropdown header and footer
+.dropdown-footer,
+.dropdown-header {
+  display: block;
+  font-size: $font-size-sm;
+  padding: .5rem $dropdown-item-padding-x;
+  text-align: center;
+}
+
+// Add fade animation to dropdown menus by appending 
+// the class .animated-dropdown-menu to the .dropdown-menu ul (or ol)
+.open:not(.dropup) > .animated-dropdown-menu {
+  @include animation(flipInX .7s both);
+  backface-visibility: visible !important;
+}
+
+@keyframes flipInX {
+  0% {
+    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    transition-timing-function: ease-in;
+    opacity: 0;
+  }
+
+  40% {
+    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    transition-timing-function: ease-in;
+  }
+
+  60% {
+    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+    opacity: 1;
+  }
+
+  80% {
+    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+  }
+
+  100% {
+    transform: perspective(400px);
+  }
+}
+
+// Fix dropdown menu in navbars
+.navbar-custom-menu > .navbar-nav {
+  > li {
+    position: relative;
+    > .dropdown-menu {
+      position: absolute;
+      right: 0;
+      left: auto;
+    }
+  }
+}
+
+@include media-breakpoint-down(sm) {
+  .navbar-custom-menu > .navbar-nav {
+    float: right;
+    > li {
+      position: static;
+      > .dropdown-menu {
+        position: absolute;
+        right: 5%;
+        left: auto;
+        border: 1px solid #ddd;
+        background: $white;
+      }
+    }
+  }
+}
+
+// User Menu
+.navbar-nav > .user-menu {
+  > .nav-link:after {
+    content:none;
+  }
+
+  > .dropdown-menu {
+    @include border-top-radius(0);
+    padding: 0;
+    width: 280px;
+
+    &,
+    > .user-body {
+      @include border-bottom-radius(4px);
+    }
+
+    // Header menu
+    > li.user-header {
+      height: 175px;
+      padding: 10px;
+      text-align: center;
+
+      // User image
+      > img {
+        z-index: 5;
+        height: 90px;
+        width: 90px;
+        border: 3px solid;
+        border-color: transparent;
+        border-color: rgba(255, 255, 255, 0.2);
+      }
+
+      > p {
+        z-index: 5;
+        font-size: 17px;
+        //text-shadow: 2px 2px 3px #333333;
+        margin-top: 10px;
+
+        > small {
+          display: block;
+          font-size: 12px;
+        }
+      }
+    }
+
+    // Menu Body
+    > .user-body {
+      @include clearfix;
+      border-bottom: 1px solid $gray-700;
+      border-top: 1px solid $gray-300;
+      padding: 15px;
+
+      a {
+        @include media-breakpoint-up(sm) {
+          background: $white !important;
+          color: $gray-700 !important;
+        }
+      }
+    }
+
+    // Menu Footer
+    > .user-footer {
+      @include clearfix;
+      background-color: $gray-100;
+      padding: 10px;
+
+      .btn-default {
+        color: $gray-600;
+
+        &:hover {
+          @include media-breakpoint-up(sm) {
+            background-color: $gray-100;
+          }
+        }
+      }
+    }
+  }
+
+  .user-image {
+    @include media-breakpoint-up(sm) {
+      float: none;
+      line-height: 10px;
+      margin-right: .4rem;
+      margin-top: -8px;
+    }
+
+    border-radius: 50%;
+    float: left;
+    height: $sidebar-user-image-width;
+    margin-right: 10px;
+    margin-top: -2px;
+    width: $sidebar-user-image-width;
+  }
+}

ShopBundle/Resources/public/sass/backend/adminlte/_elevation.scss

@@ -0,0 +1,14 @@
+//
+// Component: Elevation
+//
+
+.elevation-0 {
+  box-shadow: none !important;
+}
+
+// Background colors (colors)
+@each $name, $value in $elevations {
+  .elevation-#{$name} {
+    box-shadow: $value !important;
+  }
+}

ShopBundle/Resources/public/sass/backend/adminlte/_forms.scss

@@ -0,0 +1,277 @@
+//
+// Component: Forms
+//
+ 
+.form-group {
+  &.has-icon {
+    position: relative;
+
+    .form-control {
+      padding-right: 35px;
+    }
+
+    .form-icon {
+      background-color: transparent;
+      border: 0;
+      cursor: pointer;
+      font-size: 1rem;
+      // margin-top: -3px;
+      padding: $input-btn-padding-y $input-btn-padding-x;
+      position: absolute;
+      right: 3px;
+      top: 0;
+    }
+  }
+}
+
+// Button groups
+.btn-group-vertical {
+  .btn {
+    &.btn-flat:first-of-type,
+    &.btn-flat:last-of-type {
+      @include border-radius(0);
+    }
+  }
+}
+
+// Support icons in form-control
+.form-control-feedback {
+  &.fa,
+  &.fas,
+  &.far,
+  &.fab,
+  &.glyphicon,
+  &.ion {
+    line-height: $input-height;
+  }
+}
+
+.input-lg  + .form-control-feedback,
+.input-group-lg + .form-control-feedback {
+  &.fa,
+  &.fas,
+  &.far,
+  &.fab,
+  &.glyphicon,
+  &.ion {
+    line-height: $input-height-lg;
+  }
+}
+
+.form-group-lg {
+  .form-control + .form-control-feedback {
+    &.fa,
+    &.fas,
+    &.far,
+    &.fab,
+    &.glyphicon,
+    &.ion {
+      line-height: $input-height-lg;
+    }
+  }
+}
+
+.input-sm  + .form-control-feedback,
+.input-group-sm + .form-control-feedback {
+  &.fa,
+  &.fas,
+  &.far,
+  &.fab,
+  &.glyphicon,
+  &.ion {
+    line-height: $input-height-sm;
+  }
+}
+
+.form-group-sm {
+  .form-control + .form-control-feedback {
+    &.fa,
+    &.fas,
+    &.far,
+    &.fab,
+    &.glyphicon,
+    &.ion {
+      line-height: $input-height-sm;
+    }
+  }
+}
+
+label:not(.form-check-label):not(.custom-file-label) {
+  font-weight: $font-weight-bold;
+}
+
+.warning-feedback {
+  @include font-size($form-feedback-font-size);
+  color: theme-color('warning');
+  display: none;
+  margin-top: $form-feedback-margin-top;
+  width: 100%;
+}
+
+.warning-tooltip {
+  @include border-radius($form-feedback-tooltip-border-radius);
+  @include font-size($form-feedback-tooltip-font-size);
+  background-color: rgba(theme-color('warning'), $form-feedback-tooltip-opacity);
+  color: color-yiq(theme-color('warning'));
+  display: none;
+  line-height: $form-feedback-tooltip-line-height;
+  margin-top: .1rem;
+  max-width: 100%; // Contain to parent when possible
+  padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
+  position: absolute;
+  top: 100%;
+  z-index: 5;
+}
+
+.form-control {
+  &.is-warning {
+    border-color: theme-color('warning');
+
+    @if $enable-validation-icons {
+      // padding-right: $input-height-inner;
+      // background-image: none;
+      // background-repeat: no-repeat;
+      // background-position: center right $input-height-inner-quarter;
+      // background-size: $input-height-inner-half $input-height-inner-half;
+    }
+
+    &:focus {
+      border-color: theme-color('warning');
+      box-shadow: 0 0 0 $input-focus-width rgba(theme-color('warning'), .25);
+    }
+
+    ~ .warning-feedback,
+    ~ .warning-tooltip {
+      display: block;
+    }
+  }
+}
+
+// stylelint-disable-next-line selector-no-qualifying-type
+textarea.form-control {
+  &.is-warning {
+    @if $enable-validation-icons {
+      padding-right: $input-height-inner;
+      background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
+    }
+  }
+}
+
+.custom-select {
+  &.is-warning {
+    border-color: theme-color('warning');
+
+    @if $enable-validation-icons {
+      // padding-right: $custom-select-feedback-icon-padding-right;
+      // background: $custom-select-background, none $custom-select-bg no-repeat $custom-select-feedback-icon-position / $custom-select-feedback-icon-size;
+    }
+
+    &:focus {
+      border-color: theme-color('warning');
+      box-shadow: 0 0 0 $input-focus-width rgba(theme-color('warning'), .25);
+    }
+
+    ~ .warning-feedback,
+    ~ .warning-tooltip {
+      display: block;
+    }
+  }
+}
+
+
+.form-control-file {
+  &.is-warning {
+    ~ .warning-feedback,
+    ~ .warning-tooltip {
+      display: block;
+    }
+  }
+}
+
+.form-check-input {
+  &.is-warning {
+    ~ .form-check-label {
+      color: theme-color('warning');
+    }
+
+    ~ .warning-feedback,
+    ~ .warning-tooltip {
+      display: block;
+    }
+  }
+}
+
+.custom-control-input.is-warning {
+  ~ .custom-control-label {
+    color: theme-color('warning');
+
+    &::before {
+      border-color: theme-color('warning');
+    }
+  }
+
+  ~ .warning-feedback,
+  ~ .warning-tooltip {
+    display: block;
+  }
+
+  &:checked {
+    ~ .custom-control-label::before {
+      @include gradient-bg(lighten(theme-color('warning'), 10%));
+      border-color: lighten(theme-color('warning'), 10%);
+    }
+  }
+
+  &:focus {
+    ~ .custom-control-label::before {
+      box-shadow: 0 0 0 $input-focus-width rgba(theme-color('warning'), .25);
+    }
+
+    &:not(:checked) ~ .custom-control-label::before {
+      border-color: theme-color('warning');
+    }
+  }
+}
+
+// custom file
+.custom-file-input {
+  &.is-warning {
+    ~ .custom-file-label {
+      border-color: theme-color('warning');
+    }
+
+    ~ .warning-feedback,
+    ~ .warning-tooltip {
+      display: block;
+    }
+
+    &:focus {
+      ~ .custom-file-label {
+        border-color: theme-color('warning');
+        box-shadow: 0 0 0 $input-focus-width rgba(theme-color('warning'), .25);
+      }
+    }
+  }
+}
+
+// custom switch color variations
+.custom-switch {
+  @each $name, $color in $theme-colors {
+    @include custom-switch-variant($name, $color);
+  }
+
+  @each $name, $color in $colors {
+    @include custom-switch-variant($name, $color);
+  }
+}
+
+// custom range color variations
+.custom-range {
+  @each $name, $color in $theme-colors {
+    @include custom-range-variant($name, $color);
+  }
+
+  @each $name, $color in $colors {
+    @include custom-range-variant($name, $color);
+  }
+}

ShopBundle/Resources/public/sass/backend/adminlte/_info-box.scss

@@ -0,0 +1,140 @@
+//
+// Component: Info Box
+//
+ 
+.info-box {
+  @include box-shadow($card-shadow);
+  @include border-radius($border-radius);
+
+  background: $white;
+  display: flex;
+  margin-bottom: map-get($spacers, 3);
+  min-height: 80px;
+  padding: .5rem;
+  position: relative;
+
+  .progress {
+    background-color: rgba($black, .125);
+    height: 2px;
+    margin: 5px 0;
+
+    .progress-bar {
+      background-color: $white;
+    }
+  }
+
+  .info-box-icon {
+    @if $enable-rounded {
+      border-radius: $border-radius;
+    }
+
+    align-items: center;
+    display: flex;
+    font-size: 1.875rem;
+    justify-content: center;
+    text-align: center;
+    width: 70px;
+
+    > img {
+      max-width: 100%;
+    }
+  }
+
+  .info-box-content {
+    flex: 1;
+    padding: 5px 10px;
+  }
+
+  .info-box-number {
+    display: block;
+    font-weight: $font-weight-bold;
+  }
+
+  .progress-description,
+  .info-box-text {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  @each $name, $color in $theme-colors {
+    .info-box {
+      .bg-#{$name},
+      .bg-gradient-#{$name} {
+        color: color-yiq($color);
+
+        .progress-bar {
+          background-color: color-yiq($color);
+        }
+      }
+    }
+  }
+
+  .info-box-more {
+    display: block;
+  }
+
+  .progress-description {
+    margin: 0;
+
+  }
+
+  @include media-breakpoint-up(md) {
+    .col-xl-2 &,
+    .col-lg-2 &,
+    .col-md-2 & {
+      .progress-description {
+        display: none;
+      }
+    }
+
+    .col-xl-3 &,
+    .col-lg-3 &,
+    .col-md-3 & {
+      .progress-description {
+        display: none;
+      }
+    }
+  }
+
+  @include media-breakpoint-up(lg) {
+    .col-xl-2 &,
+    .col-lg-2 &,
+    .col-md-2 & {
+      .progress-description {
+        @include font-size(.75rem);
+        display: block;
+      }
+    }
+
+    .col-xl-3 &,
+    .col-lg-3 &,
+    .col-md-3 & {
+      .progress-description {
+        @include font-size(.75rem);
+        display: block;
+      }
+    }
+  }
+
+  @include media-breakpoint-up(xl) {
+    .col-xl-2 &,
+    .col-lg-2 &,
+    .col-md-2 & {
+      .progress-description {
+        @include font-size(1rem);
+        display: block;
+      }
+    }
+
+    .col-xl-3 &,
+    .col-lg-3 &,
+    .col-md-3 & {
+      .progress-description {
+        @include font-size(1rem);
+        display: block;
+      }
+    }
+  }
+}

ShopBundle/Resources/public/sass/backend/adminlte/_layout.scss

@@ -0,0 +1,621 @@
+//
+// Core: Layout
+//
+
+html {
+  scroll-behavior: smooth;
+}
+
+html,
+body,
+.wrapper {
+  min-height: 100%;
+}
+
+.wrapper {
+  position: relative;
+
+  & .content-wrapper {
+    min-height: calc(100vh - #{$main-header-height} - #{$main-footer-height});
+  }
+
+  .layout-boxed & {
+    @include box-shadow(0 0 10 rgba($black, .3));
+
+    &,
+    &::before {
+      margin: 0 auto;
+      max-width: $boxed-layout-max-width;
+    }
+
+    & .main-sidebar {
+      left: inherit;
+    }
+  }
+
+  .layout-fixed & .sidebar  {
+    height: calc(100vh - (#{$main-header-height-inner} + #{$main-header-bottom-border-width}));
+  }
+
+  .layout-fixed.text-sm & .sidebar  {
+    height: calc(100vh - (#{$main-header-height-sm-inner} + #{$main-header-bottom-border-width}));
+  }
+
+  .layout-navbar-fixed.layout-fixed & {
+    .control-sidebar {
+      top: $main-header-height;
+    }
+
+    .main-header.text-sm ~ .control-sidebar {
+      top: $main-header-height-sm;
+    }
+
+    .sidebar {
+      margin-top: $main-header-height;
+    }
+
+    .brand-link.text-sm ~ .sidebar {
+      margin-top: $main-header-height-sm;
+    }
+  }
+
+  .layout-navbar-fixed.layout-fixed.text-sm & {
+    .control-sidebar {
+      top: $main-header-height-sm;
+    }
+
+    .sidebar {
+      margin-top: $main-header-height-sm;
+    }
+  }
+
+  .layout-navbar-fixed.sidebar-mini.sidebar-collapse &,
+  .layout-navbar-fixed.sidebar-mini-md.sidebar-collapse & {
+    .brand-link {
+      height: $main-header-height;
+      width: $sidebar-mini-width;
+
+      &.text-sm {
+        height: $main-header-height-sm;
+      }
+    }
+  }
+
+  .layout-navbar-fixed.sidebar-mini.sidebar-collapse.text-sm &,
+  .layout-navbar-fixed.sidebar-mini-md.sidebar-collapse.text-sm & {
+    .brand-link {
+      height: $main-header-height-sm;
+    }
+  }
+
+  body:not(.layout-fixed).layout-navbar-fixed & {
+    .main-sidebar {
+      margin-top: calc(#{$main-header-height} / -1);
+
+      .sidebar  {
+        margin-top: $main-header-height;
+      }
+    }
+  }
+
+  body:not(.layout-fixed).layout-navbar-fixed.text-sm & {
+    .main-sidebar {
+      margin-top: calc(#{$main-header-height-sm} / -1);
+
+      .sidebar  {
+        margin-top: $main-header-height-sm;
+      }
+    }
+  }
+
+  .layout-navbar-fixed & {
+    .control-sidebar {
+      top: 0;
+    }
+
+    a.anchor {
+      display: block;
+      position: relative;
+      top: calc((#{$main-header-height-inner} + #{$main-header-bottom-border-width} + (#{$main-header-link-padding-y} * 2)) / -1);
+    }
+
+    .main-sidebar:hover {
+      .brand-link {
+        transition: width $transition-speed $transition-fn;
+        width: $sidebar-width;
+      }
+    }
+
+    .brand-link {
+      overflow: hidden;
+      position: fixed;
+      top: 0;
+      transition: width $transition-speed $transition-fn;
+      width: $sidebar-width;
+      z-index: $zindex-main-header + 1;
+    }
+
+    // Sidebar variants brand-link fix
+    @each $name, $color in $theme-colors {
+      .sidebar-dark-#{$name} .brand-link:not([class*="navbar"]) {
+        background-color: $sidebar-dark-bg;
+      }
+
+      .sidebar-light-#{$name} .brand-link:not([class*="navbar"]) {
+        background-color: $sidebar-light-bg;
+      }
+    }
+
+    .content-wrapper {
+      margin-top: $main-header-height;
+    }
+
+    .main-header.text-sm ~ .content-wrapper {
+      margin-top: $main-header-height-sm;
+    }
+
+    .main-header {
+      left: 0;
+      position: fixed;
+      right: 0;
+      top: 0;
+      z-index: $zindex-main-header - 1;
+    }
+  }
+
+  .layout-navbar-fixed.text-sm & {
+    .content-wrapper {
+      margin-top: $main-header-height-sm;
+    }
+  }
+
+  .layout-navbar-not-fixed & {
+    .brand-link {
+      position: static;
+    }
+
+    .sidebar,
+    .content-wrapper {
+      margin-top: 0;
+    }
+
+    .main-header {
+      position: static;
+    }
+  }
+
+  .layout-navbar-not-fixed.layout-fixed & {
+    .sidebar {
+      margin-top: 0;
+    }
+  }
+
+  @each $breakpoint in map-keys($grid-breakpoints) {
+    @include media-breakpoint-up($breakpoint) {
+      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+      .layout#{$infix}-navbar-fixed.layout-fixed & {
+        .control-sidebar {
+          top: $main-header-height;
+        }
+
+        .text-sm & .main-header ~ .control-sidebar,
+        .main-header.text-sm ~ .control-sidebar {
+          top: $main-header-height-sm;
+        }
+
+        .sidebar {
+          margin-top: $main-header-height;
+        }
+
+        .text-sm & .brand-link ~ .sidebar,
+        .brand-link.text-sm ~ .sidebar {
+          margin-top: $main-header-height-sm;
+        }
+      }
+
+      .layout#{$infix}-navbar-fixed.layout-fixed.text-sm & {
+        .control-sidebar {
+          top: $main-header-height-sm;
+        }
+
+        .sidebar {
+          margin-top: $main-header-height-sm;
+        }
+      }
+
+      .layout#{$infix}-navbar-fixed & {
+        .control-sidebar {
+          top: 0;
+        }
+
+        a.anchor {
+          display: block;
+          position: relative;
+          top: calc((#{$main-header-height-inner} + #{$main-header-bottom-border-width} + (#{$main-header-link-padding-y} * 2)) / -1);
+        }
+
+        &.sidebar-collapse {
+          .brand-link {
+            height: $main-header-height;
+            transition: width $transition-speed $transition-fn;
+            width: $sidebar-mini-width;
+
+            .text-sm &,
+            &.text-sm {
+              height: $main-header-height-sm;
+            }
+          }
+
+          .main-sidebar:hover {
+            .brand-link {
+              transition: width $transition-speed $transition-fn;
+              width: $sidebar-width;
+            }
+          }
+        }
+
+        .brand-link {
+          overflow: hidden;
+          position: fixed;
+          top: 0;
+          transition: width $transition-speed $transition-fn;
+          width: $sidebar-width;
+          z-index: $zindex-main-header + 1;
+        }
+
+        // Sidebar variants brand-link fix
+        @each $name, $color in $theme-colors {
+          .sidebar-dark-#{$name} .brand-link:not([class*="navbar"]) {
+            background-color: $sidebar-dark-bg;
+          }
+
+          .sidebar-light-#{$name} .brand-link:not([class*="navbar"]) {
+            background-color: $sidebar-light-bg;
+          }
+        }
+
+        .content-wrapper {
+          margin-top: $main-header-height;
+        }
+
+        .text-sm & .main-header ~ .content-wrapper,
+        .main-header.text-sm ~ .content-wrapper {
+          margin-top: $main-header-height-sm;
+        }
+
+        .main-header {
+          left: 0;
+          position: fixed;
+          right: 0;
+          top: 0;
+          z-index: $zindex-main-sidebar - 1;
+        }
+      }
+
+      .layout#{$infix}-navbar-fixed.text-sm & {
+        .content-wrapper {
+          margin-top: $main-header-height-sm;
+        }
+      }
+
+      body:not(.layout-fixed).layout#{$infix}-navbar-fixed & {
+        .main-sidebar {
+          margin-top: calc(#{$main-header-height} / -1);
+
+          .sidebar  {
+            margin-top: $main-header-height;
+          }
+        }
+      }
+
+      body:not(.layout-fixed).layout#{$infix}-navbar-fixed.text-sm & {
+        .main-sidebar {
+          margin-top: calc(#{$main-header-height-sm} / -1);
+
+          .sidebar  {
+            margin-top: $main-header-height-sm;
+          }
+        }
+      }
+
+      .layout#{$infix}-navbar-not-fixed & {
+        .brand-link {
+          position: static;
+        }
+
+        .sidebar,
+        .content-wrapper {
+          margin-top: 0;
+        }
+
+        .main-header {
+          position: static;
+        }
+      }
+
+      .layout#{$infix}-navbar-not-fixed.layout-fixed & {
+        .sidebar {
+          margin-top: 0;
+        }
+      }
+    }
+  }
+
+  .layout-footer-fixed & {
+    .control-sidebar {
+      bottom: 0;
+    }
+  }
+
+  .layout-footer-fixed & {
+    .main-footer {
+      bottom: 0;
+      left: 0;
+      position: fixed;
+      right: 0;
+      z-index: $zindex-main-footer;
+    }
+  }
+
+  .layout-footer-not-fixed & {
+    .main-footer {
+      position: static;
+    }
+
+    .content-wrapper {
+      margin-bottom: 0;
+    }
+  }
+
+  @each $breakpoint in map-keys($grid-breakpoints) {
+    @include media-breakpoint-up($breakpoint) {
+      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+      .layout#{$infix}-footer-fixed & {
+        .control-sidebar {
+          bottom: 0;
+        }
+      }
+
+      .layout#{$infix}-footer-fixed & {
+        .main-footer {
+          bottom: 0;
+          left: 0;
+          position: fixed;
+          right: 0;
+          z-index: $zindex-main-footer;
+        }
+
+        .content-wrapper {
+          margin-bottom: $main-footer-height;
+        }
+      }
+
+      .layout#{$infix}-footer-not-fixed & {
+        .main-footer {
+          position: static;
+        }
+      }
+    }
+  }
+
+  .layout-top-nav & {
+    margin-left: 0;
+
+    .main-header {
+      .brand-image {
+        margin-top: -.5rem;
+        margin-right: .2rem;
+        height: 33px;
+      }
+    }
+
+    & .main-sidebar {
+      bottom: inherit;
+      height: inherit;
+    }
+
+    & .content-wrapper,
+    & .main-header,
+    & .main-footer {
+      margin-left: 0;
+    }
+  }
+}
+
+
+body.sidebar-collapse:not(.sidebar-mini-md):not(.sidebar-mini) {
+  .content-wrapper,
+  .main-footer,
+  .main-header {
+    &,
+    &::before {
+      margin-left: 0;
+    }
+  }
+}
+
+body:not(.sidebar-mini-md) {
+  .content-wrapper,
+  .main-footer,
+  .main-header {
+    @include media-breakpoint-up(md) {
+      @include transition(margin-left $transition-speed $transition-fn);
+
+      margin-left: $sidebar-width;
+
+      .sidebar-collapse & {
+        margin-left: 0;
+      }
+    }
+
+    @include media-breakpoint-down(md) {
+      &,
+      &::before {
+        margin-left: 0;
+      }
+    }
+  }
+}
+
+.sidebar-mini-md {
+  .content-wrapper,
+  .main-footer,
+  .main-header {
+    @include media-breakpoint-up(md) {
+      @include transition(margin-left $transition-speed $transition-fn);
+
+      margin-left: $sidebar-width;
+
+      .sidebar-collapse & {
+        margin-left: $sidebar-mini-width;
+      }
+    }
+
+    @include media-breakpoint-down(md) {
+      &,
+      &::before {
+        margin-left: $sidebar-mini-width;
+      }
+    }
+  }
+}
+
+.content-wrapper {
+  background: $main-bg;
+
+  > .content {
+    padding: $content-padding-y $content-padding-x;
+  }
+}
+
+.main-sidebar {
+  &,
+  &::before {
+    $local-sidebar-transition: margin-left $transition-speed $transition-fn, width $transition-speed $transition-fn;
+    @include transition($local-sidebar-transition);
+    width: $sidebar-width;
+  }
+
+  .sidebar-collapse:not(.sidebar-mini):not(.sidebar-mini-md) & {
+    &,
+    &::before {
+      box-shadow: none !important;
+    }
+  }
+
+  .sidebar-collapse & {
+    &,
+    &::before {
+      margin-left: -$sidebar-width;
+    }
+
+    .nav-sidebar.nav-child-indent .nav-treeview {
+      padding: 0;
+    }
+  }
+
+  @include media-breakpoint-down(sm) {
+    &,
+    &::before {
+      box-shadow: none !important;
+      margin-left: -$sidebar-width;
+    }
+
+    .sidebar-open & {
+      &,
+      &::before {
+        margin-left: 0;
+      }
+    }
+  }
+}
+
+:not(.layout-fixed) {
+  .main-sidebar {
+    height: inherit;
+    min-height: 100%;
+    position: absolute;
+    top: 0;
+  }
+}
+
+.layout-fixed {
+  .brand-link {
+    width: $sidebar-width;
+  }
+
+  .main-sidebar {
+    bottom: 0;
+    float: none;
+    height: 100vh;
+    left: 0;
+    position: fixed;
+    top: 0;
+  }
+
+  .control-sidebar {
+    bottom: 0;
+    float: none;
+    height: 100vh;
+    position: fixed;
+    top: 0;
+
+    .control-sidebar-content {
+      height: calc(100vh - #{$main-header-height});
+    }
+  }
+}
+
+.main-footer {
+  background: $main-footer-bg;
+  border-top: $main-footer-border-top;
+  color: lighten($gray-700, 25%);
+  padding: $main-footer-padding;
+
+  .text-sm &,
+  &.text-sm {
+    padding: $main-footer-padding-sm;
+  }
+}
+
+.content-header {
+  padding: 15px $content-padding-x;
+
+  .text-sm & {
+    padding: 10px $content-padding-x;
+  }
+
+  h1 {
+    font-size: 1.8rem;
+    margin: 0;
+
+    .text-sm & {
+      font-size: 1.5rem;
+    }
+  }
+
+  .breadcrumb {
+    background: transparent;
+    line-height: 1.8rem;
+    margin-bottom: 0;
+    padding: 0;
+
+    .text-sm & {
+      line-height: 1.5rem;
+    }
+  }
+}
+
+
+.hold-transition {
+  .content-wrapper,
+  .main-header,
+  .main-sidebar,
+  .main-sidebar *,
+  .control-sidebar,
+  .control-sidebar *,
+  .main-footer {
+    transition: none !important;
+  }
+}

ShopBundle/Resources/public/sass/backend/adminlte/_main-header.scss

@@ -0,0 +1,138 @@
+//
+// Component: Main Header
+//
+ 
+.main-header {
+  border-bottom: $main-header-bottom-border;
+  z-index: $zindex-main-header;
+
+  .nav-link {
+    height: $nav-link-height;
+    position: relative;
+  }
+
+  .text-sm &,
+  &.text-sm {
+    .nav-link {
+      height: $nav-link-sm-height;
+      padding: $nav-link-sm-padding-y $nav-link-padding-x;
+
+      > .fa,
+      > .fas,
+      > .far,
+      > .fab,
+      > .glyphicon,
+      > .ion {
+        font-size: $font-size-sm;
+      }
+    }
+
+  }
+
+  .navbar-nav {
+    .nav-item {
+      margin: 0;
+    }
+
+    &[class*='-right'] {
+      .dropdown-menu {
+        left: auto;
+        margin-top: -3px;
+        right: 0;
+
+        @media (max-width: breakpoint-max(xs)) {
+          left: 0;
+          right: auto;
+        }
+      }
+    }
+  }
+}
+
+// Add this class to images within a nav-link
+.navbar-img {
+  height: $main-header-height / 2;
+  width: auto;
+}
+
+// Navbar badge
+.navbar-badge {
+  font-size: .6rem;
+  font-weight: 300;
+  padding: 2px 4px;
+  position: absolute;
+  right: 5px;
+  top: 9px;
+}
+
+.btn-navbar {
+  background-color: transparent;
+  border-left-width: 0;
+}
+
+.form-control-navbar {
+  border-right-width: 0;
+
+  & + .input-group-append {
+    margin-left: 0;
+  }
+}
+
+.form-control-navbar,
+.btn-navbar {
+  transition: none;
+}
+
+.navbar-dark {
+  .form-control-navbar,
+  .btn-navbar {
+    background-color: $main-header-dark-form-control-bg;
+    border: $main-header-dark-form-control-border;
+  }
+
+  .form-control-navbar {
+    &::placeholder {
+      color: $main-header-dark-placeholder-color;
+    }
+
+    + .input-group-append > .btn-navbar {
+      color: $main-header-dark-placeholder-color;
+    }
+
+    &:focus {
+      &,
+      & + .input-group-append .btn-navbar {
+        background-color: $main-header-dark-form-control-focused-bg;
+        border: $main-header-dark-form-control-focused-border !important;
+        color: $main-header-dark-form-control-focused-color;
+      }
+    }
+  }
+}
+
+.navbar-light {
+  .form-control-navbar,
+  .btn-navbar {
+    background-color: $main-header-light-form-control-bg;
+    border: $main-header-light-form-control-border;
+  }
+
+  .form-control-navbar {
+    &::placeholder {
+      color: $main-header-light-placeholder-color;
+    }
+
+    + .input-group-append > .btn-navbar {
+      color: $main-header-light-placeholder-color;
+    }
+
+    &:focus {
+      &,
+      & + .input-group-append .btn-navbar {
+        background-color: $main-header-light-form-control-focused-bg;
+        border: $main-header-light-form-control-focused-border !important;
+        color: $main-header-light-form-control-focused-color;
+      }
+    }
+  }
+}

ShopBundle/Resources/public/sass/backend/adminlte/_main-sidebar.scss

@@ -0,0 +1,911 @@
+//
+// Component: Main Sidebar
+//
+
+.main-sidebar {
+  height: 100vh;
+  overflow-y: hidden;
+  z-index: $zindex-main-sidebar;
+
+  // Remove Firefox Focusring
+  a {
+    &:-moz-focusring {
+      border: 0;
+      outline: none;
+    }
+  }
+
+}
+
+.sidebar {
+  height: calc(100% - (#{$main-header-height-inner} + #{$main-header-bottom-border-width}));
+  overflow-y: auto;
+  padding-bottom: $sidebar-padding-y;
+  padding-left: $sidebar-padding-x;
+  padding-right: $sidebar-padding-x;
+  padding-top: $sidebar-padding-y;
+}
+
+// Sidebar user panel
+.user-panel {
+  position: relative;
+
+  [class*='sidebar-dark'] & {
+    border-bottom: 1px solid lighten($dark, 12%);
+  }
+
+  [class*='sidebar-light'] & {
+    border-bottom: 1px solid $gray-300;
+  }
+
+  &,
+  .info {
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  .image {
+    display: inline-block;
+    padding-left: $nav-link-padding-x - .2;
+  }
+
+  img {
+    height: auto;
+    width: $sidebar-user-image-width;
+  }
+
+  .info {
+    display: inline-block;
+    padding: 5px 5px 5px 10px;
+  }
+
+  .status,
+  .dropdown-menu {
+    font-size: $font-size-sm;
+  }
+}
+
+// Sidebar navigation menu
+.nav-sidebar {
+  // All levels
+  .nav-item {
+    > .nav-link {
+      margin-bottom: .2rem;
+
+      .right {
+        @include transition(transform $transition-fn $transition-speed);
+      }
+    }
+  }
+
+  .nav-link > .right,
+  .nav-link > p > .right {
+    position: absolute;
+    right: 1rem;
+    top: .7rem;
+
+    i,
+    span {
+      margin-left: .5rem;
+    }
+
+    &:nth-child(2) {
+      right: 2.2rem;
+    }
+  }
+
+  .menu-open {
+    > .nav-treeview {
+      display: block;
+    }
+
+    > .nav-link {
+      i.right {
+        @include rotate(-90deg);
+      }
+    }
+  }
+
+  // First Level
+  > .nav-item {
+    margin-bottom: 0;
+
+    .nav-icon {
+      margin-left: .05rem;
+      font-size: 1.2rem;
+      margin-right: .2rem;
+      text-align: center;
+      width: $sidebar-nav-icon-width;
+
+      &.fa,
+      &.fas,
+      &.far,
+      &.fab,
+      &.glyphicon,
+      &.ion {
+        font-size: 1.1rem;
+      }
+    }
+
+    .float-right {
+      margin-top: 3px;
+    }
+  }
+
+  // Tree view menu
+  .nav-treeview {
+    display: none;
+    list-style: none;
+    padding: 0;
+
+    > .nav-item {
+      > .nav-link {
+        > .nav-icon {
+          width: $sidebar-nav-icon-width;
+        }
+      }
+    }
+  }
+
+  &.nav-child-indent {
+    .nav-treeview {
+      transition: padding $transition-speed $transition-fn;
+      padding-left: 1rem;
+
+      .text-sm & {
+        padding-left: .5rem;
+      }
+    }
+
+    &.nav-legacy {
+      .nav-treeview {      
+        .nav-treeview {
+          padding-left: 2rem;
+          margin-left: -1rem;
+
+          .text-sm & {          
+            padding-left: 1rem;
+            margin-left: -.5rem;
+          }
+        }
+      }
+    }
+  }
+
+  .nav-header {
+    font-size: .9rem;
+    padding: $nav-link-padding-y;
+
+    &:not(:first-of-type) {
+      padding: 1.7rem 1rem .5rem;
+    }
+  }
+
+  .nav-link p {
+    display: inline-block;
+    margin: 0;
+  }
+}
+
+#sidebar-overlay {
+  @include media-breakpoint-down(md) {
+    .sidebar-open & {
+      display: block;
+    }
+  }
+
+  background-color: rgba($black, 0.1);
+  bottom: 0;
+  display: none;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: $zindex-main-sidebar - 1;
+}
+
+[class*='sidebar-light-'] {
+  // Sidebar background color
+  background-color: $sidebar-light-bg;
+
+  // User Panel (resides in the sidebar)
+  .user-panel {
+    a:hover {
+      color: $sidebar-light-hover-color;
+    }
+
+    .status {
+      background: $sidebar-light-hover-bg;
+      color: $sidebar-light-color;
+
+      &:hover,
+      &:focus,
+      &:active {
+        background: darken($sidebar-light-hover-bg, 3%);
+        color: $sidebar-light-hover-color;
+      }
+    }
+
+    .dropdown-menu {
+      @include box-shadow(0 2px 4px rgba(0, 0, 0, .4));
+      border-color: darken($sidebar-light-hover-bg, 5%);
+    }
+
+    .dropdown-item {
+      color: $body-color;
+    }
+  }
+
+  // Sidebar Menu. First level links
+  .nav-sidebar > .nav-item {
+    // links
+    > .nav-link {
+      // border-left: 3px solid transparent;
+      &:active,
+      &:focus {
+        color: $sidebar-light-color;
+      }
+    }
+
+    // Hover and active states
+    &.menu-open > .nav-link,
+    &:hover > .nav-link {
+      background-color: $sidebar-light-hover-bg;
+      color: $sidebar-light-hover-color;
+    }
+
+    > .nav-link.active {
+      color: $sidebar-light-active-color;
+
+      @if $enable-shadows {
+        box-shadow: map-get($elevations, 1);
+      }
+    }
+
+    // First Level Submenu
+    > .nav-treeview {
+      background: $sidebar-light-submenu-bg;
+    }
+  }
+
+  // Section Heading
+  .nav-header {
+    background: inherit;
+    color: darken($sidebar-light-color, 5%);
+  }
+
+  // All links within the sidebar menu
+  .sidebar {
+    a {
+      color: $sidebar-light-color;
+
+      &:hover {
+        text-decoration: none;
+      }
+    }
+  }
+
+  // All submenus
+  .nav-treeview {
+    > .nav-item {
+      > .nav-link {
+        color: $sidebar-light-submenu-color;
+      }
+
+      > .nav-link.active {
+        &,
+        &:hover {
+          background-color: $sidebar-light-submenu-active-bg;
+          color: $sidebar-light-submenu-active-color;
+        }
+      }
+
+      > .nav-link:hover {
+        background-color: $sidebar-light-submenu-hover-bg;
+      }
+    }
+  }
+
+  // Flat style
+  .nav-flat {
+    .nav-item {
+      .nav-treeview {
+        .nav-treeview {
+          border-color: $sidebar-light-submenu-active-bg;
+        }
+
+        > .nav-item {
+          > .nav-link {
+            &,
+            &.active {
+              border-color: $sidebar-light-submenu-active-bg;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+[class*='sidebar-dark-'] {
+  // Sidebar background color
+  background-color: $sidebar-dark-bg;
+
+  // User Panel (resides in the sidebar)
+  .user-panel {
+    a:hover {
+      color: $sidebar-dark-hover-color;
+    }
+
+    .status {
+      background: $sidebar-dark-hover-bg;
+      color: $sidebar-dark-color;
+
+      &:hover,
+      &:focus,
+      &:active {
+        background: darken($sidebar-dark-hover-bg, 3%);
+        color: $sidebar-dark-hover-color;
+      }
+    }
+
+    .dropdown-menu {
+      @include box-shadow(0 2px 4px rgba(0, 0, 0, .4));
+      border-color: darken($sidebar-dark-hover-bg, 5%);
+    }
+
+    .dropdown-item {
+      color: $body-color;
+    }
+  }
+
+  // Sidebar Menu. First level links
+  .nav-sidebar > .nav-item {
+    // links
+    > .nav-link {
+      // border-left: 3px solid transparent;
+      &:active {
+        color: $sidebar-dark-color;
+      }
+    }
+
+    // Hover and active states
+    &.menu-open > .nav-link,
+    &:hover > .nav-link,
+    & > .nav-link:focus  {
+      background-color: $sidebar-dark-hover-bg;
+      color: $sidebar-dark-hover-color;
+    }
+
+    > .nav-link.active {
+      color: $sidebar-dark-hover-color;
+
+      @if $enable-shadows {
+        box-shadow: map-get($elevations, 1);
+      }
+    }
+
+    // First Level Submenu
+    > .nav-treeview {
+      background: $sidebar-dark-submenu-bg;
+    }
+  }
+
+  // Section Heading
+  .nav-header {
+    background: inherit; //darken($sidebar-dark-bg, 3%);
+    color: lighten($sidebar-dark-color, 5%);
+  }
+
+  // All links within the sidebar menu
+  .sidebar {
+    a {
+      color: $sidebar-dark-color;
+
+      &:hover,
+      &:focus {
+        text-decoration: none;
+      }
+    }
+  }
+
+  // All submenus
+  .nav-treeview {
+    > .nav-item {
+      > .nav-link {
+        color: $sidebar-dark-submenu-color;
+
+        &:hover,
+        &:focus {
+          background-color: $sidebar-dark-submenu-hover-bg;
+          color: $sidebar-dark-submenu-hover-color;
+        }
+      }
+
+      > .nav-link.active {
+        &,
+        &:hover,
+        &:focus {
+          background-color: $sidebar-dark-submenu-active-bg;
+          color: $sidebar-dark-submenu-active-color;
+        }
+      }
+    }
+  }
+
+  // Flat Style
+  .nav-flat {
+    .nav-item {
+      .nav-treeview {
+        .nav-treeview {
+          border-color: $sidebar-dark-submenu-active-bg;
+        }
+
+        > .nav-item {
+          > .nav-link {
+            &,
+            &.active {
+              border-color: $sidebar-dark-submenu-active-bg;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+// Sidebar variants
+@each $name, $color in $theme-colors {
+  .sidebar-dark-#{$name},
+  .sidebar-light-#{$name} {
+    @include sidebar-color($color)
+  }
+}
+
+@each $name, $color in $colors {
+  .sidebar-dark-#{$name},
+  .sidebar-light-#{$name} {
+    @include sidebar-color($color)
+  }
+}
+
+.sidebar-mini .main-sidebar:not(.sidebar-no-expand),
+.sidebar-mini-md .main-sidebar:not(.sidebar-no-expand),
+.sidebar-mini .main-sidebar:not(.sidebar-no-expand):hover,
+.sidebar-mini-md .main-sidebar:not(.sidebar-no-expand):hover,
+.sidebar-mini .main-sidebar.sidebar-focused,
+.sidebar-mini-md .main-sidebar.sidebar-focused {
+ .nav-compact.nav-sidebar.nav-child-indent:not(.nav-flat) .nav-treeview {
+    padding-left: 1rem;
+    margin-left: -.5rem;
+  }
+}
+
+// Nav Flat
+.nav-flat {
+  margin: (-$sidebar-padding-x/2) (-$sidebar-padding-x) 0;
+
+  .nav-item {
+    > .nav-link {
+      border-radius: 0;
+      margin-bottom: 0;
+
+      > .nav-icon {
+        margin-left: .55rem;
+      }
+    }
+  }
+
+  &:not(.nav-child-indent) {
+    .nav-treeview {  
+      .nav-item {
+        > .nav-link {
+          > .nav-icon {
+            margin-left: .4rem;
+          }
+        }
+      }
+    }
+  }
+
+  &.nav-child-indent {
+    .nav-treeview {
+      padding-left: 0;
+
+      .nav-icon {
+        margin-left: .85rem;
+      }
+
+      .nav-treeview {
+        border-left: .2rem solid;
+
+        .nav-icon {
+          margin-left: 1.15rem;
+        }
+
+        .nav-treeview {
+          .nav-icon {
+            margin-left: 1.45rem;
+          }
+
+          .nav-treeview {
+            .nav-icon {
+              margin-left: 1.75rem;
+            }
+
+            .nav-treeview {
+              .nav-icon {
+                margin-left: 2.05rem;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .sidebar-collapse &.nav-child-indent {
+    .nav-treeview {
+      .nav-icon {
+        margin-left: .55rem;
+      }
+
+      .nav-link {
+        padding-left: calc(#{$nav-link-padding-x} - .2rem);
+      }
+
+      .nav-treeview {
+        .nav-icon {
+          margin-left: .35rem;
+        }
+
+        .nav-treeview {
+          .nav-icon {
+            margin-left: .15rem;
+          }
+
+          .nav-treeview {
+            .nav-icon {
+              margin-left: -.15rem;
+            }
+
+            .nav-treeview {
+              .nav-icon {
+                margin-left: -.35rem;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .sidebar-mini .main-sidebar:not(.sidebar-no-expand):hover &,
+  .sidebar-mini-md .main-sidebar:not(.sidebar-no-expand):hover &,
+  .sidebar-mini .main-sidebar.sidebar-focused &,
+  .sidebar-mini-md .main-sidebar.sidebar-focused & {
+    &.nav-compact.nav-sidebar .nav-treeview {
+      .nav-icon {
+        margin-left: .4rem;
+      }
+    }
+
+    &.nav-sidebar.nav-child-indent .nav-treeview {
+      .nav-icon {
+        margin-left: .85rem;
+      }
+
+      .nav-treeview {
+        .nav-icon {
+          margin-left: 1.15rem;
+        }
+
+        .nav-treeview {
+          .nav-icon {
+            margin-left: 1.45rem;
+          }
+
+          .nav-treeview {
+            .nav-icon {
+              margin-left: 1.75rem;
+            }
+
+            .nav-treeview {
+              .nav-icon {
+                margin-left: 2.05rem;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .nav-icon {
+    @include transition(margin-left $transition-fn $transition-speed);
+  }
+
+  .nav-treeview {
+    .nav-icon {
+      margin-left: -.2rem;
+    }
+  }
+
+  &.nav-sidebar > .nav-item {
+    .nav-treeview,
+    > .nav-treeview {
+      background: rgba($white, .05);
+
+      .nav-item {
+        > .nav-link {
+          border-left: .2rem solid;
+        }
+      }
+    }
+  }
+}
+
+.nav-legacy {
+  margin: (-$sidebar-padding-x/2) (-$sidebar-padding-x) 0;
+
+  &.nav-sidebar .nav-item {
+    > .nav-link {
+      border-radius: 0;
+      margin-bottom: 0;
+
+      > .nav-icon {
+        margin-left: .55rem;
+
+        .text-sm & {
+          margin-left: .75rem;
+        }
+      }
+    }
+  }
+
+  &.nav-sidebar > .nav-item {
+    > .nav-link {
+      &.active {
+        background: inherit;
+        border-left: 3px solid transparent;
+        box-shadow: none;
+
+        > .nav-icon {
+          margin-left: calc(.55rem - 3px);
+          
+          .text-sm & {
+            margin-left: calc(.75rem - 3px);
+          }
+        }
+      }
+    }
+  }
+
+  .text-sm &.nav-sidebar.nav-flat .nav-treeview {
+    .nav-item {
+      > .nav-link {
+        > .nav-icon {
+          margin-left: calc(.75rem - 3px);
+        }
+      }
+    }
+  }
+
+  .sidebar-mini &,
+  .sidebar-mini-md & {
+    > .nav-item .nav-link {
+      .nav-icon {
+        @include transition(margin-left $transition-fn $transition-speed);
+        margin-left: .75rem;
+      }
+    }
+  }
+
+  .sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused &.nav-child-indent,
+  .sidebar-mini.sidebar-collapse .main-sidebar:hover &.nav-child-indent,
+  .sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused &.nav-child-indent,
+  .sidebar-mini-md.sidebar-collapse .main-sidebar:hover &.nav-child-indent {
+    .nav-treeview {
+      padding-left: 1rem;
+
+      .nav-treeview {
+        padding-left: 2rem;
+        margin-left: -1rem;
+      }
+    }
+  }
+
+  .sidebar-mini.sidebar-collapse.text-sm .main-sidebar.sidebar-focused &.nav-child-indent,
+  .sidebar-mini.sidebar-collapse.text-sm .main-sidebar:hover &.nav-child-indent,
+  .sidebar-mini-md.sidebar-collapse.text-sm .main-sidebar.sidebar-focused &.nav-child-indent,
+  .sidebar-mini-md.sidebar-collapse.text-sm .main-sidebar:hover &.nav-child-indent {
+    .nav-treeview {
+      padding-left: .5rem;
+
+      .nav-treeview {
+        padding-left: 1rem;
+        margin-left: -.5rem;
+      }
+    }
+  }
+
+  .sidebar-mini.sidebar-collapse &,
+  .sidebar-mini-md.sidebar-collapse & {
+    > .nav-item > .nav-link {
+      .nav-icon {
+        margin-left: .55rem;
+      }
+
+      &.active {
+        > .nav-icon{
+          margin-left: .36rem;
+        }
+      }
+    }
+
+    &.nav-child-indent {   
+      .nav-treeview {
+        .nav-treeview {
+          padding-left: 0;
+          margin-left: 0;
+        }
+      }
+      }
+    }
+
+
+  .sidebar-mini.sidebar-collapse.text-sm &,
+  .sidebar-mini-md.sidebar-collapse.text-sm & {
+    > .nav-item > .nav-link {
+      .nav-icon {
+        margin-left: .75rem;
+      }
+
+      &.active {
+        > .nav-icon{
+          margin-left: calc(.75rem - 3px);
+        }
+      }
+    }
+  }
+
+  [class*='sidebar-dark'] & {
+    &.nav-sidebar > .nav-item {
+      .nav-treeview,
+      > .nav-treeview {
+        background: rgba($white, .05);
+      }
+
+      > .nav-link.active {
+        color: $sidebar-dark-active-color;
+      }
+    }
+
+    .nav-treeview > .nav-item > .nav-link {
+      &.active,
+      &:focus,
+      &:hover {
+        background: none;
+        color: $sidebar-dark-active-color;
+      }
+    }
+  }
+
+  [class*='sidebar-light'] & {
+    &.nav-sidebar > .nav-item {
+      .nav-treeview,
+      > .nav-treeview {
+        background: rgba($black, .05);
+      }
+
+      > .nav-link.active {
+        color: $sidebar-light-active-color;
+      }
+    }
+
+    .nav-treeview > .nav-item > .nav-link {
+      &.active,
+      &:focus,
+      &:hover {
+        background: none;
+        color: $sidebar-light-active-color;
+      }
+    }
+  }
+}
+
+
+.nav-collapse-hide-child {
+  .menu-open > .nav-treeview {
+    max-height: min-content;
+    opacity: 1;
+  }
+
+  .sidebar-collapse & {
+    .menu-open > .nav-treeview {
+      max-height: 0;
+      opacity: 0;
+    }
+  }
+
+  .sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused &,
+  .sidebar-mini.sidebar-collapse .main-sidebar:hover &,
+  .sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused &,
+  .sidebar-mini-md.sidebar-collapse .main-sidebar:hover & {
+    .menu-open > .nav-treeview {
+      max-height: min-content;
+      opacity: 1;
+    }
+  }
+}
+
+// Nav Compact
+.nav-compact {
+  .nav-link,
+  .nav-header {
+    padding-top: ($nav-link-padding-y / 2);
+    padding-bottom: ($nav-link-padding-y / 2);
+  }
+
+  .nav-header:not(:first-of-type) {
+    padding-top: ($nav-link-padding-y * 1.5);
+    padding-bottom: ($nav-link-padding-y / 2);
+  }
+
+  .nav-link > .right,
+  .nav-link > p > .right {
+    top: .465rem;
+  }
+
+  .text-sm & {
+    .nav-link > .right,
+    .nav-link > p > .right {
+      top: .7rem;
+    }
+  }
+}
+
+// Sidebar Form Control
+[class*='sidebar-dark'] {
+  .form-control-sidebar,
+  .btn-sidebar {
+    background: lighten($sidebar-dark-bg, 5%);
+    border: 1px solid lighten($sidebar-dark-bg, 15%);
+    color: lighten(color-yiq(lighten($sidebar-dark-bg, 5%)), 15%);
+  }
+
+  .form-control-sidebar:focus,
+  .btn-sidebar:focus {
+    border: 1px solid lighten($sidebar-dark-bg, 30%);
+  }
+
+  .btn-sidebar:hover {
+    background: lighten($sidebar-dark-bg, 7.5%);
+  }
+
+  .btn-sidebar:focus {
+    background: lighten($sidebar-dark-bg, 10%);
+  }
+}
+
+[class*='sidebar-light'] {
+  .form-control-sidebar,
+  .btn-sidebar {
+    background: darken($sidebar-light-bg, 5%);
+    border: 1px solid darken($sidebar-light-bg, 15%);
+    color: color-yiq(darken($sidebar-light-bg, 5%));
+  }
+
+  .form-control-sidebar:focus,
+  .btn-sidebar:focus {
+    border: 1px solid darken($sidebar-light-bg, 30%);
+  }
+
+  .btn-sidebar:hover {
+    background: darken($sidebar-light-bg, 7.5%);
+  }
+
+  .btn-sidebar:focus {
+    background: darken($sidebar-light-bg, 10%);
+  }
+}

ShopBundle/Resources/public/sass/backend/adminlte/_miscellaneous.scss

@@ -0,0 +1,459 @@
+//
+// Misc: Miscellaneous
+//
+
+.border-transparent {
+  border-color: transparent !important;
+}
+
+// Description Blocks
+.description-block {
+  display: block;
+  margin: 10px 0;
+  text-align: center;
+
+  &.margin-bottom {
+    margin-bottom: 25px;
+  }
+
+  > .description-header {
+    font-size: 16px;
+    font-weight: 600;
+    margin: 0;
+    padding: 0;
+  }
+
+  > .description-text {
+    text-transform: uppercase;
+  }
+
+  // Description Block Extension
+  .description-icon {
+    font-size: 16px;
+  }
+}
+
+// List utility classes
+.list-group-unbordered {
+  > .list-group-item {
+    border-left: 0;
+    border-radius: 0;
+    border-right: 0;
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
+.list-header {
+  color: $gray-600;
+  font-size: 15px;
+  font-weight: bold;
+  padding: 10px 4px;
+}
+
+.list-seperator {
+  background: $card-border-color;
+  height: 1px;
+  margin: 15px 0 9px;
+}
+
+.list-link {
+  > a {
+    color: $gray-600;
+    padding: 4px;
+
+    &:hover {
+      color: $gray-900;
+    }
+  }
+}
+
+// User block
+.user-block {
+  float: left;
+
+  img {
+    float: left;
+    height: 40px;
+    width: 40px;
+  }
+
+  .username,
+  .description,
+  .comment {
+    display: block;
+    margin-left: 50px;
+  }
+
+  .username {
+    font-size: 16px;
+    font-weight: 600;
+    margin-top: -1px;
+  }
+
+  .description {
+    color: $gray-600;
+    font-size: 13px;
+    margin-top: -3px;
+  }
+
+  &.user-block-sm {
+    img {
+      width: $img-size-sm;
+      height: $img-size-sm;
+    }
+
+    .username,
+    .description,
+    .comment {
+      margin-left: 40px;
+    }
+
+    .username {
+      font-size: 14px;
+    }
+  }
+}
+
+// Image sizes
+.img-sm,
+.img-md,
+.img-lg {
+  float: left;
+}
+
+.img-sm {
+  height: $img-size-sm;
+  width: $img-size-sm;
+
+  + .img-push {
+    margin-left: $img-size-sm + $img-size-push;
+  }
+}
+
+.img-md {
+  width: $img-size-md;
+  height: $img-size-md;
+
+  + .img-push {
+    margin-left: $img-size-md + $img-size-push;
+  }
+}
+
+.img-lg {
+  width: $img-size-lg;
+  height: $img-size-lg;
+
+  + .img-push {
+    margin-left: $img-size-lg + $img-size-push;
+  }
+}
+
+// Image bordered
+.img-bordered {
+  border: 3px solid $gray-500;
+  padding: 3px;
+}
+
+.img-bordered-sm {
+  border: 2px solid $gray-500;
+  padding: 2px;
+}
+
+// Rounded and Circle Images
+.img-rounded {
+  @include border-radius($border-radius)
+}
+
+.img-circle {
+  @include border-radius(50%);
+}
+
+// Image sizes
+.img-size-64,
+.img-size-50,
+.img-size-32 {
+  height: auto;
+}
+
+.img-size-64 {
+  width: 64px;
+}
+
+.img-size-50 {
+  width: 50px;
+}
+
+.img-size-32 {
+  width: 32px;
+}
+
+// Block sizes
+.size-32,
+.size-40,
+.size-50 {
+  display: block;
+  text-align: center;
+}
+
+.size-32 {
+  height: 32px;
+  line-height: 32px;
+  width: 32px;
+}
+
+.size-40 {
+  height: 40px;
+  line-height: 40px;
+  width: 40px;
+}
+
+.size-50 {
+  height: 50px;
+  line-height: 50px;
+  width: 50px;
+}
+
+// General attachemnt block
+.attachment-block {
+  background: $gray-100;
+  border: 1px solid $card-border-color;
+  margin-bottom: 10px;
+  padding: 5px;
+
+  .attachment-img {
+    float: left;
+    height: auto;
+    max-height: 100px;
+    max-width: 100px;
+  }
+
+  .attachment-pushed {
+    margin-left: 110px;
+  }
+
+  .attachment-heading {
+    margin: 0;
+  }
+
+  .attachment-text {
+    color: $gray-700;
+  }
+}
+
+// Overlays for Card, InfoBox & SmallBox
+.card,
+.overlay-wrapper,
+.info-box,
+.small-box {
+  // Box overlay for LOADING STATE effect
+  > .overlay,
+  > .loading-img {
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+
+  .overlay {
+    @include border-radius($border-radius);
+    align-items: center;
+    background: rgba($white, 0.7);
+    display: flex;
+    justify-content: center;
+    z-index: 50;
+
+    > .fa,
+    > .fas,
+    > .far,
+    > .fab,
+    > .glyphicon,
+    > .ion {
+      color: $gray-800;
+    }
+
+    &.dark {
+      background: rgba($black, 0.5);
+
+      > .fa,
+      > .fas,
+      > .far,
+      > .fab,
+      > .glyphicon,
+      > .ion {
+        color: $gray-400;
+      }
+    }
+  }
+}
+
+// Ribbon
+.ribbon-wrapper {
+  height: $ribbon-wrapper-size;
+  overflow: hidden;
+  position: absolute;
+  right: -2px;
+  top: -2px;
+  width: $ribbon-wrapper-size;
+  z-index: 10;
+
+  &.ribbon-lg {
+    height: $ribbon-lg-wrapper-size;
+    width: $ribbon-lg-wrapper-size;
+
+    .ribbon {
+      right: $ribbon-lg-right;
+      top: $ribbon-lg-top;
+      width: $ribbon-lg-width;
+    }
+  }
+
+  &.ribbon-xl {
+    height: $ribbon-xl-wrapper-size;
+    width: $ribbon-xl-wrapper-size;
+
+    .ribbon {
+      right: $ribbon-xl-right;
+      top: $ribbon-xl-top;
+      width: $ribbon-xl-width;
+    }
+  }
+
+  .ribbon {
+    box-shadow: 0 0 $ribbon-border-size rgba($black, .3);
+    font-size: $ribbon-font-size;
+    line-height: $ribbon-line-height;
+    padding: $ribbon-padding;
+    position: relative;
+    right: $ribbon-right;
+    text-align: center;
+    text-shadow: 0 -1px 0 rgba($black, .4);
+    text-transform: uppercase;
+    top: $ribbon-top;
+    transform: rotate(45deg);
+    width: $ribbon-width;
+
+    &::before,
+    &::after {
+      border-left: $ribbon-border-size solid transparent;
+      border-right: $ribbon-border-size solid transparent;
+      border-top: $ribbon-border-size solid #9e9e9e;
+      bottom: -$ribbon-border-size;
+      content: '';
+      position: absolute;
+    }
+
+    &::before {
+      left: 0;
+    }
+
+    &::after {
+      right: 0;
+    }
+  }
+}
+
+// Scroll To Top
+.back-to-top {
+  bottom: 1.25rem;
+  position: fixed;
+  right: 1.25rem;
+  z-index: $zindex-control-sidebar + 1;
+
+  &:focus {
+    box-shadow: none;
+  }
+}
+
+// Pre
+pre {
+  padding: .75rem;
+}
+
+// Blockquotes styles
+blockquote {
+  background: $white;
+  border-left: .7rem solid $primary;
+  margin: 1.5em .7rem;
+  padding: 0.5em .7rem;
+
+  .box & {
+    background: $gray-200;
+  }
+
+  p:last-child {
+    margin-bottom: 0;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: $primary;
+    font-size: 1.25rem;
+    font-weight: 600;
+  }
+
+  @each $color, $value in $theme-colors {
+    &.quote-#{$color} {
+      border-color: $value;
+
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        color: $value;
+      }
+    }
+  }
+
+  @each $color, $value in $colors {
+    &.quote-#{$color} {
+      border-color: $value;
+
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        color: $value;
+      }
+    }
+  }
+}
+
+
+// Tab Custom Content
+
+.tab-custom-content {
+  border-top: $nav-tabs-border-width solid $nav-tabs-border-color;
+  margin-top: .5rem;
+  padding-top: .5rem;
+}
+
+.nav + .tab-custom-content {
+  border-top: none;
+  border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
+  margin-top: 0;
+  margin-bottom: .5rem;
+  padding-bottom: .5rem;
+}
+
+
+// Badge BTN Style
+.badge-btn {
+  border-radius: $button-border-radius-xs;
+  font-size: $button-font-size-xs;
+  font-weight: 400;
+  padding: $button-padding-y-xs*2 $button-padding-x-xs*2;
+}
+
+.badge-btn.badge-pill {
+  padding: .375rem .6rem;
+}

ShopBundle/Resources/public/sass/backend/adminlte/_mixins.scss

@@ -0,0 +1,13 @@
+//
+// General: Mixins
+//
+
+@import 'mixins/cards';
+@import 'mixins/sidebar';
+@import 'mixins/navbar';
+@import 'mixins/accent';
+@import 'mixins/custom-forms';
+@import 'mixins/backgrounds';
+@import 'mixins/direct-chat';
+@import 'mixins/toasts';
+@import 'mixins/miscellaneous';

ShopBundle/Resources/public/sass/backend/adminlte/_modals.scss

@@ -0,0 +1,40 @@
+//
+// Component: Modals
+//
+
+// Overlay
+.modal-dialog {
+  .overlay {
+    background-color: $black;
+    display: block;
+    height: 100%;
+    left: 0;
+    opacity: .7;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: ($zindex-modal + 2);
+  }
+}
+
+
+// BG Color Variations Fixes
+.modal-content {
+  &.bg-warning {
+    .modal-header,
+    .modal-footer {
+      border-color: $gray-800;
+    }
+  }
+
+  &.bg-primary,
+  &.bg-secondary,
+  &.bg-info,
+  &.bg-danger,
+  &.bg-success, {
+    .close {
+      color: $white;
+      text-shadow: 0 1px 0 #000;
+    }
+  }
+}

ShopBundle/Resources/public/sass/backend/adminlte/_navs.scss

@@ -0,0 +1,100 @@
+//
+// Component: Nav
+//
+
+.nav-pills {
+  .nav-link {
+    color: $gray-600;
+
+    &:not(.active):hover {
+      color: theme-color('primary');
+    }
+  }
+
+  .nav-item {
+    &.dropdown.show {
+      .nav-link:hover {
+        color: $dropdown-link-active-color;
+      }
+    }
+  }
+}
+
+// Vertical Tabs
+.nav-tabs.flex-column {
+  border-bottom: 0;
+  border-right: $nav-tabs-border-width solid $nav-tabs-border-color;
+
+  .nav-link {
+    border-bottom-left-radius: $nav-tabs-border-radius;
+    border-top-right-radius: 0;
+    margin-right: -$nav-tabs-border-width;
+
+    @include hover-focus {
+      border-color: $gray-200 transparent $gray-200 $gray-200;
+    }
+  }
+
+  .nav-link.active,
+  .nav-item.show .nav-link {
+    border-color: $gray-300 transparent $gray-300 $gray-300;
+  }
+
+  &.nav-tabs-right {
+    border-left: $nav-tabs-border-width solid $nav-tabs-border-color;
+    border-right: 0;
+
+    .nav-link {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: $nav-tabs-border-radius;
+      border-top-left-radius: 0;
+      border-top-right-radius: $nav-tabs-border-radius;
+      margin-left: -$nav-tabs-border-width;
+
+      @include hover-focus {
+        border-color: $gray-200 $gray-200 $gray-200 transparent;
+      }
+    }
+
+    .nav-link.active,
+    .nav-item.show .nav-link {
+      border-color: $gray-300 $gray-300 $gray-300 transparent;
+    }
+  }
+}
+
+.navbar-no-expand {
+  flex-direction: row;
+
+  .nav-link {
+    padding-left: $navbar-nav-link-padding-x;
+    padding-right: $navbar-nav-link-padding-x;
+  }
+
+  .dropdown-menu {
+    position: absolute;
+  }
+}
+
+// Color variants
+@each $color, $value in $theme-colors {
+  @if $color == dark or $color == light {
+    .navbar-#{$color} {
+      background-color: $value;
+    }
+  }
+}
+
+@each $color, $value in $theme-colors {
+  @if $color != dark and $color != light {
+    .navbar-#{$color} {
+      background-color: $value;
+    }
+  }
+}
+
+@each $color, $value in $colors {
+  .navbar-#{$color} {
+    background-color: $value;
+  }
+}

ShopBundle/Resources/public/sass/backend/adminlte/_print.scss

@@ -0,0 +1,52 @@
+//
+// Misc: Print
+//
+
+@media print {
+  //Add to elements that you do not want to show when printing
+  .no-print {
+    display: none !important;
+  }
+
+  //Elements that we want to hide when printing
+  .main-sidebar,
+  .main-header,
+  .content-header {
+    @extend .no-print;
+  }
+
+  //This is the only element that should appear, so let's remove the margins
+  .content-wrapper,
+  .main-footer {
+    @include translate(0, 0);
+    margin-left: 0 !important;
+    min-height: 0 !important;
+  }
+
+  .layout-fixed .content-wrapper {
+    padding-top: 0 !important;
+  }
+
+  //Invoice printing
+  .invoice {
+    border: 0;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+  }
+
+  .invoice-col {
+    float: left;
+    width: 33.3333333%;
+  }
+
+  //Make sure table content displays properly
+  .table-responsive {
+    overflow: auto;
+
+    > .table tr th,
+    > .table tr td {
+      white-space: normal !important;
+    }
+  }
+}

ShopBundle/Resources/public/sass/backend/adminlte/_products.scss

@@ -0,0 +1,54 @@
+//
+// Component: Products
+//
+
+.products-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  > .item {
+    @include clearfix;
+
+    @if $enable-rounded {
+      @include border-radius($border-radius);
+    }
+
+    background: $white;
+    padding: 10px 0;
+  }
+
+  .product-img {
+    float: left;
+
+    img {
+      height: 50px;
+      width: 50px;
+    }
+  }
+
+  .product-info {
+    margin-left: 60px;
+  }
+
+  .product-title {
+    font-weight: 600;
+  }
+
+  .product-description {
+    color: $gray-600;
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+.product-list-in-card > .item {
+  @include border-radius(0);
+  border-bottom: 1px solid $card-border-color;
+
+  &:last-of-type {
+    border-bottom-width: 0;
+  }
+}

ShopBundle/Resources/public/sass/backend/adminlte/_progress-bars.scss

@@ -0,0 +1,66 @@
+//
+// Component: Progress Bar
+//
+
+//General CSS
+.progress {
+  @include box-shadow(none);
+  @include border-radius($progress-bar-border-radius);
+
+  // Vertical bars
+  &.vertical {
+    display: inline-block;
+    height: 200px;
+    margin-right: 10px;
+    position: relative;
+    width: 30px;
+
+    > .progress-bar {
+      bottom: 0;
+      position: absolute;
+      width: 100%;
+    }
+
+    //Sizes
+    &.sm,
+    &.progress-sm {
+      width: 20px;
+    }
+
+    &.xs,
+    &.progress-xs {
+      width: 10px;
+    }
+
+    &.xxs,
+    &.progress-xxs {
+      width: 3px;
+    }
+  }
+}
+
+.progress-group {
+  margin-bottom: map-get($spacers, 2);
+}
+
+// size variation
+.progress-sm {
+  height: 10px;
+}
+
+.progress-xs {
+  height: 7px;
+}
+
+.progress-xxs {
+  height: 3px;
+}
+
+// Remove margins from progress bars when put in a table
+.table {
+  tr > td {
+    .progress {
+      margin: 0;
+    }
+  }
+}

ShopBundle/Resources/public/sass/backend/adminlte/_sidebar-mini.scss

@@ -0,0 +1,148 @@
+//
+// Component: Sidebar Mini
+//
+
+// Logo style
+.logo-xs,
+.logo-xl {
+  opacity: 1;
+  position: absolute;
+  visibility: visible;
+
+  &.brand-image-xs {
+    left: 18px;
+    top: 12px;
+  }
+
+  &.brand-image-xl {
+    left: 12px;
+    top: 6px;
+  }
+}
+
+.logo-xs {
+  opacity: 0;
+  visibility: hidden;
+
+  &.brand-image-xl {
+    left: 16px;
+    top: 8px;
+  }
+}
+
+.brand-link {
+  &.logo-switch {
+    &::before {
+      content: '\00a0';
+    }
+  }
+}
+
+// Add sidebar-mini class to the body tag to activate this feature
+.sidebar-mini {
+  @include media-breakpoint-up(lg) {
+    @include sidebar-mini-breakpoint;
+  }
+}
+@include media-breakpoint-down(md) {
+  .sidebar-mini.sidebar-collapse .main-sidebar {
+    box-shadow: none !important;
+  }
+}
+
+.sidebar-mini-md {
+  @include media-breakpoint-up(md) {
+    @include sidebar-mini-breakpoint;
+  }
+}
+@include media-breakpoint-down(sm) {
+  .sidebar-mini-md.sidebar-collapse .main-sidebar {
+    box-shadow: none !important;
+  }
+}
+
+.sidebar-collapse {
+  .main-sidebar.sidebar-focused,
+  .main-sidebar:hover {
+    .nav-header {
+      display: inline-block;
+    }
+  }
+
+  .sidebar-no-expand.main-sidebar.sidebar-focused,
+  .sidebar-no-expand.main-sidebar:hover {
+    width: $sidebar-mini-width;
+
+    .nav-header {
+      display: none;
+    }
+
+    .brand-link {
+      width: $sidebar-mini-width !important;
+    }
+
+    .user-panel .image {
+      float: none !important;
+    }
+
+    .logo-xs {
+      opacity: 1;
+      visibility: visible;
+    }
+
+    .logo-xl {
+      opacity: 0;
+      visibility: hidden;
+    }
+
+    .nav-sidebar.nav-child-indent .nav-treeview {
+      padding-left: 0;
+    }
+
+    .brand-text,
+    .user-panel > .info,
+    .nav-sidebar .nav-link p {
+      margin-left: -10px;
+      opacity: 0;
+      visibility: hidden;
+      width: 0;
+    }
+
+    .nav-sidebar > .nav-item .nav-icon {
+      margin-right: 0;
+    }
+  }
+}
+
+.nav-sidebar {
+  position: relative;
+
+  &:hover {
+    overflow: visible;
+  }
+}
+
+.sidebar-form,
+.nav-sidebar > .nav-header {
+  overflow: hidden;
+  text-overflow: clip;
+}
+
+.nav-sidebar .nav-item > .nav-link {
+  position: relative;
+
+  > .float-right {
+    margin-top: -7px;
+    position: absolute;
+    right: 10px;
+    top: 50%;
+  }
+}
+
+.sidebar .nav-link p,
+.main-sidebar .brand-text,
+.main-sidebar .logo-xs,
+.main-sidebar .logo-xl,
+.sidebar .user-panel .info {
+  @include transition(margin-left $transition-speed linear, opacity $transition-speed ease, visibility $transition-speed ease)
+}

ShopBundle/Resources/public/sass/backend/adminlte/_small-box.scss

@@ -0,0 +1,152 @@
+//
+// Component: Small Box
+//
+
+.small-box {
+  @include border-radius($border-radius);
+  @include box-shadow($card-shadow);
+
+  display: block;
+  margin-bottom: 20px;
+  position: relative;
+
+  // content wrapper
+  > .inner {
+    padding: 10px;
+  }
+
+  > .small-box-footer {
+    background: rgba($black, 0.1);
+    color: rgba($white, 0.8);
+    display: block;
+    padding: 3px 0;
+    position: relative;
+    text-align: center;
+    text-decoration: none;
+    z-index: 10;
+
+    &:hover {
+      background: rgba($black, 0.15);
+      color: $white;
+    }
+  }
+
+  h3 {
+    @include font-size(2.2rem);
+    font-weight: bold;
+    margin: 0 0 10px 0;
+    padding: 0;
+    white-space: nowrap;
+  }
+
+  @include media-breakpoint-up(lg) {
+    .col-xl-2 &,
+    .col-lg-2 &,
+    .col-md-2 & {
+      h3 {
+        @include font-size(1.6rem);
+      }
+    }
+
+    .col-xl-3 &,
+    .col-lg-3 &,
+    .col-md-3 & {
+      h3 {
+        @include font-size(1.6rem);
+      }
+    }
+  }
+
+  @include media-breakpoint-up(xl) {
+    .col-xl-2 &,
+    .col-lg-2 &,
+    .col-md-2 & {
+      h3 {
+        @include font-size(2.2rem);
+      }
+    }
+
+    .col-xl-3 &,
+    .col-lg-3 &,
+    .col-md-3 & {
+      h3 {
+        @include font-size(2.2rem);
+      }
+    }
+  }
+
+  p {
+    font-size: 1rem;
+
+    > small {
+      color: $gray-100;
+      display: block;
+      font-size: 0.9rem;
+      margin-top: 5px;
+    }
+  }
+
+  h3,
+  p {
+    z-index: 5;
+  }
+
+  // the icon
+  .icon {
+    color: rgba($black, 0.15);
+    z-index: 0;
+
+    > i {
+      font-size: 90px;
+      position: absolute;
+      right: 15px;
+      top: 15px;
+      transition: all $transition-speed linear;
+
+      &.fa,
+      &.fas,
+      &.far,
+      &.fab,
+      &.glyphicon,
+      &.ion {
+        font-size: 70px;
+        top: 20px;
+      }
+    }
+
+  }
+
+  // Small box hover state
+  &:hover {
+    text-decoration: none;
+
+    // Animate icons on small box hover
+    .icon > i {
+      font-size: 95px;
+
+      &.fa,
+      &.fas,
+      &.far,
+      &.fab,
+      &.glyphicon,
+      &.ion {
+        font-size: 75px;
+      }
+    }
+  }
+}
+
+@include media-breakpoint-down(sm) {
+  // No need for icons on very small devices
+  .small-box {
+    text-align: center;
+
+    .icon {
+      display: none;
+    }
+
+    p {
+      font-size: 12px;
+    }
+  }
+}

ShopBundle/Resources/public/sass/backend/adminlte/_social-widgets.scss

@@ -0,0 +1,93 @@
+//
+// Component: Social Widgets
+//
+
+//General widget style
+.card-widget {
+  border: 0;
+  position: relative;
+}
+
+//User Widget Style 1
+.widget-user {
+
+  //User name container
+  .widget-user-header {
+    @if $enable-rounded {
+      @include border-top-radius($border-radius);
+    }
+
+    height: 135px;
+    padding: 1rem;
+    text-align: center;
+  }
+
+  //User name
+  .widget-user-username {
+    font-size: 25px;
+    font-weight: 300;
+    margin-bottom: 0;
+    margin-top: 0;
+    text-shadow: 0 1px 1px rgba($black, 0.2);
+  }
+
+  //User single line description
+  .widget-user-desc {
+    margin-top: 0;
+  }
+
+  //User image container
+  .widget-user-image {
+    left: 50%;
+    margin-left: -45px;
+    position: absolute;
+    top: 80px;
+
+    > img {
+      border: 3px solid $white;
+      height: auto;
+      width: 90px;
+    }
+  }
+
+  .card-footer {
+    padding-top: 50px;
+  }
+}
+
+//User Widget Style 2
+.widget-user-2 {
+
+  //User name container
+  .widget-user-header {
+    @include border-top-radius($border-radius);
+    padding: 1rem;
+  }
+
+  //User name
+  .widget-user-username {
+    font-size: 25px;
+    font-weight: 300;
+    margin-bottom: 5px;
+    margin-top: 5px;
+  }
+
+  //User single line description
+  .widget-user-desc {
+    margin-top: 0;
+  }
+
+  .widget-user-username,
+  .widget-user-desc {
+    margin-left: 75px;
+  }
+
+  //User image container
+  .widget-user-image {
+    > img {
+      float: left;
+      height: auto;
+      width: 65px;
+    }
+  }
+}

ShopBundle/Resources/public/sass/backend/adminlte/_table.scss

@@ -0,0 +1,74 @@
+//
+// Component: Table
+//
+
+.table {
+  &:not(.table-dark) {
+    color: inherit;
+  }
+
+  // fixed table head
+  &.table-head-fixed {
+    thead tr:nth-child(1) th {
+      background-color: $white;
+      border-bottom: 0;
+      box-shadow: inset 0 1px 0 $table-border-color,
+                  inset 0 -1px 0 $table-border-color;
+      position: sticky;
+      top: 0;
+      z-index: 10;
+    }
+
+    &.table-dark {
+      thead tr {
+        &:nth-child(1) th {
+          background-color: $table-dark-bg;
+          box-shadow: inset 0 1px 0 $table-dark-border-color,
+                      inset 0 -1px 0 $table-dark-border-color;
+        }
+      }
+    }
+  }
+
+  // no border
+  &.no-border {
+    &,
+    td,
+    th {
+      border: 0;
+    }
+  }
+
+  // .text-center in tables
+  &.text-center {
+    &,
+    td,
+    th {
+      text-align: center;
+    }
+  }
+
+  &.table-valign-middle {
+    thead > tr > th,
+    thead > tr > td,
+    tbody > tr > th,
+    tbody > tr > td {
+      vertical-align: middle;
+    }
+  }
+
+  .card-body.p-0 & {
+    thead > tr > th,
+    thead > tr > td,
+    tbody > tr > th,
+    tbody > tr > td {
+      &:first-of-type {
+        padding-left: map-get($spacers, 4);
+      }
+
+      &:last-of-type {
+        padding-right: map-get($spacers, 4);
+      }
+    }
+  }
+}

ShopBundle/Resources/public/sass/backend/adminlte/_text.scss

@@ -0,0 +1,37 @@
+//
+// Component: Text
+//
+
+// text modification
+.text-bold {
+  &, &.table td, &.table th {
+    font-weight: 700;
+  }
+}
+
+.text-xs {
+  font-size: $font-size-xs !important;
+}
+
+.text-sm {
+  font-size: $font-size-sm !important;
+}
+
+.text-md {
+  font-size: $font-size-base !important;
+}
+
+.text-lg {
+  font-size: $font-size-lg !important;
+}
+
+.text-xl {
+  font-size: $font-size-xl !important;
+}
+
+// text color variations
+@each $name, $color in $colors {
+  .text-#{$name} {
+    color: #{$color};
+  }
+}

ShopBundle/Resources/public/sass/backend/adminlte/_timeline.scss

@@ -0,0 +1,127 @@
+//
+// Component: Timeline
+//
+
+.timeline {
+  margin: 0 0 45px;
+  padding: 0;
+  position: relative;
+  // The line
+  &::before {
+    @include border-radius($border-radius);
+    background: $gray-300;
+    bottom: 0;
+    content: '';
+    left: 31px;
+    margin: 0;
+    position: absolute;
+    top: 0;
+    width: 4px;
+  }
+  // Element
+  > div {
+    &::before,
+    &::after {
+      content: "";
+      display: table;
+    }
+
+    margin-bottom: 15px;
+    margin-right: 10px;
+    position: relative;
+    // The content
+    > .timeline-item {
+      @include box-shadow($card-shadow);
+      @include border-radius($border-radius);
+      background: $white;
+      color: $gray-700;
+      margin-left: 60px;
+      margin-right: 15px;
+      margin-top: 0;
+      padding: 0;
+      position: relative;
+      // The time and header
+      > .time {
+        color: #999;
+        float: right;
+        font-size: 12px;
+        padding: 10px;
+      }
+      // Header
+      > .timeline-header {
+        border-bottom: 1px solid $card-border-color;
+        color: $gray-700;
+        font-size: 16px;
+        line-height: 1.1;
+        margin: 0;
+        padding: 10px;
+        // Link in header
+        > a {
+          font-weight: 600;
+        }
+      }
+      // Item body and footer
+      > .timeline-body,
+      > .timeline-footer {
+        padding: 10px;
+      }
+
+      > .timeline-body {
+        > img {
+          margin: 10px;
+        }
+        > dl, ol, ul {
+          margin: 0;
+        }
+      }
+
+      > .timeline-footer {
+        > a {
+          color: $white;
+        }
+      }
+    }
+    // The icons at line
+    > .fa,
+    > .fas,
+    > .far,
+    > .fab,
+    > .glyphicon,
+    > .ion {
+      background: $gray-500;
+      border-radius: 50%;
+      font-size: 15px;
+      height: 30px;
+      left: 18px;
+      line-height: 30px;
+      position: absolute;
+      text-align: center;
+      top: 0;
+      width: 30px;
+    }
+  }
+  // Time label
+  > .time-label {
+    > span {
+      @include border-radius(4px);
+      background-color: $white;
+      display: inline-block;
+      font-weight: 600;
+      padding: 5px;
+    }
+  }
+}
+
+.timeline-inverse {
+  > div {
+    > .timeline-item {
+      @include box-shadow(none);
+      background: $gray-100;
+      border: 1px solid $gray-300;
+
+      > .timeline-header {
+        border-bottom-color: $gray-300;
+      }
+    }
+  }
+}

ShopBundle/Resources/public/sass/backend/adminlte/_toasts.scss

@@ -0,0 +1,56 @@
+//
+// Component: Toasts
+//
+
+.toasts-top-right {
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: $zindex-toasts;
+
+  &.fixed {
+    position: fixed;
+  }
+}
+
+.toasts-top-left {
+  left: 0;
+  position: absolute;
+  top: 0;
+  z-index: $zindex-toasts;
+
+  &.fixed {
+    position: fixed;
+  }
+}
+
+.toasts-bottom-right {
+  bottom: 0;
+  position: absolute;
+  right: 0;
+  z-index: $zindex-toasts;
+
+  &.fixed {
+    position: fixed;
+  }
+}
+
+.toasts-bottom-left {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  z-index: $zindex-toasts;
+
+  &.fixed {
+    position: fixed;
+  }
+}
+
+.toast {
+  @each $name, $color in $theme-colors {
+    @include toast-variant($name, $color);
+  }
+  @each $name, $color in $colors {
+    @include toast-variant($name, $color);
+  }
+}

ShopBundle/Resources/public/sass/backend/adminlte/_users-list.scss

@@ -0,0 +1,45 @@
+//
+// Component: Users List
+//
+
+.users-list {
+  @include list-unstyled;
+
+  > li {
+    float: left;
+    padding: 10px;
+    text-align: center;
+    width: 25%;
+
+    img {
+      @include border-radius(50%);
+      height: auto;
+      max-width: 100%;
+    }
+
+    > a:hover {
+      &,
+      .users-list-name {
+        color: #999;
+      }
+    }
+  }
+}
+
+.users-list-name,
+.users-list-date {
+  display: block;
+}
+
+.users-list-name {
+  color: $gray-700;
+  font-size: $font-size-sm;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.users-list-date {
+  color: darken($gray-500, 20%);
+  font-size: 12px;
+}

ShopBundle/Resources/public/sass/backend/adminlte/_variables.scss

@@ -0,0 +1,237 @@
+//
+// Core: Variables
+//
+
+// COLORS
+// --------------------------------------------------------
+$blue: #0073b7 !default;
+$lightblue: #3c8dbc !default;
+$navy: #001f3f !default;
+$teal: #39cccc !default;
+$olive: #3d9970 !default;
+$lime: #01ff70 !default;
+$orange: #ff851b !default;
+$fuchsia: #f012be !default;
+$purple: #605ca8 !default;
+$maroon: #d81b60 !default;
+$black: #111 !default;
+$gray-x-light: #d2d6de !default;
+
+$colors: map-merge((
+    'lightblue': $lightblue,
+    'navy': $navy,
+    'olive': $olive,
+    'lime': $lime,
+    'fuchsia': $fuchsia,
+    'maroon': $maroon,
+), $colors);
+
+// LAYOUT
+// --------------------------------------------------------
+
+$font-size-root: 1rem !default;
+
+// Sidebar
+$sidebar-width: 230px !default;
+$sidebar-padding-x: 0.5rem !default;
+$sidebar-padding-y: 0 !default;
+
+// Boxed layout maximum width
+$boxed-layout-max-width: 1250px !default;
+
+// When to show the smaller logo
+$screen-header-collapse: map-get($grid-breakpoints, md) !default;
+
+// Body background (Affects main content background only)
+$main-bg: #f4f6f9 !default;
+
+// Content padding
+$content-padding-y: 0 !default;
+$content-padding-x: $navbar-padding-x !default;
+
+// IMAGE SIZES
+// --------------------------------------------------------
+$img-size-sm: 1.875rem !default;
+$img-size-md: 3.75rem !default;
+$img-size-lg: 6.25rem !default;
+$img-size-push: .625rem !default;
+
+// MAIN HEADER
+// --------------------------------------------------------
+$main-header-bottom-border-width: $border-width !default;
+$main-header-bottom-border-color: $gray-300 !default;
+$main-header-bottom-border: $main-header-bottom-border-width solid $main-header-bottom-border-color !default;
+$main-header-link-padding-y: $navbar-padding-y !default;
+$main-header-link-padding-x: $navbar-padding-x !default;
+$main-header-brand-padding-y: $navbar-brand-padding-y !default;
+$main-header-brand-padding-x: $navbar-padding-x !default;
+$main-header-height-inner: ($nav-link-height + ($main-header-link-padding-y * 2)) !default;
+$main-header-height: calc(#{$main-header-height-inner} + #{$main-header-bottom-border-width}) !default;
+$nav-link-sm-padding-y: .35rem !default;
+$nav-link-sm-height: ($font-size-sm * $line-height-sm + $nav-link-sm-padding-y * 1.785) !default;
+$main-header-height-sm-inner: ($nav-link-sm-height + ($main-header-link-padding-y * 2)) !default;
+$main-header-height-sm: calc(#{$main-header-height-sm-inner} + #{$main-header-bottom-border-width}) !default;
+
+
+// Main header skins
+$main-header-dark-form-control-bg: hsla(100, 100%, 100%, 0.2) !default;
+$main-header-dark-form-control-focused-bg: hsla(100, 100%, 100%, 0.6) !default;
+$main-header-dark-form-control-focused-color: $gray-800 !default;
+$main-header-dark-form-control-border: 0 !default;
+$main-header-dark-form-control-focused-border: 0 !default;
+$main-header-dark-placeholder-color: hsla(100, 100%, 100%, 0.6) !default;
+
+$main-header-light-form-control-bg: darken($gray-100, 2%) !default;
+$main-header-light-form-control-focused-bg: $gray-200 !default;
+$main-header-light-form-control-focused-color: $gray-800 !default;
+$main-header-light-form-control-border: 0 !default;
+$main-header-light-form-control-focused-border: 0 !default;
+$main-header-light-placeholder-color: hsla(0, 0%, 0%, 0.6) !default;
+
+// MAIN FOOTER
+// --------------------------------------------------------
+$main-footer-padding: 1rem !default;
+$main-footer-padding-sm: $main-footer-padding * .812 !default;
+$main-footer-border-top-width: 1px !default;
+$main-footer-border-top-color: $gray-300 !default;
+$main-footer-border-top: $main-footer-border-top-width solid $main-footer-border-top-color !default;
+$main-footer-height-inner: (($font-size-root * $line-height-base) + ($main-footer-padding * 2)) !default;
+$main-footer-height: calc(#{$main-footer-height-inner} + #{$main-footer-border-top-width}) !default;
+$main-footer-height-sm-inner: (($font-size-sm * $line-height-base) + ($main-footer-padding-sm * 2)) !default;
+$main-footer-height-sm: calc(#{$main-footer-height-sm-inner} + #{$main-footer-border-top-width}) !default;
+$main-footer-bg: $white !default;
+
+// SIDEBAR SKINS
+// --------------------------------------------------------
+
+// Dark sidebar
+$sidebar-dark-bg: $dark !default;
+$sidebar-dark-hover-bg: hsla(100, 100%, 100%, 0.1) !default;
+$sidebar-dark-color: #C2C7D0 !default;
+$sidebar-dark-hover-color: $white !default;
+$sidebar-dark-active-color: $white !default;
+$sidebar-dark-submenu-bg: transparent !default;
+$sidebar-dark-submenu-color: #C2C7D0 !default;
+$sidebar-dark-submenu-hover-color: $white !default;
+$sidebar-dark-submenu-hover-bg: $sidebar-dark-hover-bg !default;
+$sidebar-dark-submenu-active-color: $sidebar-dark-bg !default;
+$sidebar-dark-submenu-active-bg: hsla(100, 100%, 100%, 0.9) !default;
+$sidebar-dark-header-color: $white !default;
+
+// Light sidebar
+$sidebar-light-bg: $white !default;
+$sidebar-light-hover-bg: rgba($black, .1) !default;
+$sidebar-light-color: $gray-800 !default;
+$sidebar-light-hover-color: $gray-900 !default;
+$sidebar-light-active-color: $black !default;
+$sidebar-light-submenu-bg: transparent !default;
+$sidebar-light-submenu-color: #777 !default;
+$sidebar-light-submenu-hover-color: #000 !default;
+$sidebar-light-submenu-hover-bg: $sidebar-light-hover-bg !default;
+$sidebar-light-submenu-active-color: $sidebar-light-hover-color !default;
+$sidebar-light-submenu-active-bg: $sidebar-light-submenu-hover-bg !default;
+$sidebar-light-header-color: $gray-800 !default;
+
+// SIDEBAR MINI
+// --------------------------------------------------------
+$sidebar-mini-width: ($nav-link-padding-x + $sidebar-padding-x + .8rem) * 2 !default;
+$sidebar-nav-icon-width: $sidebar-mini-width - (($sidebar-padding-x + $nav-link-padding-x) * 2) !default;
+$sidebar-user-image-width: $sidebar-nav-icon-width + ($nav-link-padding-x / 2) !default;
+
+// CONTROL SIDEBAR
+// --------------------------------------------------------
+$control-sidebar-width: $sidebar-width !default;
+
+// Cards
+// --------------------------------------------------------
+$card-border-color: $gray-100 !default;
+$card-dark-border-color: lighten($gray-900, 10%) !default;
+$card-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2) !default;
+$card-title-font-size: 1.1rem !default;
+$card-title-font-size-sm: 1rem !default;
+$card-title-font-weight: $font-weight-normal !default;
+$card-nav-link-padding-sm-y: .4rem !default;
+$card-nav-link-padding-sm-x: .8rem !default;
+$card-img-size: $img-size-sm !default;
+
+// PROGRESS BARS
+// --------------------------------------------------------
+$progress-bar-border-radius: 1px !default;
+$progress-bar-sm-border-radius: 1px !default;
+$progress-bar-xs-border-radius: 1px !default;
+
+// DIRECT CHAT
+// --------------------------------------------------------
+$direct-chat-height: 250px !default;
+$direct-chat-default-msg-bg: $gray-x-light !default;
+$direct-chat-default-font-color: #444 !default;
+$direct-chat-default-msg-border-color: $gray-x-light !default;
+
+// CHAT WIDGET
+// --------------------------------------------------------
+$attachment-border-radius: 3px !default;
+
+// Z-INDEX
+// --------------------------------------------------------
+$zindex-main-header: $zindex-fixed + 4 !default;
+$zindex-main-sidebar: $zindex-fixed + 8 !default;
+$zindex-main-footer: $zindex-fixed + 2 !default;
+$zindex-control-sidebar: $zindex-fixed + 1 !default;
+$zindex-sidebar-mini-links: 010 !default;
+$zindex-toasts: $zindex-main-sidebar + 2 !default;
+
+// TRANSITIONS SETTINGS
+// --------------------------------------------------------
+
+// Transition global options
+$transition-speed: 0.3s !default;
+$transition-fn: ease-in-out !default;
+
+// TEXT
+// --------------------------------------------------------
+$font-size-xs: ($font-size-base * .75) !default;
+$font-size-xl: ($font-size-base * 2) !default;
+
+
+// BUTTON
+// --------------------------------------------------------
+$button-default-background-color: $gray-100 !default;
+$button-default-color: #444 !default;
+$button-default-border-color: #ddd !default;
+
+$button-padding-y-xs: .125rem !default;
+$button-padding-x-xs: .25rem !default;
+$button-line-height-xs: $line-height-sm !default;
+$button-font-size-xs: ($font-size-base * .75) !default;
+$button-border-radius-xs: .15rem !default;
+
+
+// ELEVATION
+// --------------------------------------------------------
+$elevations: ();
+$elevations: map-merge((
+    1: unquote('0 1px 3px ' + rgba($black, 0.12) + ', 0 1px 2px ' + rgba($black, 0.24)),
+    2: unquote('0 3px 6px ' + rgba($black, 0.16) + ', 0 3px 6px ' + rgba($black, 0.23)),
+    3: unquote('0 10px 20px ' + rgba($black, 0.19) + ', 0 6px 6px ' + rgba($black, 0.23)),
+    4: unquote('0 14px 28px ' + rgba($black, 0.25) + ', 0 10px 10px ' + rgba($black, 0.22)),
+    5: unquote('0 19px 38px ' + rgba($black, 0.30) + ', 0 15px 12px ' + rgba($black, 0.22)),
+), $elevations);
+
+// RIBBON
+// --------------------------------------------------------
+$ribbon-border-size: 3px !default;
+$ribbon-line-height: 100% !default;
+$ribbon-padding: .375rem 0 !default;
+$ribbon-font-size: .8rem !default;
+$ribbon-width: 90px !default;
+$ribbon-wrapper-size: 70px !default;
+$ribbon-top: 10px !default;
+$ribbon-right: -2px !default;
+$ribbon-lg-wrapper-size: 120px !default;
+$ribbon-lg-width: 160px !default;
+$ribbon-lg-top: 26px !default;
+$ribbon-lg-right: 0px !default;
+$ribbon-xl-wrapper-size: 180px !default;
+$ribbon-xl-width: 240px !default;
+$ribbon-xl-top: 47px !default;
+$ribbon-xl-right: 4px !default;

ShopBundle/Resources/public/sass/backend/adminlte/adminlte.scss

@@ -0,0 +1,24 @@
+/*!
+ *   AdminLTE v3.0.3-pre
+ *   Author: Colorlib
+ *   Website: AdminLTE.io <http://adminlte.io>
+ *   License: Open source - MIT <http://opensource.org/licenses/MIT>
+ */
+// Bootstrap
+// ---------------------------------------------------
+@import '../bootstrap/functions';
+@import 'bootstrap-variables';
+@import '../bootstrap/bootstrap';
+
+// Variables and Mixins
+// ---------------------------------------------------
+@import 'variables';
+@import 'mixins';
+
+@import 'parts/core';
+@import 'parts/components';
+@import 'parts/extra-components';
+@import 'parts/pages';
+@import 'parts/plugins';
+@import 'parts/miscellaneous';
+

ShopBundle/Resources/public/sass/backend/adminlte/bootstrap/_functions.scss

@@ -0,0 +1,86 @@
+// Bootstrap functions
+//
+// Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
+
+// Ascending
+// Used to evaluate Sass maps like our grid breakpoints.
+@mixin _assert-ascending($map, $map-name) {
+  $prev-key: null;
+  $prev-num: null;
+  @each $key, $num in $map {
+    @if $prev-num == null or unit($num) == "%" {
+      // Do nothing
+    } @else if not comparable($prev-num, $num) {
+      @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
+    } @else if $prev-num >= $num {
+      @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
+    }
+    $prev-key: $key;
+    $prev-num: $num;
+  }
+}
+
+// Starts at zero
+// Used to ensure the min-width of the lowest breakpoint starts at 0.
+@mixin _assert-starts-at-zero($map, $map-name: "$grid-breakpoints") {
+  $values: map-values($map);
+  $first-value: nth($values, 1);
+  @if $first-value != 0 {
+    @warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
+  }
+}
+
+// Replace `$search` with `$replace` in `$string`
+// Used on our SVG icon backgrounds for custom forms.
+//
+// @author Hugo Giraudel
+// @param {String} $string - Initial string
+// @param {String} $search - Substring to replace
+// @param {String} $replace ('') - New value
+// @return {String} - Updated string
+@function str-replace($string, $search, $replace: "") {
+  $index: str-index($string, $search);
+
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  }
+
+  @return $string;
+}
+
+// Color contrast
+@function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) {
+  $r: red($color);
+  $g: green($color);
+  $b: blue($color);
+
+  $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
+
+  @if ($yiq >= $yiq-contrasted-threshold) {
+    @return $dark;
+  } @else {
+    @return $light;
+  }
+}
+
+// Retrieve color Sass maps
+@function color($key: "blue") {
+  @return map-get($colors, $key);
+}
+
+@function theme-color($key: "primary") {
+  @return map-get($theme-colors, $key);
+}
+
+@function gray($key: "100") {
+  @return map-get($grays, $key);
+}
+
+// Request a theme color level
+@function theme-color-level($color-name: "primary", $level: 0) {
+  $color: theme-color($color-name);
+  $color-base: if($level > 0, $black, $white);
+  $level: abs($level);
+
+  @return mix($color-base, $color, $level * $theme-color-interval);
+}

ShopBundle/Resources/public/sass/backend/adminlte/mixins/_accent.scss

@@ -0,0 +1,86 @@
+//
+// Mixins: Accent
+//
+
+// Accent Variant
+@mixin accent-variant($name, $color) {
+  .accent-#{$name} {
+    $link-color: $color;
+    $link-hover-color: darken($color, 15%);
+    $pagination-active-bg: $color;
+    $pagination-active-border-color: $color;
+
+    .btn-link,
+    a:not(.dropdown-item):not(.btn-app):not(.nav-link):not(.brand-link) {
+      color: $link-color;
+
+      @include hover {
+        color: $link-hover-color;
+      }
+    }
+
+    .dropdown-item {
+      &:active,
+      &.active {
+        background: $color;
+        color: color-yiq($color);
+      }
+    }
+
+    .custom-control-input:checked ~ .custom-control-label {
+      &::before {
+        background: $color;
+        border-color: darken($color, 20%);
+      }
+
+      &::after {
+        $newColor: color-yiq($color);
+        background-image: str-replace($custom-checkbox-indicator-icon-checked, str-replace(#{$custom-control-indicator-checked-color}, '#', '%23'), str-replace(#{$newColor}, '#', '%23'));
+      }
+    }
+
+    .form-control:focus:not(.is-invalid):not(.is-warning):not(.is-valid),
+    .custom-select:focus,
+    .custom-control-input:focus:not(:checked) ~ .custom-control-label::before,
+    .custom-file-input:focus ~ .custom-file-label {
+      border-color: lighten($color, 25%);
+    }
+    
+    .page-item {
+      &.active .page-link {
+        background-color: $pagination-active-bg;
+        border-color: $pagination-active-border-color;
+      }
+
+      &.disabled .page-link {
+        background-color: $pagination-disabled-bg;
+        border-color: $pagination-disabled-border-color;
+      }
+    }
+
+    [class*="sidebar-dark-"] {
+      .sidebar {
+        a:not(.dropdown-item):not(.btn-app):not(.nav-link):not(.brand-link) {
+          color: $sidebar-dark-color;
+      
+          @include hover {
+            color: $sidebar-dark-hover-color;
+          }
+        }
+      }
+    }
+
+    [class*="sidebar-light-"] {
+      .sidebar {
+        a:not(.dropdown-item):not(.btn-app):not(.nav-link):not(.brand-link) {
+          color: $sidebar-light-color;
+
+          @include hover {
+            color: $sidebar-light-hover-color;
+          }
+        }
+      }
+    }
+  }
+}
+

ShopBundle/Resources/public/sass/backend/adminlte/mixins/_backgrounds.scss

@@ -0,0 +1,64 @@
+//
+// Mixins: Backgrounds
+//
+
+// Background Variant
+@mixin background-variant($name, $color) {
+  .bg-#{$name} {
+    background-color: #{$color} !important;
+
+    &,
+    > a {
+      color: color-yiq($color) !important;
+    }
+
+    &.btn {
+      &:hover {
+        border-color: darken($color, 10%);
+        color: darken(color-yiq($color), 7.5%);
+      }
+
+      &:not(:disabled):not(.disabled):active,
+      &:not(:disabled):not(.disabled).active,
+      &:active,
+      &.active {
+        background-color: darken($color, 10%) !important;
+        border-color: darken($color, 12.5%);
+        color: color-yiq(darken($color, 10%));
+      }
+    }
+  }
+}
+
+// Background Gradient Variant
+@mixin background-gradient-variant($name, $color) {
+  .bg-gradient-#{$name} {
+    @include bg-gradient-variant('&', $color);
+    color: color-yiq($color);
+
+    &.btn {
+      &.disabled,
+      &:disabled,
+      &:not(:disabled):not(.disabled):active,
+      &:not(:disabled):not(.disabled).active,
+      .show > &.dropdown-toggle {
+        background-image: none !important;
+      }
+
+      &:hover {
+        @include bg-gradient-variant('&', darken($color, 7.5%));
+        border-color: darken($color, 10%);
+        color: darken(color-yiq($color), 7.5%);
+      }
+
+      &:not(:disabled):not(.disabled):active,
+      &:not(:disabled):not(.disabled).active,
+      &:active,
+      &.active {
+        @include bg-gradient-variant('&', darken($color, 10%));
+        border-color: darken($color, 12.5%);
+        color: color-yiq(darken($color, 10%));
+      }
+    }
+  }
+}

ShopBundle/Resources/public/sass/backend/adminlte/mixins/_cards.scss

@@ -0,0 +1,82 @@
+//
+// Mixins: Cards Variant
+//
+
+@mixin cards-variant($name, $color) {
+  .card-#{$name} {
+    &:not(.card-outline) {
+      > .card-header {
+        background-color: $color;
+
+        &,
+        a {
+          color: color-yiq($color);
+        }
+
+        a.active {
+          color: color-yiq($white);
+        }
+      }
+    }
+
+    &.card-outline {
+      border-top: 3px solid $color;
+    }
+
+    &.card-outline-tabs {
+      > .card-header {
+        a {
+          &:hover {
+            border-top: 3px solid $nav-tabs-border-color;
+          }
+
+          &.active {
+            border-top: 3px solid $color;
+          }
+        }
+      }
+    }
+  }
+
+  .bg-#{$name},
+  .bg-gradient-#{$name},
+  .card-#{$name}:not(.card-outline) {
+    .btn-tool {
+      color: rgba(color-yiq($color), 0.8);
+
+      &:hover {
+        color: color-yiq($color);
+      }
+    }
+  }
+
+  .card.bg-#{$name},
+  .card.bg-gradient-#{$name} {
+    .bootstrap-datetimepicker-widget {
+      .table td,
+      .table th {
+        border: none;
+      }
+
+      table thead tr:first-child th:hover,
+      table td.day:hover,
+      table td.hour:hover,
+      table td.minute:hover,
+      table td.second:hover {
+        background: darken($color, 8%);
+        color: color-yiq($color);
+      }
+
+      table td.today::before {
+        border-bottom-color: color-yiq($color);
+      }
+
+      table td.active,
+      table td.active:hover {
+        background: lighten($color, 10%);
+        color: color-yiq($color);
+      }
+    }
+  }
+}
+

ShopBundle/Resources/public/sass/backend/adminlte/mixins/_custom-forms.scss

@@ -0,0 +1,81 @@
+//
+// Mixins: Custom Forms
+//
+
+// Custom Switch Variant
+@mixin custom-switch-variant($name, $color) {
+  &.custom-switch-off-#{$name} {
+    & .custom-control-input ~ .custom-control-label::before {
+      background: #{$color};
+      border-color: darken($color, 20%);
+    }
+
+    & .custom-control-input:focus ~ .custom-control-label::before {
+      box-shadow: 0 0 0 1px $body-bg, 0 0 0 2px rgba($color, .25);
+    }
+
+    & .custom-control-input ~ .custom-control-label::after {
+      background: darken($color, 25%);
+    }
+  }
+
+  &.custom-switch-on-#{$name} {
+    & .custom-control-input:checked ~ .custom-control-label::before {
+      background: #{$color};
+      border-color: darken($color, 20%);
+    }
+
+    & .custom-control-input:checked:focus ~ .custom-control-label::before {
+      box-shadow: 0 0 0 1px $body-bg, 0 0 0 2px rgba($color, .25);
+    }
+
+    & .custom-control-input:checked ~ .custom-control-label::after {
+      background: lighten($color, 30%);
+    }
+  }
+}
+
+// Custom Range Variant
+@mixin custom-range-variant($name, $color) {
+  &.custom-range-#{$name} {
+    &:focus {
+      outline: none;
+
+      &::-webkit-slider-thumb {
+        box-shadow: 0 0 0 1px $body-bg, 0 0 0 2px rgba($color, .25);
+      }
+
+      &::-moz-range-thumb     {
+        box-shadow: 0 0 0 1px $body-bg, 0 0 0 2px rgba($color, .25);
+      }
+
+      &::-ms-thumb            {
+        box-shadow: 0 0 0 1px $body-bg, 0 0 0 2px rgba($color, .25);
+      }
+    }
+
+    &::-webkit-slider-thumb {
+      background-color: $color;
+
+      &:active {
+        background-color: lighten($color, 35%);
+      }
+    }
+
+    &::-moz-range-thumb {
+      background-color: $color;
+
+      &:active {
+        background-color: lighten($color, 35%);
+      }
+    }
+
+    &::-ms-thumb {
+      background-color: $color;
+
+      &:active {
+        background-color: lighten($color, 35%);
+      }
+    }
+  }
+}

ShopBundle/Resources/public/sass/backend/adminlte/mixins/_direct-chat.scss

@@ -0,0 +1,17 @@
+//
+// Mixins: Direct Chat
+//
+
+// Direct Chat Variant
+@mixin direct-chat-variant($bg-color, $color: #fff) {
+  .right > .direct-chat-text {
+    background: $bg-color;
+    border-color: $bg-color;
+    color: color-yiq($bg-color);
+
+    &::after,
+    &::before {
+      border-left-color: $bg-color;
+    }
+  }
+}

ShopBundle/Resources/public/sass/backend/adminlte/mixins/_miscellaneous.scss

@@ -0,0 +1,35 @@
+//
+// Mixins: Miscellaneous
+//
+
+// ETC
+@mixin translate($x, $y) {
+  transform: translate($x, $y);
+}
+
+// Different radius each side
+@mixin border-radius-sides($top-left, $top-right, $bottom-left, $bottom-right) {
+  border-radius: $top-left $top-right $bottom-left $bottom-right;
+}
+
+@mixin calc($property, $expression) {
+  #{$property}: calc(#{$expression});
+}
+
+@mixin rotate($value) {
+  transform: rotate($value);
+}
+
+@mixin animation($animation) {
+  animation: $animation;
+}
+
+// Gradient background
+@mixin gradient($color: #F5F5F5, $start: #EEE, $stop: #FFF) {
+  background: $color;
+  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, $start), color-stop(1, $stop));
+  background: -ms-linear-gradient(bottom, $start, $stop);
+  background: -moz-linear-gradient(center bottom, $start 0%, $stop 100%);
+  background: -o-linear-gradient($stop, $start);
+}
+

ShopBundle/Resources/public/sass/backend/adminlte/mixins/_navbar.scss

@@ -0,0 +1,34 @@
+//
+// Mixins: Navbar
+//
+
+// Navbar Variant
+@mixin navbar-variant($color, $font-color: rgba(255, 255, 255, 0.8), $hover-color: #f6f6f6, $hover-bg: rgba(0, 0, 0, 0.1)) {
+  background-color: $color;
+
+  .nav > li > a {
+    color: $font-color;
+  }
+
+  .nav > li > a:hover,
+  .nav > li > a:active,
+  .nav > li > a:focus,
+  .nav .open > a,
+  .nav .open > a:hover,
+  .nav .open > a:focus,
+  .nav > .active > a {
+    background: $hover-bg;
+    color: $hover-color;
+  }
+
+  // Add color to the sidebar toggle button
+  .sidebar-toggle {
+    color: $font-color;
+
+    &:hover,
+    &:focus {
+      background: $hover-bg;
+      color: $hover-color;
+    }
+  }
+}

ShopBundle/Resources/public/sass/backend/adminlte/mixins/_sidebar.scss

@@ -0,0 +1,155 @@
+//
+// Mixins: Sidebar
+//
+
+// Sidebar Color
+@mixin sidebar-color($color) {
+  .nav-sidebar > .nav-item {
+    & > .nav-link.active {
+      background-color: $color;
+      color: color-yiq($color);
+    }
+  }
+
+  .nav-sidebar.nav-legacy > .nav-item {
+    & > .nav-link.active {
+      border-color: $color;
+    }
+  }
+}
+
+// Sidebar Mini Breakpoints
+@mixin sidebar-mini-breakpoint() {
+  // A fix for text overflow while transitioning from sidebar mini to full sidebar
+  .nav-sidebar,
+  .nav-sidebar > .nav-header,
+  .nav-sidebar .nav-link {
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  // When the sidebar is collapsed...
+  &.sidebar-collapse {
+    .d-hidden-mini {
+      display: none;
+    }
+
+    // Apply the new margins to the main content and footer
+    .content-wrapper,
+    .main-footer,
+    .main-header {
+      margin-left: $sidebar-mini-width !important;
+    }
+
+    // Make the sidebar headers
+    .nav-sidebar .nav-header {
+      display: none;
+    }
+
+    .nav-sidebar .nav-link p {
+      width: 0;
+    }
+
+    .sidebar .user-panel > .info,
+    .nav-sidebar .nav-link p,
+    .brand-text {
+      margin-left: -10px;
+      opacity: 0;
+      visibility: hidden;
+    }
+
+    .logo-xl {
+      opacity: 0;
+      visibility: hidden;
+    }
+
+    .logo-xs {
+      display: inline-block;
+      opacity: 1;
+      visibility: visible;
+    }
+
+    // Modify the sidebar to shrink instead of disappearing
+    .main-sidebar {
+      overflow-x: hidden;
+
+      &,
+      &::before {
+        // Don't go away! Just shrink
+        margin-left: 0;
+        width: $sidebar-mini-width;
+      }
+
+      .user-panel {
+        .image {
+          float: none;
+        }
+      }
+
+      &:hover,
+      &.sidebar-focused {
+        width: $sidebar-width;
+
+        .brand-link {
+          width: $sidebar-width;
+        }
+
+        .user-panel {
+          text-align: left;
+
+          .image {
+            float: left;
+          }
+        }
+
+        .user-panel > .info,
+        .nav-sidebar .nav-link p,
+        .brand-text,
+        .logo-xl {
+          display: inline-block;
+          margin-left: 0;
+          opacity: 1;
+          visibility: visible;
+        }
+
+        .logo-xs {
+          opacity: 0;
+          visibility: hidden;
+        }
+
+        .brand-image {
+          margin-right: .5rem;
+        }
+
+        // Make the sidebar links, menus, labels, badges
+        // and angle icons disappear
+        .sidebar-form,
+        .user-panel > .info {
+          display: block !important;
+          -webkit-transform: translateZ(0);
+        }
+
+        .nav-sidebar > .nav-item > .nav-link > span {
+          display: inline-block !important;
+        }
+      }
+    }
+
+    // Make an element visible only when sidebar mini is active
+    .visible-sidebar-mini {
+      display: block !important;
+    }
+
+    &.layout-fixed {
+      .main-sidebar:hover {
+        .brand-link {
+          width: $sidebar-width;
+        }
+      }
+
+      .brand-link {
+        width: $sidebar-mini-width;
+      }
+    }
+  }
+}

ShopBundle/Resources/public/sass/backend/adminlte/mixins/_toasts.scss

@@ -0,0 +1,23 @@
+//
+// Mixins: Toasts
+//
+
+// Toast Variant
+@mixin toast-variant($name, $color) {
+  &.bg-#{$name} {
+    background: rgba($color, .9) !important;
+    @if (color-yiq($color) == $yiq-text-light) {
+
+      .close {
+        color: color-yiq($color);
+        text-shadow: 0 1px 0 #000;
+      }
+    }
+
+    .toast-header {
+      background: rgba($color, .85);
+      color: color-yiq($color);
+    }
+  }
+}
+

ShopBundle/Resources/public/sass/backend/adminlte/pages/_404_500_errors.scss

@@ -0,0 +1,43 @@
+//
+// Pages: 400 and 500 error pages
+//
+ 
+.error-page {
+  margin: 20px auto 0;
+  width: 600px;
+
+  @include media-breakpoint-down(sm) {
+    width: 100%;
+  }
+
+  //For the error number e.g: 404
+  > .headline {
+    float: left;
+    font-size: 100px;
+    font-weight: 300;
+
+    @include media-breakpoint-down(sm) {
+      float: none;
+      text-align: center;
+    }
+  }
+
+  //For the message
+  > .error-content {
+    display: block;
+    margin-left: 190px;
+
+    @include media-breakpoint-down(sm) {
+      margin-left: 0;
+    }
+
+    > h3 {
+      font-size: 25px;
+      font-weight: 300;
+
+      @include media-breakpoint-down(sm) {
+        text-align: center;
+      }
+    }
+  }
+}

ShopBundle/Resources/public/sass/backend/adminlte/pages/_e-commerce.scss

@@ -0,0 +1,45 @@
+//
+// Pages: E-commerce
+//
+
+// product image
+.product-image {
+  @include img-fluid;
+  width: 100%;
+}
+
+// product image thumbnails list
+.product-image-thumbs {
+  align-items: stretch;
+  display: flex;
+  margin-top: 2rem;
+}
+
+// product image thumbnail
+.product-image-thumb {
+  @include box-shadow($thumbnail-box-shadow);
+  @include border-radius($thumbnail-border-radius);
+
+  background-color: $thumbnail-bg;
+  border: $thumbnail-border-width solid $thumbnail-border-color;
+  display: flex;
+  margin-right: 1rem;
+  max-width: 6.5rem + ($thumbnail-padding * 2);
+  padding: $thumbnail-padding * 2;
+
+  img {
+    @include img-fluid;
+    align-self: center;
+  }
+
+  &:hover {
+    opacity: 0.5;
+  }
+}
+
+// product share
+.product-share {
+  a {
+    margin-right: .5rem;
+  }
+}

ShopBundle/Resources/public/sass/backend/adminlte/pages/_invoice.scss

@@ -0,0 +1,13 @@
+//
+// Pages: Invoice
+//
+
+.invoice {
+  background: $white;
+  border: 1px solid $card-border-color;
+  position: relative;
+}
+
+.invoice-title {
+  margin-top: 0;
+}

ShopBundle/Resources/public/sass/backend/adminlte/pages/_lockscreen.scss

@@ -0,0 +1,78 @@
+//
+// Pages: Lock Screen
+//
+
+// ADD THIS CLASS TO THE <BODY> TAG
+.lockscreen {
+  background: $gray-200;
+
+  // User name [optional]
+  .lockscreen-name {
+    font-weight: 600;
+    text-align: center;
+  }
+}
+
+.lockscreen-logo {
+  font-size: 35px;
+  font-weight: 300;
+  margin-bottom: 25px;
+  text-align: center;
+
+  a {
+    color: $gray-700;
+  }
+}
+
+.lockscreen-wrapper {
+  margin: 0 auto;
+  margin-top: 10%;
+  max-width: 400px;
+}
+
+
+// Will contain the image and the sign in form
+.lockscreen-item {
+  @include border-radius(4px);
+  background: $white;
+  margin: 10px auto 30px;
+  padding: 0;
+  position: relative;
+  width: 290px;
+}
+
+// User image
+.lockscreen-image {
+  @include border-radius(50%);
+  background: $white;
+  left: -10px;
+  padding: 5px;
+  position: absolute;
+  top: -25px;
+  z-index: 10;
+
+  > img {
+    @include border-radius(50%);
+    height: 70px;
+    width: 70px;
+  }
+}
+
+// Contains the password input and the login button
+.lockscreen-credentials {
+  margin-left: 70px;
+
+  .form-control {
+    border: 0;
+  }
+
+  .btn {
+    background-color: $white;
+    border: 0;
+    padding: 0 10px;
+  }
+}
+
+.lockscreen-footer {
+  margin-top: 10px;
+}

ShopBundle/Resources/public/sass/backend/adminlte/pages/_login_and_register.scss

@@ -0,0 +1,97 @@
+//
+// Pages: Login & Register
+//
+
+.login-logo,
+.register-logo {
+  font-size: 2.1rem;
+  font-weight: 300;
+  margin-bottom: .9rem;
+  text-align: center;
+
+  a {
+    color: $gray-700;
+  }
+}
+
+.login-page,
+.register-page {
+  align-items: center;
+  background: $gray-200;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  justify-content: center;
+}
+
+.login-box,
+.register-box {
+  width: 360px;
+
+  @media (max-width: map-get($grid-breakpoints, sm)) {
+    margin-top: .5rem;
+    width: 90%;
+  }
+}
+
+.login-card-body,
+.register-card-body {
+  background: $white;
+  border-top: 0;
+  color: #666;
+  padding: 20px;
+
+  .input-group {
+    .form-control {
+      border-right: 0;
+
+      &:focus {
+        box-shadow: none;
+
+        & ~ .input-group-append .input-group-text {
+          border-color: $input-focus-border-color;
+        }
+      }
+
+      &.is-valid {
+        &:focus {
+          box-shadow: none;
+        }
+
+        & ~ .input-group-append .input-group-text {
+          border-color: $success;
+        }
+      }
+
+      &.is-invalid {
+        &:focus {
+          box-shadow: none;
+        }
+
+        & ~ .input-group-append .input-group-text {
+          border-color: $danger;
+        }
+      }
+    }
+
+    .input-group-text {
+      background-color: transparent;
+      border-bottom-right-radius: $border-radius;
+      border-left: 0;
+      border-top-right-radius: $border-radius;
+      color: #777;
+      transition: $input-transition;
+    }
+  }
+}
+
+.login-box-msg,
+.register-box-msg {
+  margin: 0;
+  padding: 0 20px 20px;
+  text-align: center;
+}
+
+.social-auth-links {
+  margin: 10px 0;
+}

ShopBundle/Resources/public/sass/backend/adminlte/pages/_mailbox.scss

@@ -0,0 +1,99 @@
+//
+// Pages: Mailbox
+//
+
+.mailbox-messages {
+  > .table {
+    margin: 0;
+  }
+}
+
+.mailbox-controls {
+  padding: 5px;
+
+  &.with-border {
+    border-bottom: 1px solid $card-border-color;
+  }
+}
+
+.mailbox-read-info {
+  border-bottom: 1px solid $card-border-color;
+  padding: 10px;
+
+  h3 {
+    font-size: 20px;
+    margin: 0;
+  }
+
+  h5 {
+    margin: 0;
+    padding: 5px 0 0;
+  }
+}
+
+.mailbox-read-time {
+  color: #999;
+  font-size: 13px;
+}
+
+.mailbox-read-message {
+  padding: 10px;
+}
+
+.mailbox-attachments {
+  @include list-unstyled;
+  li {
+    border: 1px solid #eee;
+    float: left;
+    margin-bottom: 10px;
+    margin-right: 10px;
+    width: 200px;
+  }
+}
+
+.mailbox-attachment-name {
+  color: #666;
+  font-weight: bold;
+}
+
+.mailbox-attachment-icon,
+.mailbox-attachment-info,
+.mailbox-attachment-size {
+  display: block;
+}
+
+.mailbox-attachment-info {
+  background: $gray-100;
+  padding: 10px;
+}
+
+.mailbox-attachment-size {
+  color: #999;
+  font-size: 12px;
+
+  > span {
+    display: inline-block;
+    padding-top: 0.75rem;
+  }
+}
+
+.mailbox-attachment-icon {
+  color: #666;
+  font-size: 65px;
+  max-height: 132.5px;
+  padding: 20px 10px;
+  text-align: center;
+
+  &.has-img {
+    padding: 0;
+
+    > img {
+      height: auto;
+      max-width: 100%;
+    }
+  }
+}
+
+.mailbox-attachment-close {
+  @extend .close;
+}

ShopBundle/Resources/public/sass/backend/adminlte/pages/_profile.scss

@@ -0,0 +1,37 @@
+//
+// Pages: Profile
+//
+
+.profile-user-img {
+  border: 3px solid $gray-500;
+  margin: 0 auto;
+  padding: 3px;
+  width: 100px;
+}
+
+.profile-username {
+  font-size: 21px;
+  margin-top: 5px;
+}
+
+.post {
+  border-bottom: 1px solid $gray-500;
+  color: #666;
+  margin-bottom: 15px;
+  padding-bottom: 15px;
+
+  &:last-of-type {
+    border-bottom: 0;
+    margin-bottom: 0;
+    padding-bottom: 0;
+  }
+
+  .user-block {
+    margin-bottom: 15px;
+    width: 100%;
+  }
+
+  .row {
+    width: 100%;
+  }
+}

ShopBundle/Resources/public/sass/backend/adminlte/pages/_projects.scss

@@ -0,0 +1,26 @@
+//
+// Pages: Projects
+//
+
+.projects {
+  td {
+    vertical-align: middle;
+  }
+
+  .list-inline {
+    margin-bottom: 0;
+  }
+
+  // table avatar
+  img.table-avatar,
+  .table-avatar img {
+    border-radius: 50%;
+    display: inline;
+    width: 2.5rem;
+  }
+
+  // project state
+  .project-state {
+    text-align: center;
+  }
+}

ShopBundle/Resources/public/sass/backend/adminlte/parts/_components.scss

@@ -0,0 +1,14 @@
+//
+// Part: Components
+//
+
+@import '../forms';
+@import '../progress-bars';
+@import '../cards';
+@import '../modals';
+@import '../toasts';
+@import '../buttons';
+@import '../callout';
+@import '../alerts';
+@import '../table';
+@import '../carousel';

ShopBundle/Resources/public/sass/backend/adminlte/parts/_core.scss

@@ -0,0 +1,12 @@
+//
+// Part: Core
+//
+
+@import '../layout';
+@import '../main-header';
+@import '../brand';
+@import '../main-sidebar';
+@import '../sidebar-mini';
+@import '../control-sidebar';
+@import '../dropdown';
+@import '../navs';

ShopBundle/Resources/public/sass/backend/adminlte/parts/_extra-components.scss

@@ -0,0 +1,11 @@
+//
+// Part: Extra Components
+//
+
+@import '../small-box';
+@import '../info-box';
+@import '../timeline';
+@import '../products';
+@import '../direct-chat';
+@import '../users-list';
+@import '../social-widgets';

ShopBundle/Resources/public/sass/backend/adminlte/parts/_miscellaneous.scss

@@ -0,0 +1,9 @@
+//
+// Part: Miscellaneous
+//
+
+@import '../miscellaneous';
+@import '../print';
+@import '../text';
+@import '../elevation';
+@import '../colors';

ShopBundle/Resources/public/sass/backend/adminlte/parts/_pages.scss

@@ -0,0 +1,12 @@
+//
+// Part: Pages
+//
+
+@import '../pages/mailbox';
+@import '../pages/lockscreen';
+@import '../pages/login_and_register';
+@import '../pages/404_500_errors';
+@import '../pages/invoice';
+@import '../pages/profile';
+@import '../pages/e-commerce';
+@import '../pages/projects';

ShopBundle/Resources/public/sass/backend/adminlte/parts/_plugins.scss

@@ -0,0 +1,16 @@
+//
+// Part: Plugins
+//
+
+@import '../plugins/mixins';
+@import '../plugins/fullcalendar';
+@import '../plugins/select2';
+@import '../plugins/bootstrap-slider';
+@import '../plugins/icheck-bootstrap';
+@import '../plugins/mapael';
+@import '../plugins/jqvmap';
+@import '../plugins/sweetalert2';
+@import '../plugins/toastr';
+@import '../plugins/pace';
+@import '../plugins/bootstrap-switch';
+@import '../plugins/miscellaneous';

ShopBundle/Resources/public/sass/backend/adminlte/plugins/_bootstrap-slider.scss

@@ -0,0 +1,35 @@
+//
+// Plugin: Bootstrap Slider
+//
+
+// Tooltip fix
+.slider .tooltip.in {
+  opacity: $tooltip-opacity;
+}
+
+// Style override
+.slider {
+  &.slider-vertical {
+    height: 100%;
+  }
+  &.slider-horizontal {
+    width: 100%;
+  }
+}
+
+// Colors
+@each $name, $color in $theme-colors {
+  .slider-#{$name} .slider {
+    .slider-selection {
+      background: $color;
+    }
+  }
+}
+
+@each $name, $color in $colors {
+  .slider-#{$name} .slider {
+    .slider-selection {
+      background: $color;
+    }
+  }
+}

ShopBundle/Resources/public/sass/backend/adminlte/plugins/_bootstrap-switch.scss

@@ -0,0 +1,175 @@
+/**
+  * bootstrap-switch - Turn checkboxes and radio buttons into toggle switches.
+  *
+  * @version v3.4 (MODDED)
+  * @homepage https://bttstrp.github.io/bootstrap-switch
+  * @author Mattia Larentis <mattia@larentis.eu> (http://larentis.eu)
+  * @license MIT
+  */
+
+$bootstrap-switch-border-radius: $btn-border-radius;
+$bootstrap-switch-handle-border-radius: .1rem;
+
+.bootstrap-switch {
+  border: $input-border-width solid $input-border-color;
+  border-radius: $bootstrap-switch-border-radius;
+  cursor: pointer;
+  direction: ltr;
+  display: inline-block;
+  line-height: .5rem;
+  overflow: hidden;
+  position: relative;
+  text-align: left;
+  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+  user-select: none;
+  vertical-align: middle;
+  z-index: 0;
+
+  .bootstrap-switch-container {
+    border-radius: $bootstrap-switch-border-radius;
+    display: inline-block;
+    top: 0;
+    transform: translate3d(0, 0, 0);
+
+  }
+
+  &:focus-within {
+    box-shadow: $input-btn-focus-box-shadow;
+  }
+
+  .bootstrap-switch-handle-on,
+  .bootstrap-switch-handle-off,
+  .bootstrap-switch-label {
+    box-sizing: border-box;
+    cursor: pointer;
+    display: table-cell;
+    font-size: 1rem;
+    font-weight: 500;
+    line-height: 1.2rem;
+    padding: .25rem .5rem;
+    vertical-align: middle;
+  }
+
+  .bootstrap-switch-handle-on,
+  .bootstrap-switch-handle-off {
+    text-align: center;
+    z-index: 1;
+
+    &.bootstrap-switch-default {
+      background: $gray-200;
+      color: color-yiq($gray-200);
+    }
+
+    @each $name, $color in $theme-colors {
+      &.bootstrap-switch-#{$name} {
+        background: $color;
+        color: color-yiq($color);
+      }
+    }
+
+    @each $name, $color in $colors {
+      &.bootstrap-switch-#{$name} {
+        background: $color;
+        color: color-yiq($color);
+      }
+    }
+  }
+
+  .bootstrap-switch-handle-on {
+    border-bottom-left-radius: $bootstrap-switch-handle-border-radius;
+    border-top-left-radius: $bootstrap-switch-handle-border-radius;
+  }
+
+  .bootstrap-switch-handle-off {
+    border-bottom-right-radius: $bootstrap-switch-handle-border-radius;
+    border-top-right-radius: $bootstrap-switch-handle-border-radius;
+  }
+
+  input[type='radio'],
+  input[type='checkbox'] {
+    filter: alpha(opacity=0);
+    left: 0;
+    margin: 0;
+    opacity: 0;
+    position: absolute;
+    top: 0;
+    visibility: hidden;
+    z-index: -1;
+  }
+
+  &.bootstrap-switch-mini {
+    .bootstrap-switch-handle-on,
+    .bootstrap-switch-handle-off,
+    .bootstrap-switch-label {
+      font-size: .875rem;
+      line-height: 1.5;
+      padding: .1rem .3rem;
+    }
+  }
+
+  &.bootstrap-switch-small {
+    .bootstrap-switch-handle-on,
+    .bootstrap-switch-handle-off,
+    .bootstrap-switch-label {
+      font-size: .875rem;
+      line-height: 1.5;
+      padding: .2rem .4rem;
+    }
+  }
+
+  &.bootstrap-switch-large {
+    .bootstrap-switch-handle-on,
+    .bootstrap-switch-handle-off,
+    .bootstrap-switch-label {
+      font-size: 1.25rem;
+      line-height: 1.3333333rem;
+      padding: .3rem .5rem;
+    }
+  }
+
+  &.bootstrap-switch-disabled,
+  &.bootstrap-switch-readonly,
+  &.bootstrap-switch-indeterminate {
+    cursor: default;
+
+    .bootstrap-switch-handle-on,
+    .bootstrap-switch-handle-off,
+    .bootstrap-switch-label {
+      cursor: default;
+      filter: alpha(opacity=50);
+      opacity: .5;
+    }
+  }
+
+  &.bootstrap-switch-animate .bootstrap-switch-container {
+    transition: margin-left .5s;
+  }
+
+  &.bootstrap-switch-inverse {
+    .bootstrap-switch-handle-on {
+      border-radius: 0 $bootstrap-switch-handle-border-radius $bootstrap-switch-handle-border-radius 0;
+    }
+
+    .bootstrap-switch-handle-off {
+      border-radius: $bootstrap-switch-handle-border-radius 0 0 $bootstrap-switch-handle-border-radius;
+    }
+  }
+
+  // &.bootstrap-switch-focused {
+  //   border-color: $input-btn-focus-color;
+  //   box-shadow: $input-btn-focus-box-shadow;
+  //   outline: 0;
+  // }
+
+  &.bootstrap-switch-on .bootstrap-switch-label,
+  &.bootstrap-switch-inverse.bootstrap-switch-off .bootstrap-switch-label {
+    border-bottom-right-radius: $bootstrap-switch-handle-border-radius;
+    border-top-right-radius: $bootstrap-switch-handle-border-radius;
+  }
+
+  &.bootstrap-switch-off .bootstrap-switch-label,
+  &.bootstrap-switch-inverse.bootstrap-switch-on .bootstrap-switch-label {
+    border-bottom-left-radius: $bootstrap-switch-handle-border-radius;
+    border-top-left-radius: $bootstrap-switch-handle-border-radius;
+  }
+}

ShopBundle/Resources/public/sass/backend/adminlte/plugins/_fullcalendar.scss

@@ -0,0 +1,131 @@
+//
+// Plugin: Full Calendar
+//
+
+// Buttons
+.fc-button {
+  background: $gray-100;
+  background-image: none;
+  border-bottom-color: #ddd;
+  border-color: #ddd;
+  color: $gray-700;
+
+  &:hover,
+  &:active,
+  &.hover {
+    background-color: #e9e9e9;
+  }
+}
+
+// Calendar title
+.fc-header-title h2 {
+  color: #666;
+  font-size: 15px;
+  line-height: 1.6em;
+  margin-left: 10px;
+}
+
+.fc-header-right {
+  padding-right: 10px;
+}
+
+.fc-header-left {
+  padding-left: 10px;
+}
+
+// Calendar table header cells
+.fc-widget-header {
+  background: #fafafa;
+}
+
+.fc-grid {
+  border: 0;
+  width: 100%;
+}
+
+.fc-widget-header:first-of-type,
+.fc-widget-content:first-of-type {
+  border-left: 0;
+  border-right: 0;
+}
+
+.fc-widget-header:last-of-type,
+.fc-widget-content:last-of-type {
+  border-right: 0;
+}
+
+.fc-toolbar,
+.fc-toolbar.fc-header-toolbar {
+  margin: 0;
+  padding: 1rem;
+}
+
+@include media-breakpoint-down(xs) {
+  .fc-toolbar {
+    flex-direction: column;
+
+    .fc-left {
+      order: 1;
+      margin-bottom: .5rem;
+    }
+
+    .fc-center {
+      order: 0;
+      margin-bottom: .375rem;
+    }
+
+    .fc-right {
+      order: 2;
+    }
+  }
+}
+
+.fc-day-number {
+  font-size: 20px;
+  font-weight: 300;
+  padding-right: 10px;
+}
+
+.fc-color-picker {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  > li {
+    float: left;
+    font-size: 30px;
+    line-height: 30px;
+    margin-right: 5px;
+
+    .fa,
+    .fas,
+    .far,
+    .fab,
+    .glyphicon,
+    .ion {
+      transition: transform linear .3s;
+
+      &:hover {
+        @include rotate(30deg);
+      }
+    }
+  }
+}
+
+#add-new-event {
+  transition: all linear .3s;
+}
+
+.external-event {
+  @include box-shadow($card-shadow);
+
+  border-radius: $border-radius;
+  cursor: move;
+  font-weight: bold;
+  margin-bottom: 4px;
+  padding: 5px 10px;
+
+  &:hover {
+    @include box-shadow(inset 0 0 90px rgba(0, 0, 0, 0.2));
+  }
+}

ShopBundle/Resources/public/sass/backend/adminlte/plugins/_icheck-bootstrap.scss

@@ -0,0 +1,41 @@
+//
+// Plugin: iCheck Bootstrap
+//
+
+// iCheck colors (theme colors)
+@each $name, $color in $theme-colors {
+  .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):hover + label::before,
+  .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
+    border-color: #{$color};
+  }
+
+  .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):focus + label::before,
+  .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):focus + input[type="hidden"] + label::before {
+    border-color: #{$color};
+  }
+
+  .icheck-#{$name} > input:first-child:checked + label::before,
+  .icheck-#{$name} > input:first-child:checked + input[type="hidden"] + label::before {
+    background-color: #{$color};
+    border-color: #{$color};
+  }
+}
+
+// iCheck colors (colors)
+@each $name, $color in $colors {
+  .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):hover + label::before,
+  .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
+    border-color: #{$color};
+  }
+
+  .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):focus + label::before,
+  .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):focus + input[type="hidden"] + label::before {
+    border-color: #{$color};
+  }
+
+  .icheck-#{$name} > input:first-child:checked + label::before,
+  .icheck-#{$name} > input:first-child:checked + input[type="hidden"] + label::before {
+    background-color: #{$color};
+    border-color: #{$color};
+  }
+}

ShopBundle/Resources/public/sass/backend/adminlte/plugins/_jqvmap.scss

@@ -0,0 +1,21 @@
+//
+// Plugins: JQVMap
+//
+
+// Zoom Button size fixes
+.jqvmap-zoomin,
+.jqvmap-zoomout {
+  background-color: $button-default-background-color;
+  border: 1px solid $button-default-border-color;
+  border-radius: $btn-border-radius;
+  color: $button-default-color;
+  height: 15px;
+  width: 15px;
+
+  &:hover,
+  &:active,
+  &.hover {
+    background-color: darken($button-default-background-color, 5%);
+    color: darken($button-default-color, 10%);
+  }
+}

ShopBundle/Resources/public/sass/backend/adminlte/plugins/_mapael.scss

@@ -0,0 +1,70 @@
+//
+// Plugins: jQuery Mapael
+//
+
+.mapael {
+  .map {
+    position: relative;
+  }
+
+  .mapTooltip {
+    @include reset-text();
+    @include border-radius($tooltip-border-radius);
+    @include font-size($tooltip-font-size);
+    background-color: $tooltip-bg;
+    color: $tooltip-color;
+    display: block;
+    max-width: $tooltip-max-width;
+    padding: $tooltip-padding-y $tooltip-padding-x;
+    position: absolute;
+    text-align: center;
+    word-wrap: break-word;
+    z-index: $zindex-tooltip;
+  }
+
+  .myLegend {
+    background-color: $gray-100;
+    border: 1px solid $gray-500;
+    padding: 10px;
+    width: 600px;
+  }
+
+  .zoomButton {
+    background-color: $button-default-background-color;
+    border: 1px solid $button-default-border-color;
+    border-radius: $btn-border-radius;
+    color: $button-default-color;
+    cursor: pointer;
+    font-weight: bold;
+    height: 16px;
+    left: 10px;
+    line-height: 14px;
+    padding-left: 1px;
+    position: absolute;
+    text-align: center;
+    top: 0;
+
+    user-select: none;
+    width: 16px;
+
+    &:hover,
+    &:active,
+    &.hover {
+      background-color: darken($button-default-background-color, 5%);
+      color: darken($button-default-color, 10%);
+    }
+  }
+
+  .zoomReset {
+    line-height: 12px;
+    top: 10px;
+  }
+
+  .zoomIn {
+    top: 30px;
+  }
+
+  .zoomOut {
+    top: 50px;
+  }
+}

ShopBundle/Resources/public/sass/backend/adminlte/plugins/_miscellaneous.scss

@@ -0,0 +1,39 @@
+//
+// Plugins: Miscellaneous
+// Old plugin codes
+//
+
+// _fix for sparkline tooltip
+.jqstooltip {
+  height: auto !important;
+  padding: 5px !important;
+  width: auto !important;
+}
+
+// jQueryUI
+.connectedSortable {
+  min-height: 100px;
+}
+
+.ui-helper-hidden-accessible {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.sort-highlight {
+  background: $gray-100;
+  border: 1px dashed $gray-300;
+  margin-bottom: 10px;
+}
+
+// Charts
+.chart {
+  overflow: hidden;
+  position: relative;
+}

ShopBundle/Resources/public/sass/backend/adminlte/plugins/_mixins.scss

@@ -0,0 +1,74 @@
+//
+// General: Mixins
+//
+
+// Select2 Variant
+@mixin select2-variant($name, $color) {
+  .select2-#{$name} {
+
+    + .select2-container--default {
+      &.select2-container--open {
+        .select2-selection--single {
+          border-color: lighten($color, 25%);
+        }
+      }
+
+      &.select2-container--focus .select2-selection--single {
+        border-color: lighten($color, 25%);
+      }
+    }
+
+    .select2-container--default &,
+    .select2-container--default {
+      &.select2-dropdown,
+      .select2-dropdown,
+      .select2-search--inline {
+        .select2-search__field {
+          &:focus {
+            border: $input-border-width solid lighten($color, 25%);
+          }
+        }
+      }
+
+      .select2-results__option--highlighted {
+        background-color: $color;
+        color: color-yiq($color);
+
+        &[aria-selected] {
+          &,
+          &:hover {
+            background-color: darken($color, 3%);
+            color: color-yiq(darken($color, 3%));
+          }
+        }
+      }
+
+      //Multiple select
+      & {
+        .select2-selection--multiple {
+          &:focus {
+            border-color: lighten($color, 25%);
+          }
+
+          .select2-selection__choice {
+            background-color: $color;
+            border-color: darken($color, 5%);
+            color: color-yiq($color);
+          }
+
+          .select2-selection__choice__remove {
+            color: rgba(color-yiq($color), 0.7);
+
+            &:hover {
+              color: color-yiq($color);
+            }
+          }
+        }
+  
+        &.select2-container--focus .select2-selection--multiple {
+          border-color: lighten($color, 25%);
+        }
+      }
+    }
+  }
+}

ShopBundle/Resources/public/sass/backend/adminlte/plugins/_pace.scss

@@ -0,0 +1,211 @@
+//
+// Plugin: Pace
+//
+
+.pace {
+  z-index: $zindex-main-sidebar + 10;
+
+  .pace-progress {
+    z-index: $zindex-main-sidebar + 11;
+  }
+
+  .pace-activity {
+    z-index: $zindex-main-sidebar + 12;
+  }
+}
+
+// Mixin 
+@mixin pace-variant($name, $color) {
+  .pace-#{$name} {
+    .pace {
+      .pace-progress {
+        background: $color;
+      }
+    }
+  }
+
+  .pace-barber-shop-#{$name} {
+    .pace {
+      background: color-yiq($color);
+
+      .pace-progress {
+        background: $color;
+      }
+
+      .pace-activity {
+        background-image: linear-gradient(45deg, rgba(color-yiq($color), 0.2) 25%, transparent 25%, transparent 50%, rgba(color-yiq($color), 0.2) 50%, rgba(color-yiq($color), 0.2) 75%, transparent 75%, transparent);
+      }
+    }
+  }
+
+  .pace-big-counter-#{$name} {
+    .pace {
+      .pace-progress::after {
+        color: rgba($color, .19999999999999996);
+      }
+    }
+  }
+
+  .pace-bounce-#{$name} {
+    .pace {
+      .pace-activity {
+        background: $color;
+      }
+    }
+  }
+
+  .pace-center-atom-#{$name} {
+    .pace-progress {
+      height: 100px;
+      width: 80px;
+
+      &::before {
+        background: $color;
+        color: color-yiq($color);
+        font-size: .8rem;
+        line-height: .7rem;
+        padding-top: 17%;
+      }
+    }
+
+    .pace-activity {
+      border-color: $color;
+
+      &::after,
+      &::before {
+        border-color: $color;
+      }
+    }
+  }
+
+  .pace-center-circle-#{$name} {
+    .pace {
+      .pace-progress {
+        background: rgba($color, .8);
+        color: color-yiq($color);
+      }
+    }
+  }
+
+  .pace-center-radar-#{$name} {
+    .pace {
+      .pace-activity {
+        border-color: $color transparent transparent;
+      }
+
+      .pace-activity::before {
+        border-color: $color transparent transparent;
+      }
+    }
+  }
+
+  .pace-center-simple-#{$name} {
+    .pace {
+      background: color-yiq($color);
+      border-color: $color;
+
+      .pace-progress {
+        background: $color;
+      }
+    }
+  }
+
+  .pace-material-#{$name} {
+    .pace {
+      color: $color;
+    }
+  }
+
+  .pace-corner-indicator-#{$name} {
+    .pace {
+      .pace-activity {
+        background: $color;
+      }
+
+      .pace-activity::after,
+      .pace-activity::before {
+        border: 5px solid color-yiq($color);
+      }
+
+
+      .pace-activity::before {
+          border-right-color: rgba($color, .2);
+          border-left-color: rgba($color, .2);
+      }
+
+      .pace-activity::after {
+          border-top-color: rgba($color, .2);
+          border-bottom-color: rgba($color, .2);
+      }
+    }
+  }
+
+  .pace-fill-left-#{$name} {
+    .pace {
+      .pace-progress {
+        background-color: rgba($color, 0.19999999999999996);
+      }
+    }
+  }
+
+  .pace-flash-#{$name} {
+    .pace {
+      .pace-progress {
+        background: $color;
+      }
+
+      .pace-progress-inner {
+        box-shadow: 0 0 10px $color, 0 0 5px $color;
+      }
+
+      .pace-activity {
+        border-top-color: $color;
+        border-left-color: $color;
+      }
+    }
+  }
+
+  .pace-loading-bar-#{$name} {
+    .pace {
+      .pace-progress {
+        background: $color;
+        color: $color;
+        box-shadow: 120px 0 color-yiq($color), 240px 0 color-yiq($color);
+      }
+
+      .pace-activity {
+        box-shadow: inset 0 0 0 2px $color, inset 0 0 0 7px color-yiq($color);
+      }
+    }
+  }
+
+  .pace-mac-osx-#{$name} {
+    .pace {
+      .pace-progress {
+        background-color: $color;
+        box-shadow: inset -1px 0 $color, inset 0 -1px $color, inset 0 2px rgba(color-yiq($color), 0.5), inset 0 6px rgba(color-yiq($color), .3);
+      }
+
+      .pace-activity {
+        background-image: radial-gradient(rgba(color-yiq($color), .65) 0%, rgba(color-yiq($color), .15) 100%);
+        height: 12px;
+      }
+    }
+  }
+
+  .pace-progress-color-#{$name} {
+    .pace-progress {
+      color: $color;
+    }
+  }
+}
+
+
+@each $name, $color in $theme-colors {
+  @include pace-variant($name, $color);
+}
+
+@each $name, $color in $colors {
+  @include pace-variant($name, $color);
+}
+

ShopBundle/Resources/public/sass/backend/adminlte/plugins/_select2.scss

@@ -0,0 +1,270 @@
+//
+// Plugin: Select2
+//
+
+//Signle select
+// .select2-container--default,
+// .select2-selection {
+//   &.select2-container--focus,
+//   &:focus,
+//   &:active {
+//     outline: none;
+//   }
+// }
+
+.select2-container--default {
+  .select2-selection--single {
+    border: $input-border-width solid $input-border-color;
+    //border-radius: $input-radius;
+    padding: ($input-padding-y * 1.25) $input-padding-x;
+    height: $input-height;
+  }
+
+  &.select2-container--open {
+    .select2-selection--single {
+      border-color: lighten($primary, 25%);
+    }
+  }
+
+  & .select2-dropdown {
+    border: $input-border-width solid $input-border-color;
+    //border-radius: $input-radius;
+  }
+
+  & .select2-results__option {
+    padding: 6px 12px;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  & .select2-selection--single .select2-selection__rendered {
+    padding-left: 0;
+    //padding-right: 0;
+    height: auto;
+    margin-top: -3px;
+  }
+
+  &[dir="rtl"] .select2-selection--single .select2-selection__rendered {
+    padding-right: 6px;
+    padding-left: 20px;
+  }
+
+  & .select2-selection--single .select2-selection__arrow {
+    height: 31px;
+    right: 6px;
+  }
+
+  & .select2-selection--single .select2-selection__arrow b {
+    margin-top: 0;
+  }
+
+  .select2-dropdown,
+  .select2-search--inline {
+    .select2-search__field {
+      border: $input-border-width solid $input-border-color;
+
+      &:focus {
+        outline: none;
+        border: $input-border-width solid $input-focus-border-color;
+      }
+    }
+  }
+
+  .select2-dropdown {
+    &.select2-dropdown--below {
+      border-top: 0;
+    }
+
+    &.select2-dropdown--above {
+      border-bottom: 0;
+    }
+  }
+
+  .select2-results__option {
+    &[aria-disabled='true'] {
+      color: $gray-600;
+    }
+
+    &[aria-selected='true'] {
+      $color: $gray-300;
+
+      background-color: $color;
+
+      &,
+      &:hover {
+        color: color-yiq($color);
+      }
+    }
+  }
+
+  .select2-results__option--highlighted {
+    $color: $primary;
+    background-color: $color;
+    color: color-yiq($color);
+
+    &[aria-selected] {
+      $color: darken($color, 3%);
+
+      &,
+      &:hover {
+        background-color: $color;
+        color: color-yiq($color);
+      }
+    }
+  }
+
+  //Multiple select
+  & {
+    .select2-selection--multiple {
+      border: $input-border-width solid $input-border-color;
+      min-height: $input-height;
+
+      &:focus {
+        border-color: $input-focus-border-color;
+      }
+
+      .select2-selection__rendered {
+        padding: 0 $input-padding-x / 2 $input-padding-y;
+        margin-bottom: -$input-padding-x / 2;
+
+        li:first-child.select2-search.select2-search--inline {
+          width: 100%;
+          margin-left: $input-padding-x / 2;
+
+          .select2-search__field {
+            width: 100% !important;
+          }
+        }
+
+
+        .select2-search.select2-search--inline {
+          .select2-search__field {
+            border: 0;
+            margin-top: 6px;
+          }
+        }
+      }
+
+      .select2-selection__choice {
+        background-color: $primary;
+        border-color: darken($primary, 5%);
+        color: color-yiq($primary);
+        padding: 0 10px;
+        margin-top: .31rem;
+      }
+
+      .select2-selection__choice__remove {
+        color: rgba(255, 255, 255, 0.7);
+        float: right;
+        margin-left: 5px;
+        margin-right: -2px;
+
+        &:hover {
+          color: $white;
+        }
+      }
+
+      .text-sm &,
+      &.text-sm {
+        .select2-search.select2-search--inline {
+          .select2-search__field {
+            margin-top: 8px;
+          }
+        }
+
+        .select2-selection__choice {
+          margin-top: .4rem;
+        }
+      }
+    }
+
+    &.select2-container--focus {
+      .select2-selection--single,
+      .select2-selection--multiple {
+        border-color: $input-focus-border-color;
+      }
+
+      .select2-search__field {
+        border: 0;
+      }
+    }
+  }
+
+  & .select2-selection--single .select2-selection__rendered li {
+    padding-right: 10px;
+  }
+
+  .input-group-prepend ~ & {
+    .select2-selection {
+      border-bottom-left-radius: 0;
+      border-top-left-radius: 0;
+    }
+  }
+
+  .input-group > &:not(:last-child) {
+    .select2-selection {
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+    }
+  }
+}
+
+// Select2 Bootstrap4 Theme overrides
+.select2-container--bootstrap4 {
+  &.select2-container--focus .select2-selection {
+    box-shadow: none;
+  }
+}
+
+// text-sm / form-control-sm override
+select.form-control-sm ~ {
+  .select2-container--default {
+    font-size: $font-size-sm;
+  }
+}
+
+.text-sm,
+select.form-control-sm ~ {
+  .select2-container--default {
+    .select2-selection--single {
+      height: $input-height-sm;
+      
+      .select2-selection__rendered {
+        margin-top: -.4rem;
+      }
+
+      .select2-selection__arrow {
+        top: -.12rem;
+      }
+    }
+
+    .select2-selection--multiple {
+      min-height: $input-height-sm;
+      
+      .select2-selection__rendered {
+        padding: 0 $input-padding-x-sm / 2 $input-padding-y-sm;
+        margin-top: -($input-padding-x-sm / 5);
+
+        li:first-child.select2-search.select2-search--inline {
+          margin-left: $input-padding-x-sm / 2;
+        }
+
+        .select2-search.select2-search--inline {
+          .select2-search__field {
+            margin-top: 6px;
+          }
+        }
+      }
+    }
+  }
+}
+
+// Background colors (theme colors)
+@each $name, $color in $theme-colors {
+  @include select2-variant($name, $color);
+}
+
+// Background colors (colors)
+@each $name, $color in $colors {
+  @include select2-variant($name, $color);
+}

ShopBundle/Resources/public/sass/backend/adminlte/plugins/_sweetalert2.scss

@@ -0,0 +1,40 @@
+//
+// Plugin: SweetAlert2
+//
+
+// Icon Colors
+.swal2-icon {
+  &.swal2-info {
+    border-color: ligthen($info, 20%);
+    color: $info;
+  }
+
+  &.swal2-warning {
+    border-color: ligthen($warning, 20%);
+    color: $warning;
+  }
+
+  &.swal2-error {
+    border-color: ligthen($danger, 20%);
+    color: $danger;
+  }
+
+  &.swal2-question {
+    border-color: ligthen($secondary, 20%);
+    color: $secondary;
+  }
+
+  &.swal2-success {
+    border-color: ligthen($success, 20%);
+    color: $success;
+
+    .swal2-success-ring {
+      border-color: ligthen($success, 20%);
+    }
+
+    [class^='swal2-success-line'] {
+      background-color: $success;
+    }
+  }
+
+}

ShopBundle/Resources/public/sass/backend/adminlte/plugins/_toastr.scss

@@ -0,0 +1,54 @@
+//
+// Plugin: Toastr
+//
+
+// Background to FontAwesome Icons
+// #toast-container > .toast {
+//     background-image: none !important;
+// }
+// #toast-container > .toast .toast-message:before {
+//     font-family: 'Font Awesome 5 Free';
+//     font-size: 24px;
+//     font-weight: 900;
+//     line-height: 18px;
+//     float: left;
+//     color: #FFF;
+//     padding-right: 0.5em;
+//     margin: auto 0.5em auto -1.5em;
+// }        
+// #toast-container > .toast-warning .toast-message:before {
+//     content: "\f06a";
+// }
+// #toast-container > .toast-error .toast-message:before {
+//     content: "\f071";
+// }
+// #toast-container > .toast-info .toast-message:before {
+//     content: "\f05a";
+// }
+// #toast-container > .toast-success .toast-message:before {
+//     content: "\f058";
+// }
+
+
+#toast-container {
+  // Background color
+  .toast {
+    background-color: $primary;
+  }
+
+  .toast-success {
+    background-color: $success;
+  }
+
+  .toast-error {
+    background-color: $danger;
+  }
+
+  .toast-info {
+    background-color: $info;
+  }
+
+  .toast-warning {
+    background-color: $warning;
+  }
+}

ShopBundle/Resources/public/sass/backend/bootstrap/_alert.scss

@@ -0,0 +1,51 @@
+//
+// Base styles
+//
+
+.alert {
+  position: relative;
+  padding: $alert-padding-y $alert-padding-x;
+  margin-bottom: $alert-margin-bottom;
+  border: $alert-border-width solid transparent;
+  @include border-radius($alert-border-radius);
+}
+
+// Headings for larger alerts
+.alert-heading {
+  // Specified to prevent conflicts of changing $headings-color
+  color: inherit;
+}
+
+// Provide class for links that match alerts
+.alert-link {
+  font-weight: $alert-link-font-weight;
+}
+
+
+// Dismissible alerts
+//
+// Expand the right padding and account for the close button's positioning.
+
+.alert-dismissible {
+  padding-right: $close-font-size + $alert-padding-x * 2;
+
+  // Adjust close link position
+  .close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: $alert-padding-y $alert-padding-x;
+    color: inherit;
+  }
+}
+
+
+// Alternate styles
+//
+// Generate contextual modifier classes for colorizing the alert.
+
+@each $color, $value in $theme-colors {
+  .alert-#{$color} {
+    @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level));
+  }
+}

ShopBundle/Resources/public/sass/backend/bootstrap/_badge.scss

@@ -0,0 +1,54 @@
+// Base class
+//
+// Requires one of the contextual, color modifier classes for `color` and
+// `background-color`.
+
+.badge {
+  display: inline-block;
+  padding: $badge-padding-y $badge-padding-x;
+  @include font-size($badge-font-size);
+  font-weight: $badge-font-weight;
+  line-height: 1;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  @include border-radius($badge-border-radius);
+  @include transition($badge-transition);
+
+  @at-root a#{&} {
+    @include hover-focus {
+      text-decoration: none;
+    }
+  }
+
+  // Empty badges collapse automatically
+  &:empty {
+    display: none;
+  }
+}
+
+// Quick fix for badges in buttons
+.btn .badge {
+  position: relative;
+  top: -1px;
+}
+
+// Pill badges
+//
+// Make them extra rounded with a modifier to replace v3's badges.
+
+.badge-pill {
+  padding-right: $badge-pill-padding-x;
+  padding-left: $badge-pill-padding-x;
+  @include border-radius($badge-pill-border-radius);
+}
+
+// Colors
+//
+// Contextual variations (linked badges get darker on :hover).
+
+@each $color, $value in $theme-colors {
+  .badge-#{$color} {
+    @include badge-variant($value);
+  }
+}

ShopBundle/Resources/public/sass/backend/bootstrap/_breadcrumb.scss

@@ -0,0 +1,41 @@
+.breadcrumb {
+  display: flex;
+  flex-wrap: wrap;
+  padding: $breadcrumb-padding-y $breadcrumb-padding-x;
+  margin-bottom: $breadcrumb-margin-bottom;
+  list-style: none;
+  background-color: $breadcrumb-bg;
+  @include border-radius($breadcrumb-border-radius);
+}
+
+.breadcrumb-item {
+  // The separator between breadcrumbs (by default, a forward-slash: "/")
+  + .breadcrumb-item {
+    padding-left: $breadcrumb-item-padding;
+
+    &::before {
+      display: inline-block; // Suppress underlining of the separator in modern browsers
+      padding-right: $breadcrumb-item-padding;
+      color: $breadcrumb-divider-color;
+      content: $breadcrumb-divider;
+    }
+  }
+
+  // IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built
+  // without `<ul>`s. The `::before` pseudo-element generates an element
+  // *within* the .breadcrumb-item and thereby inherits the `text-decoration`.
+  //
+  // To trick IE into suppressing the underline, we give the pseudo-element an
+  // underline and then immediately remove it.
+  + .breadcrumb-item:hover::before {
+    text-decoration: underline;
+  }
+  // stylelint-disable-next-line no-duplicate-selectors
+  + .breadcrumb-item:hover::before {
+    text-decoration: none;
+  }
+
+  &.active {
+    color: $breadcrumb-active-color;
+  }
+}

ShopBundle/Resources/public/sass/backend/bootstrap/_button-group.scss

@@ -0,0 +1,163 @@
+// stylelint-disable selector-no-qualifying-type
+
+// Make the div behave like a button
+.btn-group,
+.btn-group-vertical {
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle; // match .btn alignment given font-size hack above
+
+  > .btn {
+    position: relative;
+    flex: 1 1 auto;
+
+    // Bring the hover, focused, and "active" buttons to the front to overlay
+    // the borders properly
+    @include hover {
+      z-index: 1;
+    }
+    &:focus,
+    &:active,
+    &.active {
+      z-index: 1;
+    }
+  }
+}
+
+// Optional: Group multiple button groups together for a toolbar
+.btn-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+
+  .input-group {
+    width: auto;
+  }
+}
+
+.btn-group {
+  // Prevent double borders when buttons are next to each other
+  > .btn:not(:first-child),
+  > .btn-group:not(:first-child) {
+    margin-left: -$btn-border-width;
+  }
+
+  // Reset rounded corners
+  > .btn:not(:last-child):not(.dropdown-toggle),
+  > .btn-group:not(:last-child) > .btn {
+    @include border-right-radius(0);
+  }
+
+  > .btn:not(:first-child),
+  > .btn-group:not(:first-child) > .btn {
+    @include border-left-radius(0);
+  }
+}
+
+// Sizing
+//
+// Remix the default button sizing classes into new ones for easier manipulation.
+
+.btn-group-sm > .btn { @extend .btn-sm; }
+.btn-group-lg > .btn { @extend .btn-lg; }
+
+
+//
+// Split button dropdowns
+//
+
+.dropdown-toggle-split {
+  padding-right: $btn-padding-x * .75;
+  padding-left: $btn-padding-x * .75;
+
+  &::after,
+  .dropup &::after,
+  .dropright &::after {
+    margin-left: 0;
+  }
+
+  .dropleft &::before {
+    margin-right: 0;
+  }
+}
+
+.btn-sm + .dropdown-toggle-split {
+  padding-right: $btn-padding-x-sm * .75;
+  padding-left: $btn-padding-x-sm * .75;
+}
+
+.btn-lg + .dropdown-toggle-split {
+  padding-right: $btn-padding-x-lg * .75;
+  padding-left: $btn-padding-x-lg * .75;
+}
+
+
+// The clickable button for toggling the menu
+// Set the same inset shadow as the :active state
+.btn-group.show .dropdown-toggle {
+  @include box-shadow($btn-active-box-shadow);
+
+  // Show no shadow for `.btn-link` since it has no other button styles.
+  &.btn-link {
+    @include box-shadow(none);
+  }
+}
+
+
+//
+// Vertical button groups
+//
+
+.btn-group-vertical {
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+
+  > .btn,
+  > .btn-group {
+    width: 100%;
+  }
+
+  > .btn:not(:first-child),
+  > .btn-group:not(:first-child) {
+    margin-top: -$btn-border-width;
+  }
+
+  // Reset rounded corners
+  > .btn:not(:last-child):not(.dropdown-toggle),
+  > .btn-group:not(:last-child) > .btn {
+    @include border-bottom-radius(0);
+  }
+
+  > .btn:not(:first-child),
+  > .btn-group:not(:first-child) > .btn {
+    @include border-top-radius(0);
+  }
+}
+
+
+// Checkbox and radio options
+//
+// In order to support the browser's form validation feedback, powered by the
+// `required` attribute, we have to "hide" the inputs via `clip`. We cannot use
+// `display: none;` or `visibility: hidden;` as that also hides the popover.
+// Simply visually hiding the inputs via `opacity` would leave them clickable in
+// certain cases which is prevented by using `clip` and `pointer-events`.
+// This way, we ensure a DOM element is visible to position the popover from.
+//
+// See https://github.com/twbs/bootstrap/pull/12794 and
+// https://github.com/twbs/bootstrap/pull/14559 for more information.
+
+.btn-group-toggle {
+  > .btn,
+  > .btn-group > .btn {
+    margin-bottom: 0; // Override default `<label>` value
+
+    input[type="radio"],
+    input[type="checkbox"] {
+      position: absolute;
+      clip: rect(0, 0, 0, 0);
+      pointer-events: none;
+    }
+  }
+}

ShopBundle/Resources/public/sass/backend/bootstrap/_buttons.scss

@@ -0,0 +1,137 @@
+// stylelint-disable selector-no-qualifying-type
+
+//
+// Base styles
+//
+
+.btn {
+  display: inline-block;
+  font-family: $btn-font-family;
+  font-weight: $btn-font-weight;
+  color: $body-color;
+  text-align: center;
+  vertical-align: middle;
+  user-select: none;
+  background-color: transparent;
+  border: $btn-border-width solid transparent;
+  @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
+  @include transition($btn-transition);
+
+  @include hover {
+    color: $body-color;
+    text-decoration: none;
+  }
+
+  &:focus,
+  &.focus {
+    outline: 0;
+    box-shadow: $btn-focus-box-shadow;
+  }
+
+  // Disabled comes first so active can properly restyle
+  &.disabled,
+  &:disabled {
+    opacity: $btn-disabled-opacity;
+    @include box-shadow(none);
+  }
+
+  &:not(:disabled):not(.disabled):active,
+  &:not(:disabled):not(.disabled).active {
+    @include box-shadow($btn-active-box-shadow);
+
+    &:focus {
+      @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
+    }
+  }
+}
+
+// Future-proof disabling of clicks on `<a>` elements
+a.btn.disabled,
+fieldset:disabled a.btn {
+  pointer-events: none;
+}
+
+
+//
+// Alternate buttons
+//
+
+@each $color, $value in $theme-colors {
+  .btn-#{$color} {
+    @include button-variant($value, $value);
+  }
+}
+
+@each $color, $value in $theme-colors {
+  .btn-outline-#{$color} {
+    @include button-outline-variant($value);
+  }
+}
+
+
+//
+// Link buttons
+//
+
+// Make a button look and behave like a link
+.btn-link {
+  font-weight: $font-weight-normal;
+  color: $link-color;
+  text-decoration: $link-decoration;
+
+  @include hover {
+    color: $link-hover-color;
+    text-decoration: $link-hover-decoration;
+  }
+
+  &:focus,
+  &.focus {
+    text-decoration: $link-hover-decoration;
+    box-shadow: none;
+  }
+
+  &:disabled,
+  &.disabled {
+    color: $btn-link-disabled-color;
+    pointer-events: none;
+  }
+
+  // No need for an active state here
+}
+
+
+//
+// Button Sizes
+//
+
+.btn-lg {
+  @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
+}
+
+.btn-sm {
+  @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
+}
+
+
+//
+// Block button
+//
+
+.btn-block {
+  display: block;
+  width: 100%;
+
+  // Vertically space out multiple block buttons
+  + .btn-block {
+    margin-top: $btn-block-spacing-y;
+  }
+}
+
+// Specificity overrides
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+  &.btn-block {
+    width: 100%;
+  }
+}

ShopBundle/Resources/public/sass/backend/bootstrap/_card.scss

@@ -0,0 +1,289 @@
+//
+// Base styles
+//
+
+.card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
+  word-wrap: break-word;
+  background-color: $card-bg;
+  background-clip: border-box;
+  border: $card-border-width solid $card-border-color;
+  @include border-radius($card-border-radius);
+
+  > hr {
+    margin-right: 0;
+    margin-left: 0;
+  }
+
+  > .list-group:first-child {
+    .list-group-item:first-child {
+      @include border-top-radius($card-border-radius);
+    }
+  }
+
+  > .list-group:last-child {
+    .list-group-item:last-child {
+      @include border-bottom-radius($card-border-radius);
+    }
+  }
+}
+
+.card-body {
+  // Enable `flex-grow: 1` for decks and groups so that card blocks take up
+  // as much space as possible, ensuring footers are aligned to the bottom.
+  flex: 1 1 auto;
+  padding: $card-spacer-x;
+  color: $card-color;
+}
+
+.card-title {
+  margin-bottom: $card-spacer-y;
+}
+
+.card-subtitle {
+  margin-top: -$card-spacer-y / 2;
+  margin-bottom: 0;
+}
+
+.card-text:last-child {
+  margin-bottom: 0;
+}
+
+.card-link {
+  @include hover {
+    text-decoration: none;
+  }
+
+  + .card-link {
+    margin-left: $card-spacer-x;
+  }
+}
+
+//
+// Optional textual caps
+//
+
+.card-header {
+  padding: $card-spacer-y $card-spacer-x;
+  margin-bottom: 0; // Removes the default margin-bottom of <hN>
+  color: $card-cap-color;
+  background-color: $card-cap-bg;
+  border-bottom: $card-border-width solid $card-border-color;
+
+  &:first-child {
+    @include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
+  }
+
+  + .list-group {
+    .list-group-item:first-child {
+      border-top: 0;
+    }
+  }
+}
+
+.card-footer {
+  padding: $card-spacer-y $card-spacer-x;
+  background-color: $card-cap-bg;
+  border-top: $card-border-width solid $card-border-color;
+
+  &:last-child {
+    @include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius);
+  }
+}
+
+
+//
+// Header navs
+//
+
+.card-header-tabs {
+  margin-right: -$card-spacer-x / 2;
+  margin-bottom: -$card-spacer-y;
+  margin-left: -$card-spacer-x / 2;
+  border-bottom: 0;
+}
+
+.card-header-pills {
+  margin-right: -$card-spacer-x / 2;
+  margin-left: -$card-spacer-x / 2;
+}
+
+// Card image
+.card-img-overlay {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: $card-img-overlay-padding;
+}
+
+.card-img {
+  width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
+  @include border-radius($card-inner-border-radius);
+}
+
+// Card image caps
+.card-img-top {
+  width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
+  @include border-top-radius($card-inner-border-radius);
+}
+
+.card-img-bottom {
+  width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
+  @include border-bottom-radius($card-inner-border-radius);
+}
+
+
+// Card deck
+
+.card-deck {
+  display: flex;
+  flex-direction: column;
+
+  .card {
+    margin-bottom: $card-deck-margin;
+  }
+
+  @include media-breakpoint-up(sm) {
+    flex-flow: row wrap;
+    margin-right: -$card-deck-margin;
+    margin-left: -$card-deck-margin;
+
+    .card {
+      display: flex;
+      // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
+      flex: 1 0 0%;
+      flex-direction: column;
+      margin-right: $card-deck-margin;
+      margin-bottom: 0; // Override the default
+      margin-left: $card-deck-margin;
+    }
+  }
+}
+
+
+//
+// Card groups
+//
+
+.card-group {
+  display: flex;
+  flex-direction: column;
+
+  // The child selector allows nested `.card` within `.card-group`
+  // to display properly.
+  > .card {
+    margin-bottom: $card-group-margin;
+  }
+
+  @include media-breakpoint-up(sm) {
+    flex-flow: row wrap;
+    // The child selector allows nested `.card` within `.card-group`
+    // to display properly.
+    > .card {
+      // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
+      flex: 1 0 0%;
+      margin-bottom: 0;
+
+      + .card {
+        margin-left: 0;
+        border-left: 0;
+      }
+
+      // Handle rounded corners
+      @if $enable-rounded {
+        &:not(:last-child) {
+          @include border-right-radius(0);
+
+          .card-img-top,
+          .card-header {
+            // stylelint-disable-next-line property-blacklist
+            border-top-right-radius: 0;
+          }
+          .card-img-bottom,
+          .card-footer {
+            // stylelint-disable-next-line property-blacklist
+            border-bottom-right-radius: 0;
+          }
+        }
+
+        &:not(:first-child) {
+          @include border-left-radius(0);
+
+          .card-img-top,
+          .card-header {
+            // stylelint-disable-next-line property-blacklist
+            border-top-left-radius: 0;
+          }
+          .card-img-bottom,
+          .card-footer {
+            // stylelint-disable-next-line property-blacklist
+            border-bottom-left-radius: 0;
+          }
+        }
+      }
+    }
+  }
+}
+
+
+//
+// Columns
+//
+
+.card-columns {
+  .card {
+    margin-bottom: $card-columns-margin;
+  }
+
+  @include media-breakpoint-up(sm) {
+    column-count: $card-columns-count;
+    column-gap: $card-columns-gap;
+    orphans: 1;
+    widows: 1;
+
+    .card {
+      display: inline-block; // Don't let them vertically span multiple columns
+      width: 100%; // Don't let their width change
+    }
+  }
+}
+
+
+//
+// Accordion
+//
+
+.accordion {
+  > .card {
+    overflow: hidden;
+
+    &:not(:first-of-type) {
+      .card-header:first-child {
+        @include border-radius(0);
+      }
+
+      &:not(:last-of-type) {
+        border-bottom: 0;
+        @include border-radius(0);
+      }
+    }
+
+    &:first-of-type {
+      border-bottom: 0;
+      @include border-bottom-radius(0);
+    }
+
+    &:last-of-type {
+      @include border-top-radius(0);
+    }
+
+    .card-header {
+      margin-bottom: -$card-border-width;
+    }
+  }
+}

ShopBundle/Resources/public/sass/backend/bootstrap/_carousel.scss

@@ -0,0 +1,197 @@
+// Notes on the classes:
+//
+// 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically)
+//    even when their scroll action started on a carousel, but for compatibility (with Firefox)
+//    we're preventing all actions instead
+// 2. The .carousel-item-left and .carousel-item-right is used to indicate where
+//    the active slide is heading.
+// 3. .active.carousel-item is the current slide.
+// 4. .active.carousel-item-left and .active.carousel-item-right is the current
+//    slide in its in-transition state. Only one of these occurs at a time.
+// 5. .carousel-item-next.carousel-item-left and .carousel-item-prev.carousel-item-right
+//    is the upcoming slide in transition.
+
+.carousel {
+  position: relative;
+}
+
+.carousel.pointer-event {
+  touch-action: pan-y;
+}
+
+.carousel-inner {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  @include clearfix();
+}
+
+.carousel-item {
+  position: relative;
+  display: none;
+  float: left;
+  width: 100%;
+  margin-right: -100%;
+  backface-visibility: hidden;
+  @include transition($carousel-transition);
+}
+
+.carousel-item.active,
+.carousel-item-next,
+.carousel-item-prev {
+  display: block;
+}
+
+.carousel-item-next:not(.carousel-item-left),
+.active.carousel-item-right {
+  transform: translateX(100%);
+}
+
+.carousel-item-prev:not(.carousel-item-right),
+.active.carousel-item-left {
+  transform: translateX(-100%);
+}
+
+
+//
+// Alternate transitions
+//
+
+.carousel-fade {
+  .carousel-item {
+    opacity: 0;
+    transition-property: opacity;
+    transform: none;
+  }
+
+  .carousel-item.active,
+  .carousel-item-next.carousel-item-left,
+  .carousel-item-prev.carousel-item-right {
+    z-index: 1;
+    opacity: 1;
+  }
+
+  .active.carousel-item-left,
+  .active.carousel-item-right {
+    z-index: 0;
+    opacity: 0;
+    @include transition(0s $carousel-transition-duration opacity);
+  }
+}
+
+
+//
+// Left/right controls for nav
+//
+
+.carousel-control-prev,
+.carousel-control-next {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 1;
+  // Use flex for alignment (1-3)
+  display: flex; // 1. allow flex styles
+  align-items: center; // 2. vertically center contents
+  justify-content: center; // 3. horizontally center contents
+  width: $carousel-control-width;
+  color: $carousel-control-color;
+  text-align: center;
+  opacity: $carousel-control-opacity;
+  @include transition($carousel-control-transition);
+
+  // Hover/focus state
+  @include hover-focus {
+    color: $carousel-control-color;
+    text-decoration: none;
+    outline: 0;
+    opacity: $carousel-control-hover-opacity;
+  }
+}
+.carousel-control-prev {
+  left: 0;
+  @if $enable-gradients {
+    background: linear-gradient(90deg, rgba($black, .25), rgba($black, .001));
+  }
+}
+.carousel-control-next {
+  right: 0;
+  @if $enable-gradients {
+    background: linear-gradient(270deg, rgba($black, .25), rgba($black, .001));
+  }
+}
+
+// Icons for within
+.carousel-control-prev-icon,
+.carousel-control-next-icon {
+  display: inline-block;
+  width: $carousel-control-icon-width;
+  height: $carousel-control-icon-width;
+  background: no-repeat 50% / 100% 100%;
+}
+.carousel-control-prev-icon {
+  background-image: $carousel-control-prev-icon-bg;
+}
+.carousel-control-next-icon {
+  background-image: $carousel-control-next-icon-bg;
+}
+
+
+// Optional indicator pips
+//
+// Add an ordered list with the following class and add a list item for each
+// slide your carousel holds.
+
+.carousel-indicators {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 15;
+  display: flex;
+  justify-content: center;
+  padding-left: 0; // override <ol> default
+  // Use the .carousel-control's width as margin so we don't overlay those
+  margin-right: $carousel-control-width;
+  margin-left: $carousel-control-width;
+  list-style: none;
+
+  li {
+    box-sizing: content-box;
+    flex: 0 1 auto;
+    width: $carousel-indicator-width;
+    height: $carousel-indicator-height;
+    margin-right: $carousel-indicator-spacer;
+    margin-left: $carousel-indicator-spacer;
+    text-indent: -999px;
+    cursor: pointer;
+    background-color: $carousel-indicator-active-bg;
+    background-clip: padding-box;
+    // Use transparent borders to increase the hit area by 10px on top and bottom.
+    border-top: $carousel-indicator-hit-area-height solid transparent;
+    border-bottom: $carousel-indicator-hit-area-height solid transparent;
+    opacity: .5;
+    @include transition($carousel-indicator-transition);
+  }
+
+  .active {
+    opacity: 1;
+  }
+}
+
+
+// Optional captions
+//
+//
+
+.carousel-caption {
+  position: absolute;
+  right: (100% - $carousel-caption-width) / 2;
+  bottom: 20px;
+  left: (100% - $carousel-caption-width) / 2;
+  z-index: 10;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  color: $carousel-caption-color;
+  text-align: center;
+}

ShopBundle/Resources/public/sass/backend/bootstrap/_close.scss

@@ -0,0 +1,41 @@
+.close {
+  float: right;
+  @include font-size($close-font-size);
+  font-weight: $close-font-weight;
+  line-height: 1;
+  color: $close-color;
+  text-shadow: $close-text-shadow;
+  opacity: .5;
+
+  // Override <a>'s hover style
+  @include hover {
+    color: $close-color;
+    text-decoration: none;
+  }
+
+  &:not(:disabled):not(.disabled) {
+    @include hover-focus {
+      opacity: .75;
+    }
+  }
+}
+
+// Additional properties for button version
+// iOS requires the button element instead of an anchor tag.
+// If you want the anchor version, it requires `href="#"`.
+// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
+
+// stylelint-disable-next-line selector-no-qualifying-type
+button.close {
+  padding: 0;
+  background-color: transparent;
+  border: 0;
+  appearance: none;
+}
+
+// Future-proof disabling of clicks on `<a>` elements
+
+// stylelint-disable-next-line selector-no-qualifying-type
+a.close.disabled {
+  pointer-events: none;
+}