a,li,button,input,textarea{ -webkit-transition : all 200ms linear; -moz-transition : all 200ms linear; -o-transition : all 200ms linear; -ms-transition : all 200ms linear; transition : all 200ms linear; } body{ background: #f2f5f6; margin: 0px; font-family: Tahoma, Trebuchet, sans-serif; a{ cursor: pointer; text-decoration: none; } a:hover{ color: #a4400e; } ul{ margin: 0px; padding: 0px; } .row{ margin: 0px; } button{ cursor: pointer; } .btn{ background: #ffffff; color: #ff7920; border: none; outline: none; padding: 8px 12px; margin-left: 0px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; text-transform: uppercase; font-size: 12px; font-weight: bold; } .btn:hover{ background: #a4400e; } .btn:active{ background: #8a3308; box-shadow:inset 0px 2px 0px #712a07; -moz-box-shadow:inset 0px 2px 0px #712a07; -webkit-box-shadow:inset 0px 2px 0px #712a07; } .btn-primary{ background: #ff7920; color: #ffffff; border: none; outline: none; padding: 8px 12px; margin-left: 0px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; text-transform: uppercase; font-size: 12px; font-weight: bold; } .btn-primary:hover{ background: #e35712; } .btn-primary:active{ background: #ce2c00; box-shadow:inset 0px 2px 0px #a92400; -moz-box-shadow:inset 0px 2px 0px #a92400; -webkit-box-shadow:inset 0px 2px 0px #a92400; } .btn-secundary{ background: #e8ecf0; color: #6e757d; border: none; outline: none; padding: 8px 12px; margin-left: 0px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; text-transform: uppercase; font-size: 12px; font-weight: bold; } .btn-secundary:hover{ background: #c5ccd4; color: #6e757d; } .btn-secundary:active{ background: #8e98a2; color: #565f68; box-shadow:inset 0px 2px 0px #747d85; -moz-box-shadow:inset 0px 2px 0px #747d85; -webkit-box-shadow:inset 0px 2px 0px #747d85; } .btn-tertiary{ background: none; outline: none; padding: 12px 16px; font-size: 13px; border: 1px solid #d9dde4; text-transform: uppercase; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; font-weight: bold; color: #30333d; a{ color: #30333d; } } .btn-tertiary:hover{ background: #e7ebee; border: 1px solid #e7ebee; } .btn-tertiary:active{ background: #cfd7dd; border-top: 2px solid #bfc6cc; } input{ border: 2px solid #c5ccd4; outline: none; padding: 10px 10px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } input:focus{ border: 2px solid #ff7920; } .disabled-input{ background: #f3f4f6; border: 2px solid #d9dfe7; } .disabled-input:focus{ background: #f3f4f6; border: 2px solid #d9dfe7; } .success-input{ border: 2px solid #73a53d; } .success-input:focus{ border: 2px solid #73a53d; } .icon-success{ background-image: url('/wp-content/themes/alertas/inc/img/sprite.png'); width: 19px; height: 19px; background-position: 19px -22px; position: absolute; margin-left: -33px; margin-top: 12px; } .error-input{ border: 2px solid #ca1300; } .error-input:focus{ border: 2px solid #ca1300; } .icon-error{ background-image: url(/wp-content/themes/alertas/inc/img/sprite.png); width: 19px; height: 19px; background-position: 19px 0px; position: absolute; margin-left: -33px; margin-top: 12px; } .text-input-error{ font-size: 12px; color: #ca1300; font-weight: bold; } .notify{ max-width: 345px; background: #f0f4f5; padding: 12px 18px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; font-size: 12px; font-weight: bold; } .error-notify{ border-top: 3px solid #ca1300; color: #ca1300; a{ color: #7b828b; border-bottom: 1px solid #d7e1e9; padding-bottom: 2px; } } .success-notify{ border-top: 3px solid #73a53d; color: #73a53d; } .info-notify{ border-top: 3px solid #3a8edb; color: #3a8edb; } } body .wf-active { font-family: 'Open Sans', Tahoma, Trebuchet, sans-serif !important; } body .wf-inactive { font-family: Tahoma, Trebuchet, sans-serif !important; } .container{ max-width: 960px; padding: 0px; margin-bottom: 85px; header{ background: #ff7920; font-weight: bold; .logo{ background: #f2f5f6; padding: 15px 45px; } .nav{ padding: 27px 40px; .nav-left{ padding-top: 6px; margin: 0px; padding-left: 0px; li.nav-button{ color: #993d0e; text-decoration: none; margin-right: 20px; text-transform: uppercase; font-size: 14px; list-style: none; float: left; cursor: pointer; a{ color: #993d0e; &:hover{ color: #6D2F10; } } } } li.nav-button.active{ color : #ffffff; padding-bottom: 8px; border-bottom: 2px solid #ffffff; a{ color : #ffffff; &:hover{ color: #FFF; } } } .nav-right{ .icon-search{ background-image: url("/wp-content/themes/alertas/inc/img/sprite.png"); width: 13px; height: 13px; background-repeat: no-repeat; background-position: 0px 0px; position: absolute; margin: 11px 12px; } .search{ width: 136px; background: #a4400e; color: #ffffff; outline: none; border: none; padding: 8px 0px 8px 36px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; font-size: 12px; font-weight: bold; .mr(); } .login{ a { color: #FF7920 !important; } .mr(); } a.suscribe{ color: #a4400e; text-transform: uppercase; font-size: 12px; font-weight: bold; text-decoration: none; } .suscribe:hover{ color: #ffffff; } } } } footer{ background: #2b2c31; /*padding: 55px 45px;*/ .copyright{ font-size: 13px; font-weight: bold; color: #ffffff; padding: 32px 0px; .text-copy{ font-size: 10px; color: #888d9b; padding-left: 58px; padding-top: 2px; } } .social{ padding: 32px 0px; .row{ .high-social{ font-size: 18px; color: #888d9b; padding: 11px 0px; text-align: center; .icon-social{ display: block; margin-left: auto; margin-right: auto; margin-bottom: 15px; } .icon-tw{ background-image: url("/inc/img/sprite.png"); background-repeat: no-repeat; width: 38px; height: 38px; background-position: -46px -15px; } .icon-fb{ background-image: url("/inc/img/sprite.png"); background-repeat: no-repeat; width: 38px; height: 38px; background-position: 0px -15px; } .number{ font-weight: bold; color: #ffffff; } } .little-social{ padding: 0px; padding-left: 50px; .lt-obj{ padding: 0px; margin-bottom: 15px; .icon-social{ background-image: url("/inc/img/sprite.png"); background-repeat: no-repeat; float: left; margin-right: 10px; margin-top: 4px; } .icon-flickr{ width: 17px; height: 10px; background-position: -36px 0px; } .icon-youtube{ width: 17px; height: 12px; background-position: -56px 0px; } .icon-rrs{ width: 17px; height: 12px; background-position: -77px 0px; } .name-social{ font-size: 13px; font-weight: bold; color: #888d9b; } } } } } } } .all-news{ margin: 0px; padding: 38px 30px; .col-lg-4{ padding: 0px; height: 365px; } article{ padding: 0px; margin-bottom: 15px; margin-right: 7.5px; margin-left: 7.5px; .mask{ float: left; width: 100%; height: 185px; /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC44OSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.89) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.89))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.89) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.89) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.89) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.89) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#e3000000',GradientType=0 ); /* IE6-8 */ } .cover{ height: 185px; -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-repeat: no-repeat; } .info-article{ padding: 24px; bottom: 24px; .category{ background: #ffffff; color: #222833; float: left; font-weight: bold; font-size: 11px; text-transform: uppercase; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; position: absolute; top: 5px; left: 13px; .private{ background: #b33030; float: left; padding: 8px 9px; -webkit-border-top-left-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-bottomleft: 3px; border-top-left-radius: 3px; border-bottom-left-radius: 3px; .icon-private{ /*background-image: url(/wp-content/themes/alertas/inc/img/sprite.png);*/ width: 11px; height: 14px; /*background-position: -375px 0px;*/ float: left; } } .name-category{ float: left; padding: 7px 9px; } } .title{ position: absolute; font-weight: 600; font-size: 15px; color: #ffffff; padding-top: 85px; padding-right: 25px; text-shadow: 1px 0px 3px rgba(0, 0, 0, 0.2); } } .description{ font-size: 15px; color: #8d959f; background: #e7ebee; min-height: 145px; max-height: 145px; padding-bottom: 15px; padding-left: 15px; padding-right: 15px; padding-top: 5px; -webkit-border-bottom-right-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } } .col-lg-12{ margin-top: 15px; padding: 0px; text-align: center; } } .title-header{ background: #ff7920; font-size: 26px; font-weight: lighter; color: #ffffff; padding: 30px 45px 40px 45px; text-transform: uppercase; } .subnav{ text-align: center; padding: 28px 10px; border-bottom: 1px solid #eef2f6; .box-filters{ .filters{ font-size: 14px; color: #a2aab4; padding: 9px 20px; .filter{ text-transform: uppercase; font-size: 13px; color: #30333d; font-weight: bold; margin-left: 6px; outline: none; cursor: pointer; .icon-drop{ background-image: url("/inc/img/sprite.png"); width: 9px; height: 6px; background-repeat: no-repeat; background-position: 0px 0px; } } } .filters:last-child{ border-left: 1px solid #eef2f6; } } } .notice-photo{ width: 45px; height: 45px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; float: left; margin-right: 8px; } .max-width{ max-width: 164px; a{ font-weight: 600 !important; } } .mentions{ padding: 0px; .desc{ .cover{ width: 100%; height: 185px; background-repeat: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .desc-article{ font-size: 12px; color: #818c9a; background: #F3F3F3; padding: 10px; margin-top: -2px; } } .mentions{ margin: 25px 0px; font-weight: bold; .title{ font-size: 12px; color: #222833; text-transform: uppercase; text-align: center; } .border{ width: 157px; border-top: 2px solid #000000; display: block; margin-left: auto; margin-right: auto; margin-top: 15px; margin-bottom: 25px; } .mention{ margin-bottom: 15px; .photo-mention{ float: left; width: 55px; height: 55px; background-repeat: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; margin-right: 12px; } .name{ font-size: 14px; color: #222833; padding-top: 10px; a{ color: #222833; } } .role{ text-transform: uppercase; font-size: 11px; color: #ff7920; } } } } .info-project{ margin-bottom: 20px; text-transform: uppercase; .col-lg-6{ padding: 0px; .info{ font-size: 11px; font-weight: bold; color: #222833; padding-bottom: 10px; .text{ color: #a2a9b8; padding-bottom: 2px; } a{ color: #222833; } ul{ li{ float: left; text-decoration: none; color: #222833; } } .icon-text-project{ background-image: url(/wp-content/themes/alertas/inc/img/sprite.png); width: 13px; height: 14px; background-position: -156px 0px; float: left; margin-left: 7px; } } } } .categories{ font-size: 11px; color: #b8bdca; font-weight: bold; text-transform: uppercase; padding-bottom: 35px; padding-left: 0px; padding-right: 0px; .category{ list-style: none; float: left; a{ color: #b8bdca; text-decoration: none; &:hover{ color: #131618; } } &.active{ a{ color: #ff7920; } } } .arrow-right{ background-image: url(/wp-content/themes/alertas/inc/img/sprite.png); width: 6px; height: 12px; background-position: -95px 0px; float: left; margin: 1px 8px 0px 8px; } } .relations{ padding: 0px; margin-bottom: 20px; .title{ color: #222833; font-size: 12px; font-weight: bold; text-align: center; text-transform: uppercase; } .border{ width: 98px; border-top: 2px solid #000000; display: block; margin-left: auto; margin-right: auto; margin-top: 15px; margin-bottom: 25px; } ul{ li{ list-style: none; a{ float: left; text-decoration: none; color: #ff7920; font-size: 13px; font-weight: bold; margin-bottom: 13px; &:hover{ color:#C76525; } } } } .icon-arrow-right{ background-image: url(/wp-content/themes/alertas/inc/img/sprite.png); width: 6px; height: 12px; background-position: -104px 0px; margin-left: 5px; margin-bottom: -2px; display: inline-block; } } .relations-projects{ li{ float: left; list-style: none; color: #ff7920; font-size: 13px; font-weight: bold; cursor: pointer; } .icon-arrow-right{ background-image: url(/wp-content/themes/alertas/inc/img/sprite.png); width: 6px; height: 12px; background-position: -104px 0px; margin-left: 8px; margin-top: 3px; } } @media (max-width: 1200px) { .container{ footer{ padding: 55px 25px; .copyright{ float: none !important; text-align: center; .text-copy{ padding: 0px; margin-top: 5px; } } .social{ display: none; } } } } @media (max-width: 870px) { .container{ header{ .nav{ padding: 27px 10px 27px 10px; .nav-left{ float: none !important; display: table; margin: 0px auto; li.nav-button{ font-size: 13px; margin-right: 25px; } } .nav-right{ float: none !important; display: table; margin: 0px auto; margin-top: 15px; } } } .content-home{ .news{ .highlight{ .info-article{ padding: 0px 25px; .title{ font-size: 20px; } .description{ font-size: 14px; } } } } } footer{ padding: 55px 25px; .copyright{ float: none !important; text-align: center; .text-copy{ padding: 0px; margin-top: 5px; } } .social{ display: none; } } } } @media (max-width: 770px) { .container{ .content-home{ .news{ .highlight{ border-right: none; .info-article{ padding: 0px 25px; .title{ font-size: 20px; } .description{ font-size: 14px; } } } .standar{ height: 170px; .mask{ height: 170px; } } } } .content-profile{ .info{ padding: 0px 25px 5px 25px; margin-bottom: 10px; } .profile{ padding: 0px; li.tab{ padding-right: 15px !important; } .tab:last-child{ padding-right: 0px !important; } .law{ float: none; } } } } } @media (min-width: 0px)and(max-width: 630px) { .container{ header{ .nav { padding: 27px 10px 27px 10px; .nav-left{ float: none !important; display: table; margin: 0px auto; li.nav-button{ font-size: 11px; margin-right: 10px; } } .nav-right{ float: none !important; display: table; margin: 0px auto; margin-top: 15px; .search{ margin-right: 12px; } .login{ margin-right: 12px; } } } } .content-home{ .news{ .highlight{ border-right: none; .info-article{ padding: 0px 25px; .title{ font-size: 20px; } .description{ font-size: 14px; } } } .standar{ height: 170px; .mask{ height: 170px; } } } } .content-article, .content-project, .content-profile{ padding: 35px 15px 55px 15px; article{ padding: 0px 15px 30px 15px; } } .content-profile{ .info{ padding: 0px 25px 5px 25px; margin-bottom: 10px; } .profile{ padding: 0px; li.tab{ padding-right: 15px !important; } .tab:last-child{ padding-right: 0px !important; } .law{ float: none; } } } .subnav{ .box-filters{ .filters{ font-size: 11px; padding: 9px 0px; a{ font-size: 11px; } } .filters:last-child{ border-left: none; } } } footer{ padding: 55px 25px; .copyright{ float: none !important; text-align: center; .text-copy{ padding: 0px; margin-top: 5px; } } .social{ display: none; } } } } .about-us{ padding: 30px 25px 0px 25px; } .pull-left{ float: left !important; } .pull-right{ float: right !important; } .mr{ margin-right: 15px; } .mr-none{ margin-right: 0px !important; } ::-webkit-input-placeholder { color: #c85f31; } :-moz-placeholder { color: #c85f31; } ::-moz-placeholder { color: #c85f31; } :-ms-input-placeholder { color: #c85f31; } .tooltip { display: inline; position: relative; } .tooltip:hover:after { bottom: 36px; color: #FFF !important; content: attr(title); left: 0%; position: absolute; z-index: 98; background: #000000; border-radius: 5px; color: #FFF; font-size: 11px; padding: 5px 10px; text-align: center; text-shadow: 1px 1px 1px #000; width: 180px; } .tooltip:hover:before { color:#6b737a !important; bottom: 30px; content: ""; left: 27%; position: absolute; z-index: 99; border: solid; border-color: #000000 transparent; border-width: 6px 6px 0 6px; } .fadeIn{ animation : fadein 1s; -moz-animation : fadein 1s; -webkit-animation : fadein 1s; -o-animation : fadein 1s } @keyframes fadein{ from { opacity:0 } to { opacity:1 } } @-moz-keyframes fadein{ from { opacity:0 } to { opacity:1 } } @-webkit-keyframes fadein{ from { opacity:0 } to { opacity:1 } } @-o-keyframes fadein{ from { opacity:0 } to { opacity:1 } } .icon-dropdown{ background-image: url("/inc/img/sprite.png"); background-repeat: no-repeat; margin-right: 10px; margin-top: 4px; width: 15px; height: 11px; background-position: -17px 0px; display: inline-block; margin-left: 5px; } // Dividers (basically an hr) within dropdowns and nav lists .nav-divider(@color: #e5e5e5) { height: 1px; margin: ((@line-height-computed / 2) - 1) 0; overflow: hidden; background-color: @color; } .reset-filter() { filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)")); } @screen-sm: 768px; @screen-tablet: @screen-sm; @grid-float-breakpoint: @screen-tablet; @font-family-sans-serif: "Avenir Regular", sans-serif; @font-family-serif: Georgia, "Times New Roman", Times, serif; @font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace; @font-family-base: @font-family-sans-serif; @font-size-base: 14px; @font-size-large: ceil(@font-size-base * 1.25); // ~18px @font-size-small: ceil(@font-size-base * 0.85); // ~12px @line-height-base: 1.428571429; // 20/14 @line-height-computed: floor(@font-size-base * @line-height-base); // ~20px @headings-font-family: @font-family-base; @headings-font-weight: 500; @headings-line-height: 1.1; @gray-dark: lighten(#000, 20%); // #333 @dropdown-link-active-bg: #428bca; @gray-light: #428bca; @caret-width-base: 4px; @caret-width-large: 5px; @border-radius-base: 4px; .box-shadow(@shadow) { -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1 box-shadow: @shadow; } @zindex-dropdown: 1000; @font-size-base: 14px; @dropdown-bg: #fff; @dropdown-border: rgba(0,0,0,.15); @dropdown-fallback-border: #ccc; @dropdown-divider-bg: #e5e5e5; @dropdown-link-active-color: #fff; @dropdown-link-color: @gray-dark; @dropdown-link-hover-color: #fff; @dropdown-link-hover-bg: @dropdown-link-active-bg; @dropdown-link-disabled-color: @gray-light; @dropdown-header-color: @gray-light; @dropdown-caret-color: #000; // // Dropdown menus // -------------------------------------------------- // Dropdown arrow/caret .caret { display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle; border-top: @caret-width-base solid; border-right: @caret-width-base solid transparent; border-left: @caret-width-base solid transparent; } // The dropdown wrapper (div) .dropdown { position: relative; } // Prevent the focus on the dropdown toggle when closing dropdowns .dropdown-toggle:focus { outline: 0; } // The dropdown menu (ul) .dropdown-menu { position : absolute; z-index : @zindex-dropdown; display : none; // none by default, but block on "open" of the menu background : #e2e8ea; color : #5e6570; border : none; box-shadow : none; padding : 10px; margin : 0px; min-width : 200px; font-size : 11px; text-transform : uppercase; font-weight : bold; list-style : none; text-align : left; cursor : pointer; border-radius : 4px; -webkit-border-radius : 4px; -moz-border-radius : 4px; margin-top : 20px; box-shadow : 0px 1px 3px rgba(0, 0, 0, 0.31); -webkit-box-shadow : 0px 1px 3px rgba(0, 0, 0, 0.31); -moz-box-shadow : 0px 1px 3px rgba(0, 0, 0, 0.31); .option-dropdown{ padding: 5px; } .option-dropdown:hover{ background: #ffffff; } // Aligns the dropdown menu to right // // Deprecated as of 3.1 in favor of `.dropdown-menu-[dir]` &.pull-right { right: 0; left: auto; } // Dividers (basically an hr) within the dropdown .divider { .nav-divider(@dropdown-divider-bg); } // Links within the dropdown menu > li > a { display: block; padding: 3px 20px; clear: both; font-weight: normal; line-height: @line-height-base; color: @dropdown-link-color; white-space: nowrap; // prevent links from randomly breaking onto new lines } } .dropdown-menu .triangle { width: 0; height: 0; position: absolute; border-left: 25px solid transparent; border-right: 25px solid transparent; border-bottom: 15px solid #e2e8ea; top: -15px; left: 50%; margin-left: -25px; } // Hover/Focus state .dropdown-menu > li > a { &:hover, &:focus { text-decoration: none; color: @dropdown-link-hover-color; background-color: @dropdown-link-hover-bg; } } // Active state .dropdown-menu > .active > a { &, &:hover, &:focus { color: @dropdown-link-active-color; text-decoration: none; outline: 0; background-color: @dropdown-link-active-bg; } } // Disabled state // // Gray out text and ensure the hover/focus state remains gray .dropdown-menu > .disabled > a { &, &:hover, &:focus { color: @dropdown-link-disabled-color; } } // Nuke hover/focus effects .dropdown-menu > .disabled > a { &:hover, &:focus { text-decoration: none; background-color: transparent; background-image: none; // Remove CSS gradient .reset-filter(); cursor: not-allowed; } } // Open state for the dropdown .open { // Show the menu > .dropdown-menu { display: block; } // Remove the outline when :focus is triggered > a { outline: 0; } } // Menu positioning // // Add extra class to `.dropdown-menu` to flip the alignment of the dropdown // menu with the parent. .dropdown-menu-right { left: auto; // Reset the default from `.dropdown-menu` right: 0; } // With v3, we enabled auto-flipping if you have a dropdown within a right // aligned nav component. To enable the undoing of that, we provide an override // to restore the default dropdown menu alignment. // // This is only for left-aligning a dropdown menu within a `.navbar-right` or // `.pull-right` nav component. .dropdown-menu-left { left: 0; right: auto; } // Dropdown section headers .dropdown-header { display: block; padding: 3px 20px; font-size: @font-size-small; line-height: @line-height-base; color: @dropdown-header-color; } // Backdrop to catch body clicks on mobile, etc. .dropdown-backdrop { position: fixed; left: 0; right: 0; bottom: 0; top: 0; z-index: (@zindex-dropdown - 10); } // Right aligned dropdowns .pull-right > .dropdown-menu { right: 0; left: auto; } // Allow for dropdowns to go bottom up (aka, dropup-menu) // // Just add .dropup after the standard .dropdown class and you're set, bro. // TODO: abstract this so that the navbar fixed styles are not placed here? .dropup, .navbar-fixed-bottom .dropdown { // Reverse the caret .caret { border-top: 0; border-bottom: @caret-width-base solid; content: ""; } // Different positioning for bottom up menu .dropdown-menu { top: auto; bottom: 100%; margin-bottom: 1px; } } // Component alignment // // Reiterate per navbar.less and the modified component alignment there. @media (min-width: @grid-float-breakpoint) { .navbar-right { .dropdown-menu { .dropdown-menu-right(); } // Necessary for overrides of the default right aligned menu. // Will remove come v4 in all likelihood. .dropdown-menu-left { .dropdown-menu-left(); } } }