$response = parent::editAction() ; | $response = parent::editAction() ; | ||||
if ($response instanceof RedirectResponse) { | if ($response instanceof RedirectResponse) { | ||||
$referer = $this->request->headers->get('referer'); | $referer = $this->request->headers->get('referer'); | ||||
return new RedirectResponse($referer); | return new RedirectResponse($referer); | ||||
} | } |
use Doctrine\ORM\EntityManagerInterface; | use Doctrine\ORM\EntityManagerInterface; | ||||
use EasyCorp\Bundle\EasyAdminBundle\Event\EasyAdminEvents; | use EasyCorp\Bundle\EasyAdminBundle\Event\EasyAdminEvents; | ||||
use FOS\UserBundle\Model\UserManagerInterface; | use FOS\UserBundle\Model\UserManagerInterface; | ||||
use Lc\ShopBundle\Context\MerchantUtilsInterface; | |||||
use Lc\ShopBundle\Context\OrderPaymentInterface; | use Lc\ShopBundle\Context\OrderPaymentInterface; | ||||
use Lc\ShopBundle\Context\OrderProductInterface; | use Lc\ShopBundle\Context\OrderProductInterface; | ||||
use Lc\ShopBundle\Context\OrderReductionCartInterface; | use Lc\ShopBundle\Context\OrderReductionCartInterface; | ||||
use Lc\ShopBundle\Context\OrderReductionCreditInterface; | use Lc\ShopBundle\Context\OrderReductionCreditInterface; | ||||
use Lc\ShopBundle\Context\OrderShopInterface; | use Lc\ShopBundle\Context\OrderShopInterface; | ||||
use Lc\ShopBundle\Context\OrderUtilsInterface; | |||||
use Lc\ShopBundle\Context\UserInterface; | use Lc\ShopBundle\Context\UserInterface; | ||||
use Lc\ShopBundle\Form\Backend\Order\AddPoductToOrderType; | use Lc\ShopBundle\Form\Backend\Order\AddPoductToOrderType; | ||||
use Lc\ShopBundle\Form\Backend\Order\AddRedeliveryOrderProductType; | use Lc\ShopBundle\Form\Backend\Order\AddRedeliveryOrderProductType; | ||||
use Lc\ShopBundle\Form\Backend\Order\OrderDeliveryAddressType; | use Lc\ShopBundle\Form\Backend\Order\OrderDeliveryAddressType; | ||||
use Lc\ShopBundle\Form\Backend\Order\OrderInvoiceAddressType; | use Lc\ShopBundle\Form\Backend\Order\OrderInvoiceAddressType; | ||||
use Lc\ShopBundle\Form\Backend\Order\OrderPaymentType; | 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\OrderProductsType; | ||||
use Lc\ShopBundle\Form\Backend\Order\AddOrderReductionCartType; | use Lc\ShopBundle\Form\Backend\Order\AddOrderReductionCartType; | ||||
use Lc\ShopBundle\Form\Backend\Order\AddOrderReductionCreditType; | use Lc\ShopBundle\Form\Backend\Order\AddOrderReductionCreditType; | ||||
use Lc\ShopBundle\Form\Backend\Order\OrderSendPaymentLink; | |||||
use Lc\ShopBundle\Form\Backend\Order\OrderStatusType; | use Lc\ShopBundle\Form\Backend\Order\OrderStatusType; | ||||
use Lc\ShopBundle\Model\CreditHistory; | use Lc\ShopBundle\Model\CreditHistory; | ||||
use Lc\ShopBundle\Model\OrderStatus; | use Lc\ShopBundle\Model\OrderStatus; | ||||
use Lc\ShopBundle\Services\CreditUtils; | |||||
use Lc\ShopBundle\Services\MailUtils; | |||||
use Lc\ShopBundle\Services\Utils; | use Lc\ShopBundle\Services\Utils; | ||||
use Lc\ShopBundle\Services\UtilsManager; | use Lc\ShopBundle\Services\UtilsManager; | ||||
use Mailjet\MailjetSwiftMailer\SwiftMailer\MailjetTransport; | use Mailjet\MailjetSwiftMailer\SwiftMailer\MailjetTransport; | ||||
use Proxies\__CG__\App\Entity\OrderProduct; | |||||
use Symfony\Bridge\Doctrine\Form\Type\EntityType; | use Symfony\Bridge\Doctrine\Form\Type\EntityType; | ||||
use Symfony\Component\Form\Extension\Core\Type\SubmitType; | use Symfony\Component\Form\Extension\Core\Type\SubmitType; | ||||
use Symfony\Component\HttpFoundation\Response; | use Symfony\Component\HttpFoundation\Response; | ||||
use Symfony\Component\Routing\Generator\UrlGeneratorInterface; | |||||
use Symfony\Component\Security\Core\Security; | use Symfony\Component\Security\Core\Security; | ||||
use Symfony\Contracts\Translation\TranslatorInterface; | use Symfony\Contracts\Translation\TranslatorInterface; | ||||
class OrderController extends AdminController | class OrderController extends AdminController | ||||
{ | { | ||||
protected $creditUtils; | protected $creditUtils; | ||||
protected $mailUtils; | |||||
public function __construct(Security $security, UserManagerInterface $userManager, EntityManagerInterface $em, MailjetTransport $mailjetTransport, UtilsManager $utilsManager, TranslatorInterface $translator) | public function __construct(Security $security, UserManagerInterface $userManager, EntityManagerInterface $em, MailjetTransport $mailjetTransport, UtilsManager $utilsManager, TranslatorInterface $translator) | ||||
{ | { | ||||
$this->creditUtils = $utilsManager->getCreditUtils(); | $this->creditUtils = $utilsManager->getCreditUtils(); | ||||
$this->mailUtils = $utilsManager->getMailUtils(); | |||||
parent::__construct($security, $userManager, $em, $mailjetTransport, $utilsManager, $translator); | parent::__construct($security, $userManager, $em, $mailjetTransport, $utilsManager, $translator); | ||||
} | } | ||||
} | } | ||||
public function orderInvoiceAddressAction() | public function orderInvoiceAddressAction() | ||||
{ | { | ||||
return $this->createOrderAjaxReponse($orderShop); | 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) | protected function createOrderAjaxReponse(OrderShopInterface $order) | ||||
{ | { | ||||
$response['flashMessages'] = $this->utils->getFlashMessages(); | $response['flashMessages'] = $this->utils->getFlashMessages(); | ||||
$parameters['form_order_products'] = $this->createCustomForm(OrderProductsType::class, 'orderProducts', $parameters)->createView(); | $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_status'] = $this->createCustomForm(OrderStatusType::class, 'orderStatus', $parameters)->createView(); | ||||
$parameters['form_order_invoice_address'] = $this->createCustomForm(OrderInvoiceAddressType::class, 'orderInvoiceAddress', $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; | break; | ||||
case OrderStatus::ALIAS_ERROR_PAYMENT_ONLINE : | |||||
case OrderStatus::ALIAS_WAITING_PAYMENT_CREDIT : | case OrderStatus::ALIAS_WAITING_PAYMENT_CREDIT : | ||||
case OrderStatus::ALIAS_WAITING_PAYMENT_ONLINE : | 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_order_payment'] = $this->createCustomForm(OrderPaymentType::class, 'orderPayment', $parameters, false)->createView(); | ||||
$parameters['form_delete_order_payment'] = $this->createCustomForm(DeleteOrderPaymentType::class, 'deleteOrderPayment', $parameters)->createView(); | $parameters['form_delete_order_payment'] = $this->createCustomForm(DeleteOrderPaymentType::class, 'deleteOrderPayment', $parameters)->createView(); | ||||
$parameters['form_order_status'] = $this->createCustomForm(OrderStatusType::class, 'orderStatus', $parameters)->createView(); | $parameters['form_order_status'] = $this->createCustomForm(OrderStatusType::class, 'orderStatus', $parameters)->createView(); | ||||
if (!$user instanceof UserInterface) return $user; | if (!$user instanceof UserInterface) return $user; | ||||
else { | 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'); | $this->utils->addFlash('info', 'error.order.otherOrderAlreadyExist'); | ||||
return $this->redirectToRoute('easyadmin', [ | return $this->redirectToRoute('easyadmin', [ | ||||
'action' => 'edit', | 'action' => 'edit', | ||||
'entity' => $this->entity['name'], | 'entity' => $this->entity['name'], | ||||
'id' => $orderShopUser->getId() | 'id' => $orderShopUser->getId() | ||||
]); | ]); | ||||
}else { | |||||
} else { | |||||
$orderShop = $this->orderUtils->createOrderShop(array( | $orderShop = $this->orderUtils->createOrderShop(array( |
namespace Lc\ShopBundle\Controller\Backend; | namespace Lc\ShopBundle\Controller\Backend; | ||||
use App\Form\Backend\Common\AddressType; | |||||
use FOS\UserBundle\Doctrine\UserManager; | use FOS\UserBundle\Doctrine\UserManager; | ||||
use FOS\UserBundle\Model\UserManagerInterface ; | use FOS\UserBundle\Model\UserManagerInterface ; | ||||
use Lc\ShopBundle\Context\AddressInterface; | |||||
use Lc\ShopBundle\Model\Address; | |||||
class UserController extends AdminController | class UserController extends AdminController | ||||
{ | { | ||||
$this->userManager->updateUser($user, false); | $this->userManager->updateUser($user, false); | ||||
parent::updateEntity($user); | parent::updateEntity($user); | ||||
} | } | ||||
} | } |
namespace Lc\ShopBundle\Form\Backend\Common; | 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\ChoiceType; | ||||
use Symfony\Component\Form\Extension\Core\Type\CollectionType; | use Symfony\Component\Form\Extension\Core\Type\CollectionType; | ||||
use Symfony\Component\Form\Extension\Core\Type\TextareaType; | use Symfony\Component\Form\Extension\Core\Type\TextareaType; | ||||
public function buildForm(FormBuilderInterface $builder, array $options) | public function buildForm(FormBuilderInterface $builder, array $options) | ||||
{ | { | ||||
dump($options); | |||||
$builder | $builder | ||||
->add('title', TextType::class, ['label' => 'Titre']) | ->add('title', TextType::class, ['label' => 'Titre']) | ||||
->add('type', ChoiceType::class, [ | ->add('type', ChoiceType::class, [ | ||||
'label' => 'Type', | 'label' => 'Type', | ||||
'choices' => [ | '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, [ | ->add('civility', ChoiceType::class, [ | ||||
'Homme' => 0, | 'Homme' => 0, | ||||
], | ], | ||||
]) | ]) | ||||
->add('lastname', TextType::class, ['required' => false]) | ->add('lastname', TextType::class, ['required' => false]) | ||||
->add('firstname', TextType::class, ['required' => false]) | ->add('firstname', TextType::class, ['required' => false]) | ||||
->add('address', TextareaType::class) | ->add('address', TextareaType::class) | ||||
->add('zip', TextType::class) | ->add('zip', TextType::class) | ||||
->add('city', TextType::class) | ->add('city', TextType::class) | ||||
->add('country', TextType::class) | |||||
->add('phone', CollectionType::class, [ | ->add('phone', CollectionType::class, [ | ||||
'allow_add'=>true, | 'allow_add'=>true, | ||||
'allow_delete'=>true, | |||||
'entry_options' => [ | |||||
'label'=>false, | |||||
], | |||||
'required' => false | 'required' => false | ||||
]) | ]) | ||||
->add('company', TextType::class, ['required' => false]) | ->add('company', TextType::class, ['required' => false]) | ||||
{ | { | ||||
$resolver->setDefaults([ | $resolver->setDefaults([ | ||||
'label' => false, | 'label' => false, | ||||
'data_class' => $this->em->getClassMetadata(AddressInterface::class)->getName() | |||||
'data_class' => $this->em->getClassMetadata(AddressInterface::class)->getName(), | |||||
'translation_domain' => 'lcshop' | |||||
]); | ]); | ||||
} | } | ||||
} | } |
{ | { | ||||
$builder->addEventListener(FormEvents::PRE_SET_DATA, function (FormEvent $event) { | $builder->addEventListener(FormEvents::PRE_SET_DATA, function (FormEvent $event) { | ||||
$form = $event->getForm(); | $form = $event->getForm(); | ||||
$merchantConfig = $event->getData(); | $merchantConfig = $event->getData(); | ||||
if ($merchantConfig) { | if ($merchantConfig) { |
<?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, | |||||
]); | |||||
} | |||||
} | |||||
<?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' | |||||
]); | |||||
} | |||||
} |
*/ | */ | ||||
abstract class Address extends AbstractEntity | 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\ManyToOne(targetEntity="Lc\ShopBundle\Context\UserInterface", inversedBy="addresses") | ||||
* @ORM\JoinColumn(nullable=true) | * @ORM\JoinColumn(nullable=true) |
*/ | */ | ||||
abstract class Document extends AbstractDocumentEntity implements 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") | * @ORM\ManyToOne(targetEntity="Lc\ShopBundle\Context\MerchantInterface") | ||||
$this->orderShops = new ArrayCollection(); | $this->orderShops = new ArrayCollection(); | ||||
} | } | ||||
public function __toString() | |||||
{ | |||||
return $this->getReference(); | |||||
} | |||||
public function getMerchant(): ?Merchant | public function getMerchant(): ?Merchant | ||||
{ | { | ||||
return $this->merchant; | return $this->merchant; | ||||
public function getLabel() | 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'; | |||||
} | } | ||||
} | } | ||||
public function getName() | public function getName() | ||||
{ | { | ||||
return strtoupper($this->getLastname()).' '.$this->getFirstname(); | |||||
return $this->getFirstname().' '.strtoupper($this->getLastname()); | |||||
} | } | ||||
public function setEmail($email) | public function setEmail($email) |
/*! | |||||
* 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; | |||||
} |
@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; | |||||
} |
var table = $(".table.datatable-simple").DataTable({ | var table = $(".table.datatable-simple").DataTable({ | ||||
orderCellsTop: true, | orderCellsTop: true, | ||||
pageLength: 50, | |||||
fixedHeader: { | fixedHeader: { | ||||
header: true, | header: true, | ||||
headerOffset: $('.main-header').outerHeight(), | headerOffset: $('.main-header').outerHeight(), |
// 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: {} | |||||
}); | |||||
mixins: [mixinTemplate], | mixins: [mixinTemplate], | ||||
props: ['template', 'keyItem', 'orderProduct', 'editionMode'], | props: ['template', 'keyItem', 'orderProduct', 'editionMode'], | ||||
computed: {}, | 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 () { | mounted: function () { | ||||
log(this.editionMode); | |||||
this.setFields() | this.setFields() | ||||
//this.$el.replace(/__name__/g, this.key); | |||||
}, | }, | ||||
methods: { | methods: { | ||||
init: function () { | |||||
//log(this.$els); | |||||
//log(this.$element); | |||||
}, | |||||
setFields: function () { | setFields: function () { | ||||
var app = this; | var app = this; | ||||
fields = ['fieldQuantity', 'fieldProduct']; | fields = ['fieldQuantity', 'fieldProduct']; | ||||
$(app.$refs[field]).prop('name', name); | $(app.$refs[field]).prop('name', name); | ||||
$(app.$refs[field]).prop('id', id); | $(app.$refs[field]).prop('id', id); | ||||
} | } | ||||
//log(app.$refs[field]); | |||||
}); | }); | ||||
}, | }, | ||||
updateOrderProducts: function () { | updateOrderProducts: function () { | ||||
this.$parent.updateOrderProducts(); | this.$parent.updateOrderProducts(); | ||||
}, | }, | ||||
modalAddRedeliveryOrderProduct:function () { | modalAddRedeliveryOrderProduct:function () { | ||||
log(this.orderProduct.unit); | |||||
$(this.$parent.$refs['addRedeliveryOrderProductFormOrderProduct']).val(this.orderProduct.id); | $(this.$parent.$refs['addRedeliveryOrderProductFormOrderProduct']).val(this.orderProduct.id); | ||||
$(this.$parent.$refs['addRedeliveryOrderProductFormTitle']).val(this.orderProduct.title); | $(this.$parent.$refs['addRedeliveryOrderProductFormTitle']).val(this.orderProduct.title); | ||||
$(this.$parent.$refs['addRedeliveryOrderProductFormUnit']).val(this.orderProduct.unit).trigger('change'); | $(this.$parent.$refs['addRedeliveryOrderProductFormUnit']).val(this.orderProduct.unit).trigger('change'); | ||||
$(this.$parent.$refs['addRedeliveryOrderProductFormQuantityOrder']).val(this.orderProduct.quantityOrder); | $(this.$parent.$refs['addRedeliveryOrderProductFormQuantityOrder']).val(this.orderProduct.quantityOrder); | ||||
$('#modal-add-redelivery-order-product').modal('show'); | $('#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); | |||||
*/ | |||||
} | } | ||||
addRedeliveryOrderProduct: function () { | addRedeliveryOrderProduct: function () { | ||||
this.postForm('#addRedeliveryOrderProductForm', '#modal-add-redelivery-order-product'); | 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) { | postForm: function (formId, modalId) { | ||||
var app = this; | var app = this; | ||||
if(checkFormValidity(formId)) { | if(checkFormValidity(formId)) { |
// 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: {} | |||||
}); | |||||
}); | }); | ||||
}); | }); | ||||
}); | }); | ||||
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: { | |||||
} | |||||
}); | |||||
} |
{ | |||||
"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 | |||||
} |
// | |||||
// 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)); | |||||
} | |||||
} |
// 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; |
// | |||||
// 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; | |||||
} | |||||
} | |||||
} |
// | |||||
// 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); | |||||
} |
// | |||||
// 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%); | |||||
} | |||||
} |
// | |||||
// 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; | |||||
} | |||||
} | |||||
} |
// | |||||
// 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; | |||||
} | |||||
} |
// | |||||
// 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); | |||||
} | |||||
} | |||||
} |
// | |||||
// 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; | |||||
} | |||||
} |
// | |||||
// 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); | |||||
} | |||||
} |
// | |||||
// 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; | |||||
} | |||||
} |
// | |||||
// Component: Elevation | |||||
// | |||||
.elevation-0 { | |||||
box-shadow: none !important; | |||||
} | |||||
// Background colors (colors) | |||||
@each $name, $value in $elevations { | |||||
.elevation-#{$name} { | |||||
box-shadow: $value !important; | |||||
} | |||||
} |
// | |||||
// 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); | |||||
} | |||||
} |
// | |||||
// 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; | |||||
} | |||||
} | |||||
} | |||||
} |
// | |||||
// 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; | |||||
} | |||||
} |
// | |||||
// 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; | |||||
} | |||||
} | |||||
} | |||||
} |
// | |||||
// 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%); | |||||
} | |||||
} |
// | |||||
// 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; | |||||
} |
// | |||||
// 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'; |
// | |||||
// 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; | |||||
} | |||||
} | |||||
} |
// | |||||
// 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; | |||||
} | |||||
} |
// | |||||
// 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; | |||||
} | |||||
} | |||||
} |
// | |||||
// 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; | |||||
} | |||||
} |
// | |||||
// 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; | |||||
} | |||||
} | |||||
} |
// | |||||
// 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) | |||||
} |
// | |||||
// 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; | |||||
} | |||||
} | |||||
} |
// | |||||
// 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; | |||||
} | |||||
} | |||||
} |
// | |||||
// 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); | |||||
} | |||||
} | |||||
} | |||||
} |
// | |||||
// 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}; | |||||
} | |||||
} |
// | |||||
// 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; | |||||
} | |||||
} | |||||
} | |||||
} |
// | |||||
// 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); | |||||
} | |||||
} |
// | |||||
// 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; | |||||
} |
// | |||||
// 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; |
/*! | |||||
* 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'; | |||||
// 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); | |||||
} |
// | |||||
// 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; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
} | |||||
} | |||||
// | |||||
// 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%)); | |||||
} | |||||
} | |||||
} | |||||
} |
// | |||||
// 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); | |||||
} | |||||
} | |||||
} | |||||
} | |||||
// | |||||
// 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%); | |||||
} | |||||
} | |||||
} | |||||
} |
// | |||||
// 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; | |||||
} | |||||
} | |||||
} |
// | |||||
// 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); | |||||
} | |||||
// | |||||
// 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; | |||||
} | |||||
} | |||||
} |
// | |||||
// 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; | |||||
} | |||||
} | |||||
} | |||||
} |
// | |||||
// 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); | |||||
} | |||||
} | |||||
} | |||||
// | |||||
// 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; | |||||
} | |||||
} | |||||
} | |||||
} |
// | |||||
// 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; | |||||
} | |||||
} |
// | |||||
// Pages: Invoice | |||||
// | |||||
.invoice { | |||||
background: $white; | |||||
border: 1px solid $card-border-color; | |||||
position: relative; | |||||
} | |||||
.invoice-title { | |||||
margin-top: 0; | |||||
} |
// | |||||
// 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; | |||||
} |
// | |||||
// 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; | |||||
} |
// | |||||
// 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; | |||||
} |
// | |||||
// 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%; | |||||
} | |||||
} |
// | |||||
// 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; | |||||
} | |||||
} |
// | |||||
// Part: Components | |||||
// | |||||
@import '../forms'; | |||||
@import '../progress-bars'; | |||||
@import '../cards'; | |||||
@import '../modals'; | |||||
@import '../toasts'; | |||||
@import '../buttons'; | |||||
@import '../callout'; | |||||
@import '../alerts'; | |||||
@import '../table'; | |||||
@import '../carousel'; |
// | |||||
// Part: Core | |||||
// | |||||
@import '../layout'; | |||||
@import '../main-header'; | |||||
@import '../brand'; | |||||
@import '../main-sidebar'; | |||||
@import '../sidebar-mini'; | |||||
@import '../control-sidebar'; | |||||
@import '../dropdown'; | |||||
@import '../navs'; |
// | |||||
// Part: Extra Components | |||||
// | |||||
@import '../small-box'; | |||||
@import '../info-box'; | |||||
@import '../timeline'; | |||||
@import '../products'; | |||||
@import '../direct-chat'; | |||||
@import '../users-list'; | |||||
@import '../social-widgets'; |
// | |||||
// Part: Miscellaneous | |||||
// | |||||
@import '../miscellaneous'; | |||||
@import '../print'; | |||||
@import '../text'; | |||||
@import '../elevation'; | |||||
@import '../colors'; |
// | |||||
// 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'; |
// | |||||
// 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'; |
// | |||||
// 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; | |||||
} | |||||
} | |||||
} |
/** | |||||
* 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; | |||||
} | |||||
} |
// | |||||
// 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)); | |||||
} | |||||
} |
// | |||||
// 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}; | |||||
} | |||||
} |
// | |||||
// 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%); | |||||
} | |||||
} |
// | |||||
// 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; | |||||
} | |||||
} |
// | |||||
// 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; | |||||
} |
// | |||||
// 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%); | |||||
} | |||||
} | |||||
} | |||||
} | |||||
} |
// | |||||
// 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); | |||||
} | |||||
// | |||||
// 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); | |||||
} |
// | |||||
// 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; | |||||
} | |||||
} | |||||
} |
// | |||||
// 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; | |||||
} | |||||
} |
// | |||||
// 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)); | |||||
} | |||||
} |
// 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); | |||||
} | |||||
} |
.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; | |||||
} | |||||
} |
// 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; | |||||
} | |||||
} | |||||
} |
// 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%; | |||||
} | |||||
} |
// | |||||
// 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; | |||||
} | |||||
} | |||||
} |
// 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; | |||||
} |
.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; | |||||
} |