/* This file contains overrides to the core Bootstrap 3.x styling */ /* -------------------------------------------------------------- */ $black: #000; $white: #FFF; $red: #b94a48; $grey: #4F5253; $gold: #c09853; $highlight-color: $black; $highlight-background-color: #F36F24; /**** assign the red color to text ****/ .red { color: $red; } /**** font configuration ****/ @font-face { font-family: 'GillSansLight'; src: font-url('GillSansLight.ttf') format('truetype'); font-weight: normal; } /* Font Smoothing in Webkit /* body { -webkit-font-smoothing: antialiased; } /* ADD a BORDER */ .bordered { border: 1px solid $grey; padding: 5px 20px 15px 20px; } /* TABLE STYLING */ .table { border: 1px solid $grey; } .table thead > tr > th { border-bottom: none; } .table thead > tr > th, .table tbody > tr > th, .table tfoot > tr > th, .table thead > tr > td, .table tbody > tr > td, .table tfoot > tr > td { border: 1px solid $grey; } thead th { background-color: $grey; color: $white; } thead th.table-scope { background-color: $white; font-weight: normal; a { color: $grey; padding: 2px 15px 2px 2px; } } .table-hover tbody tr:hover td, .table-hover tbody tr:hover th { background-color: #CCC; } th.date-column { min-width: 120px; } /* Help-Block */ .help-block { color: $red; } /* Fix issues with dropdwon within tables being cut off */ .table-responsive > .table { width: 100%; margin-bottom: 15px; overflow: auto; } @media (max-width: 768px) { .table-responsive .dropdown-menu, .table-responsive .dropdown-toggle { position: static !important; } } @media (min-width: 768px) { .table-responsive { overflow: visible; } } /* NOTIFICATION TABLE STYLING */ .notifications { table { border: none; thead > tr > th { border: none; background-color: $white; color: $black; } tbody > tr > td { border: none; } } } /* MODAL DIALOG STYLING */ .modal-dialog { background-color: $white; } /* nav-tabs and nav-pills styling */ .nav-tabs, .nav-pills { background-color: $grey; color: $white; border-bottom: 0px; } .nav-tabs > li > a, .nav-pills > li > a { color: $white; } .nav-tabs > li > a:hover, .nav-tabs > li > a:focus, .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { background-color: $white; color: $grey; border: 1px solid $grey; border-bottom-color: transparent; /* Only nav-tabs have a transparent border-bottom */ } .nav-pills > li > a:hover, .nav-pills > li > a:focus, .nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover { background-color: $white; color: $grey; border: 1px solid $grey; } .nav-pills > li:last-child > a:hover, .nav-pills > li:last-child > a:focus, .nav-pills > li.active:last-child > a, .nav-pills > li.active:last-child > a:focus, .nav-pills > li.active:last-child > a:hover { border-right: 0px; } /* panel styling */ .panel-default { border-color: $grey; } .heading-button > .panel-heading, .panel-default > .panel-heading { background-color: $grey; color: $white; border-top-right-radius: 0px; border-top-left-radius: 0px; } .panel-title a { display: block; padding: 8px 15px; margin: -10px -15px; background-color: $grey; color: $white; } .panel-title > a.reverse { background-color: $white; color: $grey; } /* list-group styling */ .list-group-item:last-child { border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } .list-group-item:first-child { border-top-right-radius: 0px; border-top-left-radius: 0px; } /* label stlying */ .label { font-size: 85%; } /* LIST STYLING */ span.sublist { margin-left: -15px; margin-right: 25px; } /* Overrides ul list */ #modal-permissions ul { list-style-type: none; } /* Overrides list-group */ #modal-permissions .list-group li:nth-child(1){ border-top: 0 none; } /* Overrides list-group-item */ #modal-permissions .list-group-item { height: 30px; padding: 5px 15px; } /* FONTAWESOME STYLING */ .fa:not(.small) { font-size: 2rem; } .fa-reverse { color: $grey; } .fa-sort, .fa-sort-asc, .fa-sort-desc { color: $white; } /* RADIO BUTTONS */ .radio label { margin-right: 15px; } /* BUTTONS STYLING */ /* $disabled-button-color: #808080; $cancel-button-color: #F17D04; */ /* primary button */ .btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:visited, .btn-primary:active:hover, .btn-primary.active:hover { background-color: $grey; color: $white; border-color: $grey; outline: none; margin-top: 5px; margin-bottom: 10px; } /* default button */ .btn-default { margin-top: 5px; } .btn-default, .btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default:visited, .btn-default:active:hover, .btn-default.active:hover { background-color: $grey; color: $white; border-color: $grey; outline: none; margin-bottom: 10px; } /* Popover button */ .btn-default[data-toggle=tooltip], .btn-default:hover[data-toggle=tooltip], .btn-default:focus[data-toggle=tooltip], .btn-default:active[data-toggle=tooltip], .btn-default:visited[data-toggle=tooltip], .btn-default:active:hover[data-toggle=tooltip] { color: $grey; background-color: $white; border: none; padding-left: -10px; font-size: .8rem; } // Footer (for actions) .modal-footer { text-align: right; // right align buttons // Properly space out buttons within modal to fix alignment issues .btn + .btn { margin-left: 5px; margin-bottom: 10px; // account for input[type="submit"] which gets the bottom margin like all other inputs } // but override that for button groups .btn-group .btn + .btn { margin-left: -1px; } // and override it for block buttons as well .btn-block + .btn-block { margin-left: 0; } } /* MESSAGES */ $error-color: $red; $error-background: #f2dede; $notice-color: $gold; $notice-background: #fcf8e3; /**** ---------------------------------------------------------------------------- ****/ /**** Main layout configuration ****/ main { margin-bottom: 100px; @media (max-width: 768px) { margin-bottom: 420px; } @media (min-width: 768px) and (max-width: 1000px) { margin-bottom: 200px; } } html { min-height: 100%; position: relative; } body{ padding-bottom: 50px; } /* footer */ footer { position: absolute; bottom: 0; margin-top: 20px; margin-bottom: -20px; width: 100%; } /* HEADER STYLING */ /* $header-height: 165px; $header-logo-width: 165px; $header-background: $white; $header-text-color: $black; $header-background: linear-gradient(#ED6406, #F59503); */ /* For org navbar custom height */ #org-navbar { margin-top: -20px; #banner-org-name { margin-top: 40px; } } @media (min-width: 768px) { #org-navbar .navbar-nav li a { line-height: 102px; height: 102px; padding-top: 0; } #org-navbar .org-links { padding-top: 15px; } #org-navbar .org-a { line-height: 36px !important; height: 36px !important; vertical-align: middle !important; padding-top: 0; padding-bottom: 0; } } @media (min-width: 768px) { #admin-dropdown ul li a, #super-admin-dropdown ul li a { line-height: 26px !important; height: 26px !important; margin-top: 3px !important; } } /* For dark (inverse) navbars */ .inverse-dropdown { background-color: #222 !important; border-color: #080808 !important; & > li > a { color: #999 !important; &:hover { color: #fff !important; background-color: #000 !important; } } .active a { color: #fff !important; background-color: #000 !important; } } /* HEADER LOGOS */ .app-logo { height: 50px; padding-right:15px; } .org-logo { padding: 15px 10px; } /* Tooltip Styling */ $tooltip-color: $white; $tooltip-background: $grey; .tooltip-inner { min-width: 320px; max-width: 100%; text-align: left; } @media (max-width: 320px) { .tooltip-inner { min-width: initial; max-width: 120px; text-align: left; } } /* JQuery Autocomplete Styling */ /* ---------------------------------------------------- */ .invisible { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .combobox-container { position: relative; } .combobox-suggestions { position: absolute; left: 0; width: 100%; background: $white; z-index: 1100; } .combobox-suggestion { color: $grey; border-bottom: 1px solid $grey; border-left: 1px solid $grey; border-right: 1px solid $grey; padding: 5px 10px 5px 10px; cursor: pointer; text-align: left; } .combobox-suggestion:first-child { border-top: 1px solid $grey; } .combobox-suggestion:hover, .combobox-suggestion:focus { color: $white; background-color: $grey; } .combobox-clear-button, .combobox-clear-button:hover, .combobox-clear-button:focus { cursor: pointer; display: inline; position: absolute; top: 6px; right: 5px; border: none; background: transparent; color: $grey; } /* http://geektnt.com/how-to-remove-x-from-search-input-field-on-chrome-and-ie.html */ .js-combobox[type=text]::-ms-clear { display: none; width: 0; height: 0; } .js-combobox[type=text]::-ms-reveal { display: none; width: 0; height: 0; } /* PAGE SPECIFIC SETTINGS */ /* ---------------------------------------------*/ /* Org details page */ .remove-org-link i { margin-left: -15px; margin-top: 30px; } .org-logo-controls { display: inline-block; margin-left: 15px; input { display: inline-block; } strong { margin: 0 10px; } } /* Plan creation */ #new_plan { .create-plan-or { padding: 5px 0 0 15px; } .create-plan-checkbox { margin-left: -40px; margin-top: -5px; } .create-plan-mock { margin-left: -40px; } .h2-label { font-size: 30px; font-weight: normal; } } /* Templates page table pre-defined filters */ .template-table-filters .navbar-nav > li > a { color: $grey; padding: 5px 15px 5px 5px; } /* Sharp edges */ #app-navbar, #org-navbar, .nav-tabs > li > a, .nav-pills > li > a, .panel, .panel-group .panel, .progress, .btn, .form-control, .label, .alert, .input-group-addon { border-radius: 0px; } /* rda styling */ .browse-standards-border { border: 1px solid $grey; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; padding: 10px 10px 5px 10px; margin-bottom:10px; overflow-y: scroll; max-height: 300px; width: 100%; } .rda_metadata .form-control { width: auto; } .remove-standard { border: none; background: none; } /* Fieldset styling */ /* generic styling */ fieldset { border: none; padding: 0 10px 10px 10px; input[type="radio"], input[type="checkbox"] { margin: 0px; vertical-align: middle; } .checkbox, .radio { margin-top: 0px; margin-bottom: 3px; } } legend { border: none; width: auto; font-size: 14px; font-weight: bold; margin-bottom: 5px; text-transform: capitalize; } /* Specific to project details page */ fieldset.project-details { border: 0.5px groove #ddd; padding: 0 5px; margin: 0px; width: 480px; -webkit-box-shadow: 0px 0px 0px 0px #000; box-shadow: 0px 0px 0px 0px #000; } legend.project-details { font-weight: bold; font-size: 100%; text-align: left !important; width:auto; margin-bottom: 5px; border-bottom:none; text-transform: capitalize; } @media (max-width: 768px) { fieldset.project-details { width: 340px; } } /* Skip to main content link styling */ div.skip a { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow: hidden !important; } div.skip a:focus { width:auto; height:auto; overflow:visible !important; } /* adjust the position of the 'remove - X' button for links */ .link .fa-times-circle { margin-top: 30px; } /* Link as button styling */ a.link_as_button { color: $white; border: none; text-decoration: none; } /* shibboleth DS page institution list formatting */ #full_list .section-heading { background-color: $grey; color: $white; padding: 10px; } /* Text meant only for screen readers. */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; } .field_with_errors input, .field_with_errors textarea, .field_with_errors select, .field_with_errors .mce-container, .field_with_errors ~ .mce-container { border-color: $red; } fieldset.field_with_errors { border: 1px solid $red; } /* Use with care to force font size to 5em */ .f-large { font-size: 5em !important; } .mb-15 { margin-bottom: 15px; } .mt-15 { margin-top: 15px; } .mt-25 { margin-top: 25px; }