diff --git a/app/assets/stylesheets/lib/orbit_bar/normalize.css b/app/assets/stylesheets/lib/orbit_bar/normalize.css deleted file mode 100644 index 08f8950..0000000 --- a/app/assets/stylesheets/lib/orbit_bar/normalize.css +++ /dev/null @@ -1,425 +0,0 @@ -/*! normalize.css v3.0.1 | MIT License | git.io/normalize */ - -/** - * 1. Set default font family to sans-serif. - * 2. Prevent iOS text size adjust after orientation change, without disabling - * user zoom. - */ - -html { - font-family: sans-serif; /* 1 */ - -ms-text-size-adjust: 100%; /* 2 */ - -webkit-text-size-adjust: 100%; /* 2 */ -} - -/** - * Remove default margin. - */ - -body { - margin: 0; -} - -/* HTML5 display definitions - ========================================================================== */ - -/** - * Correct `block` display not defined for any HTML5 element in IE 8/9. - * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. - * Correct `block` display not defined for `main` in IE 11. - */ - -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -main, -nav, -section, -summary { - display: block; -} - -/** - * 1. Correct `inline-block` display not defined in IE 8/9. - * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. - */ - -audio, -canvas, -progress, -video { - display: inline-block; /* 1 */ - vertical-align: baseline; /* 2 */ -} - -/** - * Prevent modern browsers from displaying `audio` without controls. - * Remove excess height in iOS 5 devices. - */ - -audio:not([controls]) { - display: none; - height: 0; -} - -/** - * Address `[hidden]` styling not present in IE 8/9/10. - * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. - */ - -[hidden], -template { - display: none; -} - -/* Links - ========================================================================== */ - -/** - * Remove the gray background color from active links in IE 10. - */ - -a { - background: transparent; -} - -/** - * Improve readability when focused and also mouse hovered in all browsers. - */ - -a:active, -a:hover { - outline: 0; -} - -/* Text-level semantics - ========================================================================== */ - -/** - * Address styling not present in IE 8/9/10/11, Safari, and Chrome. - */ - -abbr[title] { - border-bottom: 1px dotted; -} - -/** - * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. - */ - -b, -strong { - font-weight: bold; -} - -/** - * Address styling not present in Safari and Chrome. - */ - -dfn { - font-style: italic; -} - -/** - * Address variable `h1` font-size and margin within `section` and `article` - * contexts in Firefox 4+, Safari, and Chrome. - */ - -h1 { - font-size: 2em; - margin: 0.67em 0; -} - -/** - * Address styling not present in IE 8/9. - */ - -mark { - background: #ff0; - color: #000; -} - -/** - * Address inconsistent and variable font size in all browsers. - */ - -small { - font-size: 80%; -} - -/** - * Prevent `sub` and `sup` affecting `line-height` in all browsers. - */ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sup { - top: -0.5em; -} - -sub { - bottom: -0.25em; -} - -/* Embedded content - ========================================================================== */ - -/** - * Remove border when inside `a` element in IE 8/9/10. - */ - -img { - border: 0; -} - -/** - * Correct overflow not hidden in IE 9/10/11. - */ - -svg:not(:root) { - overflow: hidden; -} - -/* Grouping content - ========================================================================== */ - -/** - * Address margin not present in IE 8/9 and Safari. - */ - -figure { - margin: 1em 40px; -} - -/** - * Address differences between Firefox and other browsers. - */ - -hr { - -moz-box-sizing: content-box; - box-sizing: content-box; - height: 0; -} - -/** - * Contain overflow in all browsers. - */ - -pre { - overflow: auto; -} - -/** - * Address odd `em`-unit font size rendering in all browsers. - */ - -code, -kbd, -pre, -samp { - font-family: monospace, monospace; - font-size: 1em; -} - -/* Forms - ========================================================================== */ - -/** - * Known limitation: by default, Chrome and Safari on OS X allow very limited - * styling of `select`, unless a `border` property is set. - */ - -/** - * 1. Correct color not being inherited. - * Known issue: affects color of disabled elements. - * 2. Correct font properties not being inherited. - * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. - */ - -button, -input, -optgroup, -select, -textarea { - color: inherit; /* 1 */ - font: inherit; /* 2 */ - margin: 0; /* 3 */ -} - -/** - * Address `overflow` set to `hidden` in IE 8/9/10/11. - */ - -button { - overflow: visible; -} - -/** - * Address inconsistent `text-transform` inheritance for `button` and `select`. - * All other form control elements do not inherit `text-transform` values. - * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. - * Correct `select` style inheritance in Firefox. - */ - -button, -select { - text-transform: none; -} - -/** - * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` - * and `video` controls. - * 2. Correct inability to style clickable `input` types in iOS. - * 3. Improve usability and consistency of cursor style between image-type - * `input` and others. - */ - -button, -html input[type="button"], /* 1 */ -input[type="reset"], -input[type="submit"] { - -webkit-appearance: button; /* 2 */ - cursor: pointer; /* 3 */ -} - -/** - * Re-set default cursor for disabled elements. - */ - -button[disabled], -html input[disabled] { - cursor: default; -} - -/** - * Remove inner padding and border in Firefox 4+. - */ - -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; -} - -/** - * Address Firefox 4+ setting `line-height` on `input` using `!important` in - * the UA stylesheet. - */ - -input { - line-height: normal; -} - -/** - * It's recommended that you don't attempt to style these elements. - * Firefox's implementation doesn't respect box-sizing, padding, or width. - * - * 1. Address box sizing set to `content-box` in IE 8/9/10. - * 2. Remove excess padding in IE 8/9/10. - */ - -input[type="checkbox"], -input[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * Fix the cursor style for Chrome's increment/decrement buttons. For certain - * `font-size` values of the `input`, it causes the cursor style of the - * decrement button to change from `default` to `text`. - */ - -input[type="number"]::-webkit-inner-spin-button, -input[type="number"]::-webkit-outer-spin-button { - height: auto; -} - -/** - * 1. Address `appearance` set to `searchfield` in Safari and Chrome. - * 2. Address `box-sizing` set to `border-box` in Safari and Chrome - * (include `-moz` to future-proof). - */ - -input[type="search"] { - -webkit-appearance: textfield; /* 1 */ - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; /* 2 */ - box-sizing: content-box; -} - -/** - * Remove inner padding and search cancel button in Safari and Chrome on OS X. - * Safari (but not Chrome) clips the cancel button when the search input has - * padding (and `textfield` appearance). - */ - -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -/** - * Define consistent border, margin, and padding. - */ - -fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; -} - -/** - * 1. Correct `color` not being inherited in IE 8/9/10/11. - * 2. Remove padding so people aren't caught out if they zero out fieldsets. - */ - -legend { - border: 0; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * Remove default vertical scrollbar in IE 8/9/10/11. - */ - -textarea { - overflow: auto; -} - -/** - * Don't inherit the `font-weight` (applied by a rule above). - * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. - */ - -optgroup { - font-weight: bold; -} - -/* Tables - ========================================================================== */ - -/** - * Remove most spacing between table cells. - */ - -table { - border-collapse: collapse; - border-spacing: 0; -} - -td, -th { - padding: 0; -} diff --git a/app/assets/stylesheets/lib/orbit_bar/orbit-bar.scss b/app/assets/stylesheets/lib/orbit_bar/orbit-bar.scss deleted file mode 100644 index b7cc557..0000000 --- a/app/assets/stylesheets/lib/orbit_bar/orbit-bar.scss +++ /dev/null @@ -1,909 +0,0 @@ -@import "http://fonts.googleapis.com/css?family=Chivo"; -$orbit-bar-bgc: #333 !default; -$orbit-bar-bgc-darker: darken($orbit-bar-bgc, 20%) !default; -$orbit-bar-bgc-dark: darken($orbit-bar-bgc, 10%) !default; -$orbit-bar-bgc-light: lighten($orbit-bar-bgc, 10%) !default; -$orbit-bar-bgc-lighter: lighten($orbit-bar-bgc, 20%) !default; - -@mixin clearfix() { - &:before, - &:after { - content: " "; // 1 - display: table; // 2 - } - &:after { - clear: both; - } -} - -.orbitMenuLink { - cursor: pointer; - width: 50px; - height: 40px; - padding: 0 0.5em; - background-size: 70%; - display: block; - line-height: 40px; - color: #FFF; - font-family: 'Chivo'; - i { - display: block; - width: 50px; - height: 40px; - line-height: 40px; - font-size: 1.4em; - @media (max-width: 479px) { - width: 100%; - text-align: center; - } - } -} -body { - background-color: #ededed; -} -#orbit-bar { - position: fixed; - top: 0; - right: 0; - left: 0; - z-index: 999; - font-family: 'Chivo'; - #open-orbit-nav, - #open-orbit-login { - position: absolute; - visibility: hidden; - top: 0; - left: -100px; - } - #open-orbit-nav { - &:checked { - & + .orbit-bar-inner { - @media (max-width: 479px) {height: auto;} - .orbit-bar-search-sign-language, - .orbit-bar-menu { - display: block; - } - } - } - } - #open-orbit-login { - &:checked { - &~.cover { - display: block; - } - &~.login-window { - display: block; - } - } - } - .cover { - display: none; - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - background-color: rgba(0, 0, 0, .8); - z-index: 10 - } - .login-window { - display: none; - position: absolute; - top: 3em; - left: 50%; - width: 500px; - z-index: 10; - background-color: #fff; - margin-left: -250px; - border-radius: 5px; - box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5); - .login-header { - padding: 10px 15px; - border-bottom: 1px solid lighten($orbit-bar-bgc, 60%); - .close { - float: right; - font-size: 20px; - font-weight: bold; - line-height: 20px; - cursor: pointer; - color: lighten($orbit-bar-bgc, 60%); - &:hover { - color: lighten($orbit-bar-bgc, 40%); - } - } - h3 { - color: $orbit-bar-bgc-lighter; - margin: 0; - } - } - .login-body { - padding: 15px; - text-align: center; - form { - width: 312px; - margin: 0 auto; - } - .input-prepend { - margin-bottom: 15px; - .add-on { - color: #8D8D8D; - border-radius: 4px 0 0 4px; - margin-right: -5px; - display: inline-block; - width: auto; - height: 20px; - min-width: 16px; - padding: 4px 5px; - font-size: 14px; - font-weight: normal; - line-height: 20px; - text-align: center; - text-shadow: 0 1px 0 #ffffff; - background-color: #eeeeee; - border: 1px solid #ccc; - white-space: nowrap; - } - .input-xlarge { - display: inline-block; - position: relative; - width: 270px; - height: 20px; - vertical-align: top; - border-radius: 0 4px 4px 0; - background-color: #ffffff; - border: 1px solid #cccccc; - box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); - margin-left: 0; - padding: 4px 6px; - font-size: 14px; - line-height: 20px; - color: #555555; - white-space: nowrap; - } - } - .submit { - button { - display: inline-block; - padding: 4px 12px; - margin-bottom: 0; - font-size: 14px; - line-height: 20px; - color: #FFF; - outline: none; - text-align: center; - vertical-align: middle; - cursor: pointer; - background-color: #006dcc; - border: 1px solid #bbbbbb; - border-color: #e6e6e6 #e6e6e6 #bfbfbf; - border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25); - border-radius: 4px; - box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05); - &:hover { - background-color: #0044cc; - } - &:active { - box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05); - } - } - } - } - } - .orbit-bar-inner { - height: 40px; - padding: 0 15px; - position: relative; - background-color: $orbit-bar-bgc; - @include clearfix(); - a { - text-decoration: none; - } - & > label { - display: none; - position: absolute; - width: 23px; - height: 23px; - margin-top: 7px; - padding: 0 1px 0 0; - color: lighten($orbit-bar-bgc, 40%); - text-align: center; - border: 1px solid lighten($orbit-bar-bgc, 40%); - border-radius: 3px; - cursor: pointer; - &:hover { - color: lighten($orbit-bar-bgc, 90%); - border-color: lighten($orbit-bar-bgc, 90%); - } - i { - font-size: 1.2em; - line-height: 23px; - } - } - & > ul { - position: relative; - margin: 0 -15px; - padding: 0; - list-style: none; - @include clearfix(); - & > li { - position: relative; - float: left; - display: inline-block; - &:hover { - padding-bottom: 10px; - & > a, & > span, & > label { - background-color: #0095CF; - } - & > ul { - display: block; - } - } - & > ul { - display: none; - position: absolute; - top: 100%; - margin: 0; - padding: 0.5em 0; - background-color: #FFF; - list-style: none; - border-radius: 5px; - border: 1px solid lighten($orbit-bar-bgc, 60%); - box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.4); - &:before { - content: ""; - position: absolute; - top: -7px; - left: 10px; - width: 0; - height: 0; - display: block; - border-style: solid; - border-width: 0 8px 8px 8px; - border-color: transparent transparent #ffffff transparent; - } - li { - min-width: 100px; - padding: 0 0.8em; - &.divider { - height: 1px; - margin: 0.3em 0; - background-color: lighten($orbit-bar-bgc, 60%); - } - &:hover, &.active { - background-color: #0095CF; - a { - color: #FFF; - } - } - } - a { - color: $orbit-bar-bgc-lighter; - font-size: 0.8em; - display: block; - padding: 0.5em 0; - } - } - } - } - } - .orbit-bar-menu { - float: left; - .orbit-bar-logo { - @extend .orbitMenuLink; - padding: 0; - background-position: center; - background-repeat: no-repeat; - background-image: url(/assets/orbit-logo.svg); - background-image: url(/assets/orbit-logo.png)\9; - & + ul { - left: 0; - } - } - .orbit-bar-home { - @extend .orbitMenuLink; - padding: 0; - } - } - .orbit-bar-title { - display: none; - top: 0; - margin: 0 2em; - padding: 0.3em 0; - color: #FFF; - font-size: 1.4em; - text-align: center; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - a { - color: #FFF; - } - } - .orbit-bar-search-sign-language { - float: right; - #search { - @extend .orbitMenuLink; - cursor: default; - width: auto; - text-align: right; - input[type="search"] { - color: $orbit-bar-bgc-lighter; - border: none; - border-radius: 1.7em; - line-height: 1.3em; - padding: 0.2em 0.8em; - outline: none; - } - } - #language, #user, label { - @extend .orbitMenuLink; - width: auto; - font-size: 0.8em; - & + ul { - right: 0; - &:before { - right: 10px; - left: auto; - } - } - } - label { - padding: 0; - } - } -} - -@media (max-width: 479px) { - #orbit-bar { - .login-window { - width: 90%; - margin-left: -45%; - .login-body { - form { - width: 100%; - } - .input-prepend { - .input-xlarge { - width: 80%; - } - } - } - } - .orbit-bar-inner { - & > label { - display: block; - } - & > ul { - background-color: $orbit-bar-bgc-darker; - & > li { - display: block; - float: none; - &:hover { - padding-bottom: 0; - } - & > ul { - display: block; - position: static; - margin: 0; - padding: 0; - background-color: transparent; - list-style: none; - border-radius: none; - border: none; - box-shadow: none; - &:before { - display: none; - } - li { - &.divider { - background-color: $orbit-bar-bgc; - margin: 0; - } - } - } - } - } - } - ul.orbit-bar-menu { - display: none; - float: none; - .orbit-bar-logo, .orbit-bar-home { - display: none; - } - } - .orbit-bar-title { - display: block; - } - ul.orbit-bar-search-sign-language { - display: none; - float: none; - & > li { - background-color: $orbit-bar-bgc-dark; - text-align: center; - #search { - text-align: center; - input[type="search"] { - width: 80%; - } - } - & + li { - width: 50%; - float: left; - border-top: 1px solid $orbit-bar-bgc-light; - box-shadow: inset -1px 0 0 $orbit-bar-bgc-light; - & + li { - box-shadow: none; - } - &:hover { - & > a, & > span { - background-color: $orbit-bar-bgc; - } - & > ul { - position: absolute; - width: 100%; - background-color: $orbit-bar-bgc-dark; - border-radius: 0; - } - } - } - & > ul { - display: none; - } - } - } - } -}@import "http://fonts.googleapis.com/css?family=Chivo"; -$orbit-bar-bgc: #333 !default; -$orbit-bar-bgc-darker: darken($orbit-bar-bgc, 20%) !default; -$orbit-bar-bgc-dark: darken($orbit-bar-bgc, 10%) !default; -$orbit-bar-bgc-light: lighten($orbit-bar-bgc, 10%) !default; -$orbit-bar-bgc-lighter: lighten($orbit-bar-bgc, 20%) !default; - -@mixin clearfix() { - &:before, - &:after { - content: " "; // 1 - display: table; // 2 - } - &:after { - clear: both; - } -} - -.orbitMenuLink { - cursor: pointer; - width: 50px; - height: 40px; - padding: 0 0.5em; - background-size: 70%; - display: block; - line-height: 40px; - color: #FFF; - font-family: 'Chivo'; - i { - display: block; - width: 50px; - height: 40px; - line-height: 40px; - font-size: 1.4em; - @media (max-width: 479px) { - width: 100%; - text-align: center; - } - } -} -body { - background-color: #ededed; -} -#orbit-bar { - position: fixed; - top: 0; - right: 0; - left: 0; - z-index: 999; - font-family: 'Chivo'; - #open-orbit-nav, - #open-orbit-login { - position: absolute; - visibility: hidden; - top: 0; - left: -100px; - } - #open-orbit-nav { - &:checked { - & + .orbit-bar-inner { - @media (max-width: 479px) {height: auto;} - .orbit-bar-search-sign-language, - .orbit-bar-menu { - display: block; - } - } - } - } - #open-orbit-login { - &:checked { - &~.cover { - display: block; - } - &~.login-window { - display: block; - } - } - } - .cover { - display: none; - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - background-color: rgba(0, 0, 0, .8); - z-index: 10 - } - .login-window { - display: none; - position: absolute; - top: 10em; - left: 50%; - width: 400px; - z-index: 10; - background-color: #fff; - margin-left: -200px; - border-radius: 5px; - box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5); - .login-header { - padding: 10px 15px; - border-bottom: 1px solid lighten($orbit-bar-bgc, 60%); - .close { - float: right; - font-size: 20px; - font-weight: bold; - line-height: 20px; - cursor: pointer; - color: lighten($orbit-bar-bgc, 60%); - &:hover { - color: lighten($orbit-bar-bgc, 40%); - } - } - h3 { - color: $orbit-bar-bgc-lighter; - margin: 0; - } - } - .login-body { - padding: 15px; - text-align: center; - form { - width: 312px; - margin: 0 auto; - } - .input-prepend { - margin-bottom: 15px; - .add-on { - color: #8D8D8D; - border-radius: 4px 0 0 4px; - margin-right: -5px; - display: inline-block; - width: 30px; - height: 30px; - min-width: 16px; - padding: 4px 5px; - font-size: 14px; - font-weight: normal; - line-height: 20px; - text-align: center; - text-shadow: 0 1px 0 #ffffff; - background-color: #eeeeee; - border: 1px solid #ccc; - white-space: nowrap; - } - .input-xlarge { - display: inline-block; - position: relative; - width: 250px; - height: 30px; - vertical-align: top; - border-radius: 0 4px 4px 0; - background-color: #ffffff; - border: 1px solid #cccccc; - box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); - margin-left: 0; - padding: 4px 6px; - font-size: 14px; - line-height: 20px; - color: #555555; - white-space: nowrap; - } - } - .submit { - button { - display: inline-block; - padding: 4px 12px; - margin-bottom: 0; - font-size: 14px; - line-height: 20px; - color: #FFF; - outline: none; - text-align: center; - vertical-align: middle; - cursor: pointer; - background-color: #006dcc; - border: 1px solid #bbbbbb; - border-color: #e6e6e6 #e6e6e6 #bfbfbf; - border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25); - border-radius: 4px; - box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05); - &:hover { - background-color: #0044cc; - } - &:active { - box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05); - } - } - } - } - } - .orbit-bar-inner { - height: 40px; - padding: 0 15px; - position: relative; - background-color: $orbit-bar-bgc; - @include clearfix(); - a { - text-decoration: none; - } - & > label { - display: none; - position: absolute; - width: 23px; - height: 23px; - margin-top: 7px; - padding: 0 1px 0 0; - color: lighten($orbit-bar-bgc, 40%); - text-align: center; - border: 1px solid lighten($orbit-bar-bgc, 40%); - border-radius: 3px; - cursor: pointer; - &:hover { - color: lighten($orbit-bar-bgc, 90%); - border-color: lighten($orbit-bar-bgc, 90%); - } - i { - font-size: 1.2em; - line-height: 23px; - } - } - & > ul { - position: relative; - margin: 0 -15px; - padding: 0; - list-style: none; - @include clearfix(); - & > li { - position: relative; - float: left; - display: inline-block; - &:hover { - padding-bottom: 10px; - & > a, & > span, & > label { - background-color: #0095CF; - } - & > ul { - display: block; - } - } - & > ul { - display: none; - position: absolute; - top: 100%; - margin: 0; - padding: 0.5em 0; - background-color: #FFF; - list-style: none; - border-radius: 5px; - border: 1px solid lighten($orbit-bar-bgc, 60%); - box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.4); - &:before { - content: ""; - position: absolute; - top: -7px; - left: 10px; - width: 0; - height: 0; - display: block; - border-style: solid; - border-width: 0 8px 8px 8px; - border-color: transparent transparent #ffffff transparent; - } - li { - min-width: 100px; - padding: 0 0.8em; - &.divider { - height: 1px; - margin: 0.3em 0; - background-color: lighten($orbit-bar-bgc, 60%); - } - &:hover, &.active { - background-color: #0095CF; - a { - color: #FFF; - } - } - } - a { - color: $orbit-bar-bgc-lighter; - font-size: 0.8em; - display: block; - padding: 0.5em 0; - } - } - } - } - } - .orbit-bar-menu { - float: left; - .orbit-bar-logo { - @extend .orbitMenuLink; - padding: 0; - background-position: center; - background-repeat: no-repeat; - background-image: url(/assets/orbit-logo.svg); - background-image: url(/assets/orbit-logo.png)\9; - & + ul { - left: 0; - } - } - .orbit-bar-home { - @extend .orbitMenuLink; - padding: 0; - } - } - .orbit-bar-title { - display: none; - top: 0; - margin: 0 2em; - padding: 0.3em 0; - color: #FFF; - font-size: 1.4em; - text-align: center; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - a { - color: #FFF; - } - } - .orbit-bar-search-sign-language { - float: right; - #search { - @extend .orbitMenuLink; - cursor: default; - width: auto; - text-align: right; - input[type="search"] { - color: $orbit-bar-bgc-lighter; - border: none; - border-radius: 1.7em; - line-height: 1.3em; - padding: 0.2em 0.8em; - outline: none; - } - } - #language, #user, label { - @extend .orbitMenuLink; - width: auto; - font-size: 0.8em; - & + ul { - right: 0; - &:before { - right: 10px; - left: auto; - } - } - } - label { - padding: 0; - } - } -} - -@media (max-width: 479px) { - #orbit-bar { - .login-window { - width: 90%; - margin-left: -45%; - .login-body { - form { - width: 100%; - } - .input-prepend { - .input-xlarge { - width: 80%; - } - } - } - } - .orbit-bar-inner { - & > label { - display: block; - } - & > ul { - background-color: $orbit-bar-bgc-darker; - & > li { - display: block; - float: none; - &:hover { - padding-bottom: 0; - } - & > ul { - display: block; - position: static; - margin: 0; - padding: 0; - background-color: transparent; - list-style: none; - border-radius: none; - border: none; - box-shadow: none; - &:before { - display: none; - } - li { - &.divider { - background-color: $orbit-bar-bgc; - margin: 0; - } - } - } - } - } - } - ul.orbit-bar-menu { - display: none; - float: none; - .orbit-bar-logo, .orbit-bar-home { - display: none; - } - } - .orbit-bar-title { - display: block; - } - ul.orbit-bar-search-sign-language { - display: none; - float: none; - & > li { - background-color: $orbit-bar-bgc-dark; - text-align: center; - #search { - text-align: center; - input[type="search"] { - width: 80%; - } - } - & + li { - width: 50%; - float: left; - border-top: 1px solid $orbit-bar-bgc-light; - box-shadow: inset -1px 0 0 $orbit-bar-bgc-light; - & + li { - box-shadow: none; - } - &:hover { - & > a, & > span { - background-color: $orbit-bar-bgc; - } - & > ul { - position: absolute; - width: 100%; - background-color: $orbit-bar-bgc-dark; - border-radius: 0; - } - } - } - & > ul { - display: none; - } - } - } - } -} \ No newline at end of file diff --git a/app/assets/stylesheets/lib/orbit_bar/orbit-bar.scss.erb b/app/assets/stylesheets/lib/orbit_bar/orbit-bar.scss.erb new file mode 100644 index 0000000..1cce846 --- /dev/null +++ b/app/assets/stylesheets/lib/orbit_bar/orbit-bar.scss.erb @@ -0,0 +1,480 @@ +@import "http://fonts.googleapis.com/css?family=Chivo"; +$orbit-bar-bgc: #333 !default; +$orbit-bar-bgc-darker: darken($orbit-bar-bgc, 20%) !default; +$orbit-bar-bgc-dark: darken($orbit-bar-bgc, 10%) !default; +$orbit-bar-bgc-light: lighten($orbit-bar-bgc, 10%) !default; +$orbit-bar-bgc-lighter: lighten($orbit-bar-bgc, 20%) !default; + +@mixin clearfix() { + &:before, + &:after { + content: " "; // 1 + display: table; // 2 + } + &:after { + clear: both; + } +} + +.orbitMenuLink { + cursor: pointer; + width: 50px; + height: 40px; + padding: 0 0.5em; + background-size: 70%; + display: block; + line-height: 40px; + color: #FFF; + font-family: 'Chivo'; + i { + display: block; + width: 50px; + height: 40px; + line-height: 40px; + font-size: 1.4em; + @media (max-width: 479px) { + width: 100%; + text-align: center; + } + } +} +#orbit-bar { + position: fixed; + top: 0; + right: 0; + left: 0; + font-family: 'Chivo'; + font-size: 16px; + z-index: 999; + -webkit-box-sizing: initial; + -moz-box-sizing: initial; + box-sizing: initial; + * { + -webkit-box-sizing: initial; + -moz-box-sizing: initial; + box-sizing: initial; + } + #open-orbit-nav, + #open-orbit-login { + position: absolute; + visibility: hidden; + top: 0; + left: -100px; + } + #open-orbit-nav { + &:checked { + & + .orbit-bar-inner { + @media (max-width: 479px) {height: auto;} + .orbit-bar-search-sign-language, + .orbit-bar-menu { + display: block; + } + } + } + } + #open-orbit-login { + &:checked { + &~.cover { + display: block; + } + &~.login-window { + display: block; + } + } + } + .cover { + display: none; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + background-color: rgba(0, 0, 0, .8); + z-index: 10 + } + .login-window { + display: none; + position: absolute; + top: 3em; + left: 50%; + width: 500px; + z-index: 10; + background-color: #fff; + margin-left: -250px; + border-radius: 5px; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5); + .login-header { + padding: 10px 15px; + border-bottom: 1px solid lighten($orbit-bar-bgc, 60%); + .close { + float: right; + font-size: 20px; + font-weight: bold; + line-height: 20px; + cursor: pointer; + color: lighten($orbit-bar-bgc, 60%); + &:hover { + color: lighten($orbit-bar-bgc, 40%); + } + } + h3 { + color: $orbit-bar-bgc-lighter; + margin: 0; + } + } + .login-body { + padding: 15px; + text-align: center; + form { + width: 312px; + margin: 0 auto; + } + .prepend { + margin-bottom: 15px; + .add { + color: #8D8D8D; + border-radius: 4px 0 0 4px; + margin-right: -5px; + display: inline-block; + width: auto; + height: 20px; + min-width: 16px; + padding: 4px 5px; + font-size: 14px; + font-weight: normal; + line-height: 20px; + text-align: center; + text-shadow: 0 1px 0 #ffffff; + background-color: #eeeeee; + border: 1px solid #ccc; + white-space: nowrap; + } + .input { + display: inline-block; + position: relative; + width: 270px; + height: 20px; + vertical-align: top; + border-radius: 0 4px 4px 0; + background-color: #ffffff; + border: 1px solid #cccccc; + box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); + margin-left: 0; + padding: 4px 6px; + font-size: 14px; + line-height: 20px; + color: #555555; + white-space: nowrap; + } + } + .submit { + button { + display: inline-block; + padding: 4px 12px; + margin-bottom: 0; + font-size: 14px; + line-height: 20px; + color: #FFF; + outline: none; + text-align: center; + vertical-align: middle; + cursor: pointer; + background-color: #006dcc; + border: 1px solid #bbbbbb; + border-color: #e6e6e6 #e6e6e6 #bfbfbf; + border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25); + border-radius: 4px; + box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05); + &:hover { + background-color: #0044cc; + } + &:active { + box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05); + } + } + } + } + } + .orbit-bar-inner { + height: 40px; + padding: 0 15px; + position: relative; + background-color: $orbit-bar-bgc; + @include clearfix(); + a { + text-decoration: none; + } + & > label { + display: none; + position: absolute; + width: 23px; + height: 23px; + margin-top: 7px; + padding: 0 1px 0 0; + color: lighten($orbit-bar-bgc, 40%); + text-align: center; + border: 1px solid lighten($orbit-bar-bgc, 40%); + border-radius: 3px; + cursor: pointer; + &:hover { + color: lighten($orbit-bar-bgc, 90%); + border-color: lighten($orbit-bar-bgc, 90%); + } + i { + font-size: 1.2em; + line-height: 23px; + } + } + & > ul { + position: relative; + margin: 0; + padding: 0; + list-style: none; + @include clearfix(); + & > li { + position: relative; + float: left; + display: inline-block; + &:hover { + padding-bottom: 10px; + & > a, & > span, & > label { + background-color: #0095CF; + } + & > ul { + display: block; + } + } + & > ul { + display: none; + position: absolute; + top: 100%; + margin: 0; + padding: 0.2em 0; + background-color: #FFF; + list-style: none; + border-radius: 5px; + border: 1px solid lighten($orbit-bar-bgc, 60%); + box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.4); + &:before { + content: ""; + position: absolute; + top: -7px; + left: 10px; + width: 0; + height: 0; + display: block; + border-style: solid; + border-width: 0 8px 8px 8px; + border-color: transparent transparent #ffffff transparent; + } + &:after { + content: ""; + position: absolute; + top: -8px; + left: 9px; + width: 0; + height: 0; + display: block; + border-style: solid; + border-width: 0 9px 9px 9px; + border-color: transparent transparent #cccccc transparent; + z-index: -1; + } + li { + min-width: 100px; + padding: 0 0.8em; + &.divider { + height: 1px; + margin: 0.3em 0; + background-color: lighten($orbit-bar-bgc, 60%); + } + &:hover, &.active { + background-color: #0095CF; + a { + color: #FFF; + } + } + } + a { + color: $orbit-bar-bgc-lighter; + font-size: 0.8em; + display: block; + padding: 0.5em 0; + white-space: nowrap; + } + } + } + } + } + .orbit-bar-menu { + float: left; + .orbit-bar-logo { + @extend .orbitMenuLink; + padding: 0; + background-position: center; + background-repeat: no-repeat; + background-image: url('<%= asset_path 'orbit-logo.svg' %>'); + background-image: url('<%= asset_path 'orbit-logo.png' %>')\9; + & + ul { + left: 0; + } + } + .orbit-bar-home { + @extend .orbitMenuLink; + padding: 0; + } + } + .orbit-bar-title { + display: none; + top: 0; + margin: 0 2em; + padding: 0.3em 0; + color: #FFF; + font-size: 1.4em; + text-align: center; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + a { + color: #FFF; + } + } + .orbit-bar-search-sign-language { + float: right; + #search { + @extend .orbitMenuLink; + cursor: default; + width: auto; + text-align: right; + input[type="search"] { + color: $orbit-bar-bgc-lighter; + border: none; + border-radius: 1.7em; + line-height: 1.3em; + padding: 0.2em 0.8em; + outline: none; + } + } + #language, #user, label { + @extend .orbitMenuLink; + width: auto; + font-size: 0.8em; + & + ul { + right: 0; + &:before { + right: 10px; + left: auto; + } + &:after { + right: 9px; + left: auto; + } + } + } + label { + padding: 0; + } + } +} + +@media (max-width: 479px) { + #orbit-bar { + .login-window { + width: 90%; + margin-left: -45%; + .login-body { + form { + width: 100%; + } + .input-prepend { + .input-xlarge { + width: 80%; + } + } + } + } + .orbit-bar-inner { + & > label { + display: block; + } + & > ul { + margin: 0 -15px; + background-color: $orbit-bar-bgc-darker; + & > li { + display: block; + float: none; + &:hover { + padding-bottom: 0; + } + & > ul { + display: block; + position: static; + margin: 0; + padding: 0; + background-color: transparent; + list-style: none; + border-radius: none; + border: none; + box-shadow: none; + &:before { + display: none; + } + li { + &.divider { + background-color: $orbit-bar-bgc; + margin: 0; + } + } + } + } + } + } + ul.orbit-bar-menu { + display: none; + float: none; + .orbit-bar-logo, .orbit-bar-home { + display: none; + } + } + .orbit-bar-title { + display: block; + } + ul.orbit-bar-search-sign-language { + display: none; + float: none; + & > li { + background-color: $orbit-bar-bgc-dark; + text-align: center; + #search { + text-align: center; + input[type="search"] { + width: 80%; + } + } + & + li { + width: 50%; + float: left; + border-top: 1px solid $orbit-bar-bgc-light; + box-shadow: inset -1px 0 0 $orbit-bar-bgc-light; + & + li { + box-shadow: none; + } + &:hover { + & > a, & > span { + background-color: $orbit-bar-bgc; + } + & > ul { + position: absolute; + width: 100%; + background-color: $orbit-bar-bgc-dark; + border-radius: 0; + } + } + } + & > ul { + display: none; + } + } + } + } +} \ No newline at end of file diff --git a/app/views/orbit_bar/index.html.erb b/app/views/orbit_bar/index.html.erb index bdfe198..d80ee33 100644 --- a/app/views/orbit_bar/index.html.erb +++ b/app/views/orbit_bar/index.html.erb @@ -1,5 +1,4 @@ <%#= content_for :page_specific_css do -%> - <%= stylesheet_link_tag "lib/orbit_bar/normalize" %> <%= stylesheet_link_tag "basic/icon" %> <%= stylesheet_link_tag "lib/orbit_bar/orbit-bar" %> <%# end -%> @@ -14,13 +13,13 @@
<%= form_tag "/sessions?locale=#{locale.to_s}", method: "post", :class => "container" do |f| %> -
- - " size="30" type="text"> +
+ + " size="30" type="text">
-
- - +
+ +