/******************************************** buttons.scss **************************************************/
/* PRIMARY BUTTON*/
.btn.ot_primaryButton {
color: #ffffff !important;
background-color: #008cff !important;
border-color: #008cff !important;
}
.btn.ot_primaryButton:hover,
.btn.ot_primaryButton:focus,
.btn.ot_primaryButton:active,
.btn.ot_primaryButton.active,
.btn.ot_primaryButton.open > .dropdown-toggle{
background-color: #0061b2 !important;
border-color: #0061b2 !important;
}
.btn.ot_primaryButton:active,
.btn.ot_primaryButton.active,
.btn.ot_primaryButton.open > .dropdown-toggle {
background-image: none;
}
.btn.ot_primaryButton.disabled,
.btn.ot_primaryButton:disabled,
.btn.ot_primaryButton fieldset:disabled {
background-color: #008cff;
border-color: #008cff;
}
.btn.ot_primaryButton:disabled,
.btn.ot_primaryButton.isDisabled,
.btn.ot_primaryButton:disabled:hover,
.btn.ot_primaryButton.isDisabled:hover {
background-color: #777 !default;
border-color: #777 !default;
}
.btn.ot_primaryButton .ot_svg_fill {
fill: #ffffff ;
}
.btn-group .btn.ot_primaryButton:not(.active),
.btn-group .btn.ot_primaryButton:not(.active):hover,
.btn.ot_primaryButton.isDisabled {
background-color: rgba(0,140,255,0.3) !important;
border-color: rgba(0,140,255,0.3) !important;
color: #ffffff !important;
}
.link-primary {
color: #008cff;
}
.link-primary:hover {
color: #0061b2;
}
/* SECONDARY BUTTON*/
.btn.ot_secondaryButton {
color: #008cff !important;
border-color: #008cff !important;
}
.btn.ot_secondaryButton:hover,
.btn.ot_secondaryButton:focus,
.btn.ot_secondaryButton:active,
.btn.ot_secondaryButton.active {
background-color: #008cff !important;
color: #ffffff !important;
border-color: #008cff !important;
}
.btn.ot_secondaryButton .ot_svg_fill {
fill: #008cff;
}
.btn.ot_secondaryButton:hover .ot_svg_fill,
.btn.ot_secondaryButton:active .ot_svg_fill,
.btn.ot_secondaryButton.active .ot_svg_fill {
fill: #ffffff;
}
/* MENU BUTTON*/
@media (min-width: 768px) {
.btn.ot_menuButton {
color: #ffffff !important;
}
}
@media (min-width: 768px) {
.btn.ot_menuButton .ot_svg_fill {
fill: #ffffff !important;
}
}
/* NAVBAR BUTTON*/
.btn.ot_navbarButton {
color: #ffffff !important;
opacity: 0.8;
}
@media (max-width: 767px) {
.btn.ot_navbarButton {
padding: 0px 10px !important;
}
.btn.ot_navbarButton_cart {
padding-left: 0px !important;
}
}
.btn.ot_navbarButton:hover,
.btn.ot_navbarButton:active,
.btn.ot_navbarButton.active {
/*color: #222222 !important;*/
opacity: 1;
border-bottom: none !important;
}
.btn.ot_navbarButton .ot_svg_fill {
fill: #ffffff !important;
}
.btn.ot_navbarButton .ot_svg_fill:hover{
/*fill: #222222 !important;*/
}
.btn.ot_iconButton .ot_svg_fill_primary {
fill: #223676 !important;
}
.btn.ot_navbarButton_cart .ot_svg_fill {
fill: #ffffff !important;
opacity: 0.8;
}
.btn.ot_navbarButton_cart .ot_svg_fill:hover{
opacity: 1;
}
/* OPTION BUTTON*/
.btn.ot_optionButton.active,
.btn.ot_optionButton:hover,
.btn.ot_optionButton:active {
border-color: #008cff;
}
.btn.ot_optionButton.active,
.btn.ot_optionButton:hover,
.btn.ot_optionButton:active {
border-color: #008cff !important;
}
/* BUTTON GROUP */
/* these rules are needed b/c all button corners' radius is set to 0
with the bootstrap override variable
*/
.btn-group .btn.ot_primaryButton:first-child {
border-bottom-left-radius: 3px !important;
border-top-left-radius: 3px !important;
}
.btn-group .btn.ot_primaryButton:last-child {
border-bottom-right-radius: 3px !important;
border-top-right-radius: 3px !important;
}
.btn-group .ot_primaryButton.active:not(.active) {
color: #ffffff !important;
}
.btn-group .ot_primaryButton.active:not(.active) .ot_svg_fill {
fill: #ffffff;
}
.btn-group .ot_primaryButton.active:not(.active):hover {
background-color: rgba(#008cff,0.3) !important;
border-color: rgba(#008cff,0.3) !important;
color: #ffffff !important;
}
.btn-group .ot_primaryButton.active:not(.active):hover .ot_svg_fill {
fill: #ffffff;
}
/******************************************** navbar.scss **************************************************/
.ot_ci_navbar {
color: #ffffff !important;
background-color: #223676 !important;
}
.ot_ci_navbar .navbar-brand ,
.ot_ci_navbar .navbar-brand:hover,
.ot_ci_navbar .navbar-brand:focus {
background-color: transparent !important;
color: #ffffff !important;
outline: none !important;
}
@media (min-width: 992px ) {
.ot_navbarMenu {
/*border-top: 4px solid #ffffff !important;*/
display: flex;
flex-basis: $container-width;
width: 100%;
justify-content: space-between;
background-color: transparent !important;
color: #ffffff !important;
}
.ot_navbarMenu_cart {
border-top: 4px solid #ffffff;
background-color: #223676;
color: #ffffff;
}
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.ot_navbarMenu {
flex-basis: 700px !important;
}
}
@media (max-width: 991px) {
.ot_navbarMenu {
flex-direction: column;
background-color: white;
}
.ot_navbarMenu_cart {
border-top: 4px solid black;
background-color: white;
color: black;
}
}
.ot_ci_countBadge {
background-color: #ffffff;
color: #223676;
border-color: #223676;
}
/******************************************** footer.scss **************************************************/
.ot_ci_footer {
background: #223676;
color: #ffffff;
}
.ot_ci_footer a {
color: #ffffff;
}
.ot_ci_navbar_color {
color: #223676;
}
/******************************************** customized.scss **********************************************/
/*.ot_prodImageContainer.default {*/
/*background-color: #008cff !important;*/
/*}*/
/*.ot_prodImageContainer.default .ot_svg_fill {*/
/*fill: #ffffff;*/
/*}*/
.ot_ci_deliveryMethodSelect .ot_ci_deliveryMethod {
background-color: #008cff !important;
}
.ot_perfSelectorSliderContainer {
border-color: #ffffff !important;
}
.ot_ci_customized,
.ot_checkoutSectionTitle {
font-family: "Helvetica, sans-serif" !important;
color: #223676 !important;
}
.ot_ci_customized,
.ot_checkoutSectionTitle span{
font-family: "Helvetica, sans-serif" !important;
color: #223676 !important;
}
.ot_ci_offsetBlock {
background-color: rgba(0,140,255,0.1);
}
.ot_calendarDay.selected , .ot_calendarDay:hover {
color: #ffffff !important;
background-color: #223676 !important;
}
.ot_calendarDay.selected a, .ot_calendarDay.default a, .ot_calendarDay:hover a {
color: #ffffff !important;
}
.ot_calendar_modalDate {
background-color: #223676 !important;
}
.calendarProdList .fade {
background-image: linear-gradient(to bottom,rgba(255,255,255, 0), #223676 90%) !important;
}
.ot_tabNav .bar {
background-color: #008cff !important;
}
.ot_tab.active > * ,
.ot_tab:hover > * {
color: $primary-color;
}
.ot_tab.active > .ot_svg_fill ,
.ot_tab:hover > .ot_svg_fill {
fill: $primary-color;
}