diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss index 26f9e1511..f89da4107 100644 --- a/app/assets/stylesheets/application.css.scss +++ b/app/assets/stylesheets/application.css.scss @@ -19,9 +19,15 @@ *= require_self */ +// Third-party / vendor styles @import 'curation_concerns'; @import 'curation_concerns/fileupload'; +@import 'jquery-ui/sortable'; +@import 'jquery-ui/selectable'; +@import 'browse_everything'; +@import 'bootstrap-select'; +// PUL specific styles @import 'abstractions/mixins'; @import 'variables/breaks'; @@ -30,23 +36,18 @@ @import 'base/typography'; +@import 'components/breadcrumb'; +@import 'components/datepicker'; +@import 'components/fileupload'; +@import 'components/plum_file_manager'; +@import 'components/rtl'; +@import 'components/sorting'; +@import 'components/viewer'; +@import 'components/flash'; @import 'components/font-face'; @import 'components/footer'; @import 'components/header'; @import 'components/positioning'; @import 'components/structure_editor'; -@import 'components/flash'; +@import 'components/tabs'; @import 'components/welcome_page'; - -@import "components/viewer"; -@import "components/sorting"; -@import "components/plum_file_manager"; -@import "components/fileupload"; -@import "components/datepicker"; -@import "components/rtl"; -@import "jquery-ui/sortable"; -@import "jquery-ui/selectable"; -@import "browse_everything"; - -@import "components/breadcrumb"; -@import "bootstrap-select"; diff --git a/app/assets/stylesheets/base/typography.scss b/app/assets/stylesheets/base/typography.scss index e493825b7..6769f5bbe 100644 --- a/app/assets/stylesheets/base/typography.scss +++ b/app/assets/stylesheets/base/typography.scss @@ -42,3 +42,14 @@ small, .font-small { body .form-control { color: $dark-gray; } + +#main { + h1, h2, h3, h4, h5, h6 { + color: $blue; + } + + h3 { + font-size: 24px; + line-height: 1.1em; + } +} diff --git a/app/assets/stylesheets/components/header.scss b/app/assets/stylesheets/components/header.scss index 47c9d052f..4d10a1fb8 100644 --- a/app/assets/stylesheets/components/header.scss +++ b/app/assets/stylesheets/components/header.scss @@ -2,136 +2,188 @@ @import "variables/colors"; @import "variables/typography"; @import "abstractions/mixins"; + .l-branding__pul { - background: $dark-gray; - border-top: 3px solid $orange; - min-height: 40px; + background: $dark-gray; + border-top: 3px solid $orange; + min-height: 40px; + position: relative; + + .logo__pul { + height: 40px; position: relative; - .logo__pul { - height: 40px; - position: relative; - z-index: 10; - text-align: center; - } - .logo__pul img { - margin: 0; - @include vertical-align(); - } + z-index: 10; + text-align: center; + } + + .logo__pul img { + margin: 0; + + @include vertical-align; + } } @media (min-width: $bp-medium) { - .l-branding__pul { - height: 43px; - } - .l-branding__pul .logo__pul { - text-align: left; - } + .l-branding__pul { + height: 43px; + } + + .l-branding__pul .logo__pul { + text-align: left; + } } .l-branding__pul .logo__pul { - margin: 0; - padding: 0; + margin: 0; + padding: 0; } @media (max-width: $bp-medium) { - .header__secondary .container .navbar-right { - width: 100%; - margin-top: 1em; - } - .header__secondary .container .navbar-right .navbar-nav { - margin: 0 auto; - text-align: center; - width: 100%; - li { - display: inline-block; - float: none - } + .header__secondary .container .navbar-right { + width: 100%; + margin-top: 1em; + } + + .header__secondary .container .navbar-right .navbar-nav { + margin: 0 auto; + text-align: center; + width: 100%; + + li { + display: inline-block; + float: none; } + } } .svg .logo-svg { - display: inline-block; - max-width: 100%; + display: inline-block; + max-width: 100%; } .svg .logo-no-svg { - display: none; + display: none; } #site-title { - -webkit-transform-style: preserve-3d; - -moz-transform-style: preserve-3d; - transform-style: preserve-3d; - height: 76px; - h1 { - font-size: 2em; - margin: 0.5em 0 0 0; - } + -webkit-transform-style: preserve-3d; + -moz-transform-style: preserve-3d; + transform-style: preserve-3d; + height: 76px; + + h1 { + font-size: 2em; + margin: 0.5em 0 0 0; + } } #site-actions { - padding: 0; - margin-bottom: 1.5em; - text-align: center; - .btn-group { - margin: 0 1em; - } + padding: 0; + margin-bottom: 1.5em; + text-align: center; + + .btn-group { + margin: 0 1em; + } } @media (min-width: $bp-medium) { - .header__secondary > .container, - #site-title, - #site-actions, - #site-search { - height: 76px; - } - #site-title h1 { - text-align: left; - font-size: 1.7em; - margin: 0; - @include vertical-align(); - } - #site-actions { - text-align: right; - > a, - .my-actions, - .add-content { - @include vertical-align(); - z-index: 1; - } + .header__secondary > .container, + #site-title, + #site-actions, + #site-search { + height: 76px; + } + + #site-title h1 { + text-align: left; + font-size: 1.7em; + margin: 0; + + @include vertical-align; + } + + #site-actions { + text-align: right; + + > a, + .my-actions, + .add-content { + @include vertical-align; + + z-index: 1; } + } } #site-search form { - margin: 0; + margin: 0; } .search-form { - margin: 0; - @include vertical-align(); + margin: 0; + + @include vertical-align; } .search-form .search-query { - outline: none; - height: 34px; + outline: none; + height: 34px; } .search-form .search-submit { - outline: none; - height: 34px; - width: 34px; - right: 0; - top: 0; + outline: none; + height: 34px; + width: 34px; + right: 0; + top: 0; } .input-group { - width: 100%; + width: 100%; } .flash-message { - background-color: $white; + background-color: $white; +} + +.accessible-hidden, +.visuallyhidden { + @include visually-hidden; +} + +#site-title h1 { + font-family: $font-family-serif; + text-align: center; + @media (min-width: 992px) { + text-align: left; + } + + a, + a:hover, + a:focus { + text-decoration: none; + } } -.accessible-hidden { - @include visually-hidden(); +#site-actions { + .btn-group + .btn-group { + margin-left: 0; + } +} + +#site-search { + .search-query { + padding-left: .6em; + padding-right: 12%; + width: 100%; + } + + .input-group-btn { + width: 1%; + } + + .search-submit { + padding: 2px; + } } diff --git a/app/assets/stylesheets/components/tabs.scss b/app/assets/stylesheets/components/tabs.scss new file mode 100644 index 000000000..15892cf4f --- /dev/null +++ b/app/assets/stylesheets/components/tabs.scss @@ -0,0 +1,5 @@ +.nav-tabs > li.active > a, +.nav-tabs > li.active > a:focus, +.nav-tabs > li.active > a:hover { + color: #555; +}