diff --git a/core/client/assets/sass/components/navigation.scss b/core/client/assets/sass/components/navigation.scss index c130e360e0..9b306c28d7 100644 --- a/core/client/assets/sass/components/navigation.scss +++ b/core/client/assets/sass/components/navigation.scss @@ -98,10 +98,12 @@ small { display: none; // hide until mobile - font-size: 12px; + font-size: 11px; + text-transform: none; + letter-spacing: 0; color: #cacaca; margin-top: 0; - line-height: 19px; + line-height: 12px; } } &:hover .name { @@ -112,18 +114,79 @@ }//.user-menu -/* mobile styles +// +// Mobile +// -------------------------------------------------- -.name { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - line-height: 19px; - padding-bottom: 5px; +@media (max-width: 1025px) { - small { - display: block; + // Fixed width, position left + .global-nav { + width: 260px; + height: auto; + top: 0; + bottom: 0; + left: 0; + overflow: auto; } -} -*/ \ No newline at end of file + .nav-item { + position: relative; + float: none; + height: auto; + margin: 0; + padding: 0; + } + + // Convert to full-width mobile-friendly + .nav-label { + display: block; + height: 44px; + line-height: 44px; + margin: 0; + padding: 0 15px; + border-radius: 0; + } + + // Drop it to the bottom of the menu + .user-menu { + height: auto; + padding: 15px; + @include position(absolute, auto 0px 0px 0px); + + .nav-label { + padding: 0; + height: auto; + } + + .image { + margin: 2px 10px 0 0; + } + + .name { + float: left; + margin: 0; + padding: 0 0 5px 0; + text-overflow: ellipsis; + white-space: nowrap; + line-height: 19px; + overflow: hidden; + + small { + display: block; + } + } + + &:hover { + color: rgba(255,255,255,0.9); + background: darken($darkgrey, 7%); + @include transition(all 0.1s); + } + &:hover .name { + background: transparent; + @include transition(none); + } + + } + +} \ No newline at end of file diff --git a/core/client/docs/dist/css/ghost-ui.css b/core/client/docs/dist/css/ghost-ui.css index 2f672e0c0e..5585386000 100644 --- a/core/client/docs/dist/css/ghost-ui.css +++ b/core/client/docs/dist/css/ghost-ui.css @@ -725,10 +725,12 @@ a, a:active { transition: background 0.5s; } .user-menu .name small { display: none; - font-size: 12px; + font-size: 11px; + text-transform: none; + letter-spacing: 0; color: #cacaca; margin-top: 0; - line-height: 19px; } + line-height: 12px; } .user-menu:hover .name { color: rgba(255, 255, 255, 0.9); background: #131415; @@ -736,18 +738,61 @@ a, a:active { -moz-transition: background 0.1s; transition: background 0.1s; } -/* mobile styles +@media (max-width: 1025px) { + .global-nav { + width: 260px; + height: auto; + top: 0; + bottom: 0; + left: 0; + overflow: auto; } -.name { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - line-height: 19px; - padding-bottom: 5px; + .nav-item { + position: relative; + float: none; + height: auto; + margin: 0; + padding: 0; } - small { - display: block; - } -} + .nav-label { + display: block; + height: 44px; + line-height: 44px; + margin: 0; + padding: 0 15px; + border-radius: 0; } -*/ + .user-menu { + height: auto; + padding: 15px; + position: absolute; + top: auto; + right: 0px; + bottom: 0px; + left: 0px; } + .user-menu .nav-label { + padding: 0; + height: auto; } + .user-menu .image { + margin: 2px 10px 0 0; } + .user-menu .name { + float: left; + margin: 0; + padding: 0 0 5px 0; + text-overflow: ellipsis; + white-space: nowrap; + line-height: 19px; + overflow: hidden; } + .user-menu .name small { + display: block; } + .user-menu:hover { + color: rgba(255, 255, 255, 0.9); + background: #131415; + -webkit-transition: all 0.1s; + -moz-transition: all 0.1s; + transition: all 0.1s; } + .user-menu:hover .name { + background: transparent; + -webkit-transition: none; + -moz-transition: none; + transition: none; } } diff --git a/core/client/docs/dist/css/ghost-ui.min.css b/core/client/docs/dist/css/ghost-ui.min.css index 22f4a2f41f..af554931d4 100644 --- a/core/client/docs/dist/css/ghost-ui.min.css +++ b/core/client/docs/dist/css/ghost-ui.min.css @@ -1 +1 @@ -@font-face{font-family:'GhostIcons';src:url("../fonts/icons.eot");src:url("../fonts/icons.eot?#iefix") format("embedded-opentype"),url("../fonts/icons.woff") format("woff"),url("../fonts/icons.ttf") format("truetype"),url("../fonts/icons.svg#icons") format("svg");font-weight:normal;font-style:normal}[class*=icon-]:before{font-family:"GhostIcons";font-weight:normal;font-style:normal;vertical-align:-7%;text-transform:none;speak:none;line-height:1;-webkit-font-smoothing:antialiased}[class*=icon-]:hover{text-decoration:none}.icon-ghost:before{content:"\e000"}.icon-ghost-logo:before{content:"\e600"}.icon-chevron-down:before{content:"\e001"}.icon-users:before{content:"\e002"}.icon-tag:before{content:"\e003"}.icon-tablet:before{content:"\e004"}.icon-menu:before{content:"\e005"}.icon-settings:before{content:"\e006"}.icon-search:before{content:"\e007"}.icon-search-left:before{content:"\e008"}.icon-rss:before{content:"\e009"}.icon-preview:before{content:"\e00a"}.icon-app:before{content:"\e00b"}.icon-pin:before{content:"\e00c"}.icon-pc:before{content:"\e00d"}.icon-pacman:before{content:"\e00e"}.icon-edit:before{content:"\e00f"}.icon-mobile:before{content:"\e010"}.icon-image:before{content:"\e011"}.icon-mail:before{content:"\e012"}.icon-list:before{content:"\e013"}.icon-info:before{content:"\e014"}.icon-home:before{content:"\e015"}.icon-grid:before{content:"\e016"}.icon-fullscreen:before{content:"\e017"}.icon-question:before{content:"\e018"}.icon-external:before{content:"\e019"}.icon-error:before{content:"\e01a"}.icon-comments:before{content:"\e01b"}.icon-close:before{content:"\e01c"}.icon-chevron:before{content:"\e01d"}.icon-chevron-left:before{content:"\e11d"}.icon-calendar:before{content:"\e01e"}.icon-archive:before{content:"\e01f"}.icon-services:before{content:"\e020"}.icon-appearance:before{content:"\e021"}.icon-video:before{content:"\e022"}.icon-trash:before{content:"\e023"}.icon-reply:before{content:"\e024"}.icon-stats:before{content:"\e025"}.icon-featured:before{content:"\e026"}.icon-unfeatured:before{content:"\e027"}.icon-clock:before{content:"\e028"}.icon-settings2:before{content:"\e029"}.icon-camera:before{content:"\e036"}.icon-power:before{content:"\e02b"}.icon-lock:before{content:"\e02c"}.icon-content:before{content:"\e02d"}.icon-user:before{content:"\e02e"}.icon-support:before{content:"\e02f"}.icon-success:before{content:"\e030"}.icon-notification:before{content:"\e031"}.icon-add:before{content:"\e032"}.icon-check:before{content:"\e033"}.icon-x:before{content:"\e034"}.icon-link:before{content:"\e035"}.icon-camera:before{content:"\e036"}.icon-repost:before{content:"\e037"}.icon-weather-rain:before{content:"\e038"}.icon-weather-sun:before{content:"\e039"}.icon-weather-partial:before{content:"\e03a"}.icon-weather-snow:before{content:"\e03b"}.icon-weather-cloudy:before{content:"\e03c"}.icon-lightning:before{content:"\e03d"}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font:62.5%/1.65 "Open Sans", sans-serif;-webkit-tap-highlight-color:transparent}body{width:100%}a,a:active{text-decoration:none}.show{display:block !important}.hidden{display:none !important;visibility:hidden !important}.invisible{visibility:hidden}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sr-only:active,.sr-only:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}.global-nav{height:60px;position:fixed;top:0px;right:0px;bottom:auto;left:0px;z-index:9999;background:#242628}.nav-item{position:relative;display:block;float:left;height:60px;padding-right:10px;font-size:1.1rem;letter-spacing:1px;font-weight:200;line-height:1.1em}.nav-label{height:33px;margin-top:14px;padding:10px 12px;color:rgba(255,255,255,0.7);text-transform:uppercase;border-radius:4px;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s}.nav-item.active .nav-label,.nav-item:hover .nav-label{color:rgba(255,255,255,0.9);background:#131415;-webkit-transition:all 0.1s;-moz-transition:all 0.1s;transition:all 0.1s}.ghost-logo{display:inline-block;float:left;height:60px;width:60px;padding:23px;color:#656d71;font-size:1.5rem;line-height:1em;-webkit-transition:color 0.5s;-moz-transition:color 0.5s;transition:color 0.5s}.ghost-logo:before{font-family:"GhostIcons";font-weight:normal;font-style:normal;vertical-align:-7%;text-transform:none;speak:none;line-height:1;-webkit-font-smoothing:antialiased;content:"\e000";font-size:14px;line-height:0}.ghost-logo:hover{text-decoration:none}.ghost-logo:hover,.ghost-logo:focus{color:#e2edf2;-webkit-transition:color 0.1s;-moz-transition:color 0.1s;transition:color 0.1s}.user-menu{position:absolute;top:0;right:0;padding:0;margin:0;cursor:pointer}.user-menu .nav-label{margin:0;padding:0 12px;background:none !important}.user-menu .image{float:left;margin:15px 8px 0 0}.user-menu .image img{display:block;width:30px;height:30px;border-radius:100%}.user-menu .name{float:right;height:33px;margin-top:14px;padding:10px 12px;border-radius:4px;-webkit-transition:background 0.5s;-moz-transition:background 0.5s;transition:background 0.5s}.user-menu .name small{display:none;font-size:12px;color:#cacaca;margin-top:0;line-height:19px}.user-menu:hover .name{color:rgba(255,255,255,0.9);background:#131415;-webkit-transition:background 0.1s;-moz-transition:background 0.1s;transition:background 0.1s} +@font-face{font-family:'GhostIcons';src:url("../fonts/icons.eot");src:url("../fonts/icons.eot?#iefix") format("embedded-opentype"),url("../fonts/icons.woff") format("woff"),url("../fonts/icons.ttf") format("truetype"),url("../fonts/icons.svg#icons") format("svg");font-weight:normal;font-style:normal}[class*=icon-]:before{font-family:"GhostIcons";font-weight:normal;font-style:normal;vertical-align:-7%;text-transform:none;speak:none;line-height:1;-webkit-font-smoothing:antialiased}[class*=icon-]:hover{text-decoration:none}.icon-ghost:before{content:"\e000"}.icon-ghost-logo:before{content:"\e600"}.icon-chevron-down:before{content:"\e001"}.icon-users:before{content:"\e002"}.icon-tag:before{content:"\e003"}.icon-tablet:before{content:"\e004"}.icon-menu:before{content:"\e005"}.icon-settings:before{content:"\e006"}.icon-search:before{content:"\e007"}.icon-search-left:before{content:"\e008"}.icon-rss:before{content:"\e009"}.icon-preview:before{content:"\e00a"}.icon-app:before{content:"\e00b"}.icon-pin:before{content:"\e00c"}.icon-pc:before{content:"\e00d"}.icon-pacman:before{content:"\e00e"}.icon-edit:before{content:"\e00f"}.icon-mobile:before{content:"\e010"}.icon-image:before{content:"\e011"}.icon-mail:before{content:"\e012"}.icon-list:before{content:"\e013"}.icon-info:before{content:"\e014"}.icon-home:before{content:"\e015"}.icon-grid:before{content:"\e016"}.icon-fullscreen:before{content:"\e017"}.icon-question:before{content:"\e018"}.icon-external:before{content:"\e019"}.icon-error:before{content:"\e01a"}.icon-comments:before{content:"\e01b"}.icon-close:before{content:"\e01c"}.icon-chevron:before{content:"\e01d"}.icon-chevron-left:before{content:"\e11d"}.icon-calendar:before{content:"\e01e"}.icon-archive:before{content:"\e01f"}.icon-services:before{content:"\e020"}.icon-appearance:before{content:"\e021"}.icon-video:before{content:"\e022"}.icon-trash:before{content:"\e023"}.icon-reply:before{content:"\e024"}.icon-stats:before{content:"\e025"}.icon-featured:before{content:"\e026"}.icon-unfeatured:before{content:"\e027"}.icon-clock:before{content:"\e028"}.icon-settings2:before{content:"\e029"}.icon-camera:before{content:"\e036"}.icon-power:before{content:"\e02b"}.icon-lock:before{content:"\e02c"}.icon-content:before{content:"\e02d"}.icon-user:before{content:"\e02e"}.icon-support:before{content:"\e02f"}.icon-success:before{content:"\e030"}.icon-notification:before{content:"\e031"}.icon-add:before{content:"\e032"}.icon-check:before{content:"\e033"}.icon-x:before{content:"\e034"}.icon-link:before{content:"\e035"}.icon-camera:before{content:"\e036"}.icon-repost:before{content:"\e037"}.icon-weather-rain:before{content:"\e038"}.icon-weather-sun:before{content:"\e039"}.icon-weather-partial:before{content:"\e03a"}.icon-weather-snow:before{content:"\e03b"}.icon-weather-cloudy:before{content:"\e03c"}.icon-lightning:before{content:"\e03d"}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font:62.5%/1.65 "Open Sans", sans-serif;-webkit-tap-highlight-color:transparent}body{width:100%}a,a:active{text-decoration:none}.show{display:block !important}.hidden{display:none !important;visibility:hidden !important}.invisible{visibility:hidden}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sr-only:active,.sr-only:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}.global-nav{height:60px;position:fixed;top:0px;right:0px;bottom:auto;left:0px;z-index:9999;background:#242628}.nav-item{position:relative;display:block;float:left;height:60px;padding-right:10px;font-size:1.1rem;letter-spacing:1px;font-weight:200;line-height:1.1em}.nav-label{height:33px;margin-top:14px;padding:10px 12px;color:rgba(255,255,255,0.7);text-transform:uppercase;border-radius:4px;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s}.nav-item.active .nav-label,.nav-item:hover .nav-label{color:rgba(255,255,255,0.9);background:#131415;-webkit-transition:all 0.1s;-moz-transition:all 0.1s;transition:all 0.1s}.ghost-logo{display:inline-block;float:left;height:60px;width:60px;padding:23px;color:#656d71;font-size:1.5rem;line-height:1em;-webkit-transition:color 0.5s;-moz-transition:color 0.5s;transition:color 0.5s}.ghost-logo:before{font-family:"GhostIcons";font-weight:normal;font-style:normal;vertical-align:-7%;text-transform:none;speak:none;line-height:1;-webkit-font-smoothing:antialiased;content:"\e000";font-size:14px;line-height:0}.ghost-logo:hover{text-decoration:none}.ghost-logo:hover,.ghost-logo:focus{color:#e2edf2;-webkit-transition:color 0.1s;-moz-transition:color 0.1s;transition:color 0.1s}.user-menu{position:absolute;top:0;right:0;padding:0;margin:0;cursor:pointer}.user-menu .nav-label{margin:0;padding:0 12px;background:none !important}.user-menu .image{float:left;margin:15px 8px 0 0}.user-menu .image img{display:block;width:30px;height:30px;border-radius:100%}.user-menu .name{float:right;height:33px;margin-top:14px;padding:10px 12px;border-radius:4px;-webkit-transition:background 0.5s;-moz-transition:background 0.5s;transition:background 0.5s}.user-menu .name small{display:none;font-size:11px;text-transform:none;letter-spacing:0;color:#cacaca;margin-top:0;line-height:12px}.user-menu:hover .name{color:rgba(255,255,255,0.9);background:#131415;-webkit-transition:background 0.1s;-moz-transition:background 0.1s;transition:background 0.1s}@media (max-width: 1025px){.global-nav{width:260px;height:auto;top:0;bottom:0;left:0;overflow:auto}.nav-item{position:relative;float:none;height:auto;margin:0;padding:0}.nav-label{display:block;height:44px;line-height:44px;margin:0;padding:0 15px;border-radius:0}.user-menu{height:auto;padding:15px;position:absolute;top:auto;right:0px;bottom:0px;left:0px}.user-menu .nav-label{padding:0;height:auto}.user-menu .image{margin:2px 10px 0 0}.user-menu .name{float:left;margin:0;padding:0 0 5px 0;text-overflow:ellipsis;white-space:nowrap;line-height:19px;overflow:hidden}.user-menu .name small{display:block}.user-menu:hover{color:rgba(255,255,255,0.9);background:#131415;-webkit-transition:all 0.1s;-moz-transition:all 0.1s;transition:all 0.1s}.user-menu:hover .name{background:transparent;-webkit-transition:none;-moz-transition:none;transition:none}}