/* See `.combobox-clear-button` for an example of this mixin in use */ @mixin icon($icon) { @extend .fa; @extend .fa-#{$icon}:before; } /* Main page layout: header, content, footer */ /* body { background: $body-background; color: $black; font-family: $font-family; font-size: 14px; margin: 0; } h1, h2, h3, h4, h5 { font-family: $header-font; font-style: normal; font-weight: lighter; text-rendering: optimizelegibility; color: $primary-color; margin-top: 10px; margin-bottom: 15px; } h1 { width: 65%; font-size: 40px; margin-left: 15px; } h2 { font-size: 26px; } h3 { font-size: 20px; } h4 { font-size: 18px; } h5 { font-size: 16px; } hr { color: $primary-color; border-color: $primary-color; background-color: $primary-color; } .hidden { visibility: hidden; } .inline { display: inline-block; } .centered { text-align: center; } .left-indent { margin-left: 15px; } .right-indent { margin-right: 15px; } .top-indent { margin-top: 25px; } .highlight-color-button { background-color: $highlight-background-color; color: $highlight-color; } .right { position: absolute; top: 15px; right: 10px; } .bordered { border: 1px solid $primary-color; border-radius: 3px; padding: 15px 10px; } ul.no-bullets { list-style: none; padding-left: 0; } */ /* This class will ensure that the item is hidden for sighted users and that it does not take up space */ /* For example: <h2 aria-hidden="false" class="aria-only"><%= _('Create account') %></h2> */ /* will be read on a screen reader for a tabbed section that opens but will be hidden visually */ /* .aria-only { visibility: hidden; display: inline; height: 0; width: 0; } .fa { font-size: 18px; color: $black; } div.divider { height: 0; width: 100%; border-bottom: 1px solid $primary-color; } */ /* General dropdown menu styling */ /* .caret { display: inline-block; vertical-align: middle; border-right: 4px solid transparent; border-left: 4px solid transparent; border-top: 4px solid $primary-color; border-bottom: $primary-color; width: 0; height: 0; } ul.dropdown-list { position: absolute; background-color: $medium-grey; color: $white; border-radius: 3px; padding: 10px 25px; text-align: left; z-index: 2; top: 0; right: 5px; margin-top: -5px; li { list-style: none; margin-bottom: 10px; padding: 6px 15px; a { color: $white; } } li.active, li:hover, li:focus { background-color: $dark-grey; border-radius: 3px; } } .dropdown-large { width: 200px; } .dropdown-medium { width: 150px; } .dropdown-small { width: 100px; } [data-toggle='popover']{ position: relative; .fa { font-size: 18px; } } div.popover-message { position: absolute; font-family: $font-family; font-size: 14px; color: $tooltip-color; background: $tooltip-background; border-radius: 3px; padding: 15px 20px; z-index: 10; a, a:hover, a:visited, a:focus, h1, h2, h3, h4, h5 { color: $white; } } .popover-left { top: -20px; right: 0; } .popover-right { left: 0; } .popover-large { width: 350px; } .popover-medium { width: 250px; } .popover-small { width: 150px; } div.tooltip-message { position: absolute; top: 15px; width: 300px; background: $tooltip-background; color: $tooltip-color; padding: 6px 10px; border-radius: 3px; z-index: 9; } */ /* General Anchor and Button styling */ /* a, a:link, a:active, a:visited, a:hover, a:focus, button.button-as-link, button.button-as-link:hover, button.button-as-link:focus { color: $primary-color; } button, button:hover, button:focus, input[type="file"], input[type="file"]:hover, input[type="file"]:focus, input[type="submit"], input[type="submit"]:hover, input[type="submit"]:focus, a.link-as-button, a.link-as-button:link, a.link-as-button:active, a.link-as-button:visited, a.link-as-button:hover, a.link-as-button:focus { background-color: $primary-color; color: $white; font-size: 14px; text-decoration: none; padding: 6px 10px; border: 1px solid $light-grey; border-radius: 5px; } */ /* Basic page layout */ /* =================================================================================== */ /* div.roadmap { position: relative; width: 90%; margin: 0 auto; */ /* HEADER SECTION */ /* ----------------------------------------------------- */ /* header { background: $header-background; color: $header-text-color; height: $header-height; text-align: left; .header-left, .header-right, .signin-signout-menu { display: inline-block; } .header-left { height: $header-height; .home-logo { margin-right: 10px; margin-left: $header-logo-left-margin; vertical-align: middle; img { width: $header-logo-width; } } .roadmap-logo { margin-top: $header-logo-top-margin; } } .header-right { width: 80%; vertical-align: bottom; .org-branding { position: relative; display: inline-block; height: 60%; a { color: $header-text-color; } .header-org-banner-text { display: inline-block; width: 80%; vertical-align: bottom; } } .main-nav { height: 40%; margin-top: 5px; ul.nav { position: relative; padding-left: 0; margin: 0; li { position: relative; display: inline-block; color: $header-text-color; background-color: $primary-color; border: 1px solid $black; padding: 6px 10px; margin-bottom: -1px; font-size: 14px; list-style: none; a, a:visited, a:active, a:link, a:hover { color: $white; text-decoration: none; font-weight: bold; line-height: 20px; } } li.highlight-color-button { color: $highlight-color; background-color: $highlight-background-color; } li.active, ul li:hover { color: $primary-color; background-color: $white; a, a:visited, a:active, a:link, a:hover { color: $primary-color; text-decoration: none; font-weight: bold; line-height: 20px; } } #explore { padding-right: 15px; .caret { border-top: 4px solid $header-text-color; border-bottom: $header-text-color; } } #explore-dropdown { position: absolute; top: 12px; left: 5px; width: 150px; li { display: block; background-color: $medium-grey; border: none; } li.active, li:hover, li:focus { background-color: $dark-grey; border-radius: 3px; a { width: 100%; color: $white; } } } } } } .signin-signout-menu { position: absolute; top: 5px; right: 10px; color: $header-text-color; margin-top: 5px; a { color: $header-text-color; font-size: 14px; text-decoration: none; } a.link-as-button { color: $header-text-color; background-color: $header-background; border: 1px solid $black; } ul li a { color: $white; } .caret { border-top-color: $header-text-color; border-bottom-color: $header-text-color; } } } */ /* INFORMATION/ERROR MESSAGE BOX */ /* div.roadmap-info-box, div.roadmap-alert-box { position: relative; float: right; margin-top: 10px; padding: 8px 30px 10px 60px; border-radius: 5px; vertical-align: middle; width: auto; max-width: 65%; span { } .fa { position: absolute; top: 7px; left: 7px; background: transparent; font-size: 18px; margin-right: 15px; z-index: 99; } } div.roadmap-info-box { color: $notice-color; background: $notice-background; .fa { color: $notice-color; } } div.roadmap-alert-box { color: $error-color; background: $error-background; .fa { color: $error-color; } } */ /* MAIN CONTENT */ /* ----------------------------------------------------- */ /* main { clear: both; div.page { position: relative; width: 100%; background: $body-background; border-radius: 3px; div.content { background-color: $white; border-radius: 3px; padding: 10px 15px 25px 15px; div.column-left { display: inline-block; width: 55%; } div.column-right { display: inline-block; width: 40%; height: auto; margin-left: 35px; vertical-align: top; } dl { width: 85%; margin: 0 auto; dt { display: inline-block; width: 25%; text-align: right; margin-right: 10px; margin-top: 10px; font-weight: bold; } dt:not(.dl-buttons):after { content: " :"; } dd { display: inline-block; width: 65%; } dd:after { display: block; content: " "; margin-bottom: 10px; } dt.dl-buttons { margin-top: 25px; } } } } } } */