/******************************************** 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: #000000 !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: #000000 !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: #000000; 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: #000000; border-color: #000000; } /******************************************** footer.scss **************************************************/ .ot_ci_footer { background: #000000; color: #ffffff; } .ot_ci_footer a { color: #ffffff; } .ot_ci_navbar_color { color: #000000; } /******************************************** 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: #000000 !important; } .ot_ci_customized, .ot_checkoutSectionTitle span{ font-family: "Helvetica, sans-serif" !important; color: #000000 !important; } .ot_ci_offsetBlock { background-color: rgba(0,140,255,0.1); } .ot_calendarDay.selected , .ot_calendarDay:hover { color: #ffffff !important; background-color: #000000 !important; } .ot_calendarDay.selected a, .ot_calendarDay.default a, .ot_calendarDay:hover a { color: #ffffff !important; } .ot_calendar_modalDate { background-color: #000000 !important; } .calendarProdList .fade { background-image: linear-gradient(to bottom,rgba(255,255,255, 0), #000000 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; }