mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-01-06 22:40:14 -05:00
Second pass on refactor - starting to introduce new global navigation component
This commit is contained in:
John O'Nolan
parent
2e2e939419
commit
24f51e0e37
7 changed files with 1064 additions and 2 deletions
61
core/client/assets/sass/components/navigation.scss
Normal file
61
core/client/assets/sass/components/navigation.scss
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
//
|
||||
// Global Navigation
|
||||
// --------------------------------------------------
|
||||
|
||||
// The main wrapper, sets position and bg colour.
|
||||
.globalnav {
|
||||
height: 60px;
|
||||
@include position(fixed, 0px 0px auto 0px);
|
||||
z-index: 9999;
|
||||
background: $darkgrey;
|
||||
box-shadow: 0 0 2px rgba(6,8,8,0.15)
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
float: left;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.nav-label {
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
margin-top: 13px;
|
||||
padding: 0 10px;
|
||||
border-radius: 4px;
|
||||
@include transition(background 0.4s);
|
||||
}
|
||||
|
||||
.nav-item:hover .nav-label {
|
||||
background: darken($darkgrey, 2%);
|
||||
}
|
||||
|
||||
.ghost-logo {
|
||||
@include icon($i-ghost, 16px) { line-height: 0; }
|
||||
display: inline-block;
|
||||
float: left;
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
padding: 22px;
|
||||
color: lighten($grey, 20%);
|
||||
}
|
||||
.ghost-logo:hover,
|
||||
.ghost-logo:focus {
|
||||
color: $lightgrey;
|
||||
}
|
||||
|
||||
.user-item {
|
||||
float: right;
|
||||
|
||||
.image {
|
||||
display: inline-block;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
381
core/client/assets/sass/helpers/icons.scss
Executable file
381
core/client/assets/sass/helpers/icons.scss
Executable file
|
|
@ -0,0 +1,381 @@
|
|||
//
|
||||
// Pictos, by Drew Wilson - http://pictos.cc/
|
||||
// Icon-font is generated by http://icomoon.co
|
||||
// --------------------------------------------------
|
||||
|
||||
@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;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// The Icon (before) Mixin
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin icon($char, $size: '', $color: '') {
|
||||
&:before {
|
||||
// Base
|
||||
font-family: "GhostIcons";
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
vertical-align: -7%;
|
||||
text-transform:none;
|
||||
speak: none;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
//Function
|
||||
content: '#{$char}';
|
||||
@if $size != '' {
|
||||
font-size: $size;
|
||||
}
|
||||
@if $color != '' {
|
||||
color: $color;
|
||||
}
|
||||
@content;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration:none;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// The Icon (after) Mixin
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin icon-after($char, $size: '', $color: '') {
|
||||
&:after {
|
||||
// Base
|
||||
font-family: "GhostIcons";
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
vertical-align: -7%;
|
||||
text-transform:none;
|
||||
speak: none;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
// Function
|
||||
content: '#{$char}';
|
||||
@if $size != '' {
|
||||
font-size: $size;
|
||||
}
|
||||
@if $color != '' {
|
||||
color: $color;
|
||||
}
|
||||
@content;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration:none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Icon Variables
|
||||
// --------------------------------------------------
|
||||
// For accessibility, icon characters in the icon font are stored in Unicode's
|
||||
// Private Use Area characters. This means that screen readers won't attempt to
|
||||
// read them out loud. For code maintainability, we then store these Unicode
|
||||
// references inside Sass variables.
|
||||
//
|
||||
|
||||
// Placeholder
|
||||
$i: \e018;
|
||||
|
||||
// Icons
|
||||
$i-ghost: \e000;
|
||||
$i-ghost-logo: \e600;
|
||||
$i-chevron-down: \e001;
|
||||
$i-users: \e002;
|
||||
$i-tag: \e003;
|
||||
$i-tablet: \e004;
|
||||
$i-menu: \e005;
|
||||
$i-settings: \e006;
|
||||
$i-search: \e007;
|
||||
$i-search-left: \e008;
|
||||
$i-rss: \e009;
|
||||
$i-preview: \e00a;
|
||||
$i-app: \e00b;
|
||||
$i-pin: \e00c;
|
||||
$i-pc: \e00d;
|
||||
$i-pacman: \e00e;
|
||||
$i-edit: \e00f;
|
||||
$i-mobile: \e010;
|
||||
$i-image: \e011;
|
||||
$i-mail: \e012;
|
||||
$i-list: \e013;
|
||||
$i-info: \e014;
|
||||
$i-home: \e015;
|
||||
$i-grid: \e016;
|
||||
$i-fullscreen: \e017;
|
||||
$i-question: \e018;
|
||||
$i-external: \e019;
|
||||
$i-error: \e01a;
|
||||
$i-comments: \e01b;
|
||||
$i-close: \e01c;
|
||||
$i-chevron: \e01d;
|
||||
$i-chevron-left: \e11d;
|
||||
$i-calendar: \e01e;
|
||||
$i-archive: \e01f;
|
||||
$i-services: \e020;
|
||||
$i-appearance: \e021;
|
||||
$i-video: \e022;
|
||||
$i-trash: \e023;
|
||||
$i-reply: \e024;
|
||||
$i-stats: \e025;
|
||||
$i-featured: \e026;
|
||||
$i-unfeatured: \e027;
|
||||
$i-clock: \e028;
|
||||
$i-settings2: \e029;
|
||||
$i-camera: \e02a;
|
||||
$i-power: \e02b;
|
||||
$i-lock: \e02c;
|
||||
$i-content: \e02d;
|
||||
$i-user: \e02e;
|
||||
$i-support: \e02f;
|
||||
$i-success: \e030;
|
||||
$i-notification: \e031;
|
||||
$i-add: \e032;
|
||||
$i-check: \e033;
|
||||
$i-x: \e034;
|
||||
$i-link: \e035;
|
||||
$i-camera: \e036;
|
||||
$i-repost: \e037;
|
||||
$i-weather-rain: \e038;
|
||||
$i-weather-sun: \e039;
|
||||
$i-weather-partial: \e03a;
|
||||
$i-weather-snow: \e03b;
|
||||
$i-weather-cloudy: \e03c;
|
||||
$i-lightning: \e03d;
|
||||
$i-code: \e03e;
|
||||
|
||||
|
||||
//
|
||||
// Icon Class Styles
|
||||
// --------------------------------------------------
|
||||
|
||||
[class*=icon-] {
|
||||
&:before {
|
||||
// Base
|
||||
font-family: "GhostIcons";
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
vertical-align: -7%;
|
||||
text-transform:none;
|
||||
speak: none;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Icon Classes
|
||||
// --------------------------------------------------
|
||||
|
||||
.icon-ghost:before {
|
||||
content: '#{$i-ghost}';
|
||||
}
|
||||
.icon-ghost-logo:before {
|
||||
content: '#{$i-ghost-logo}';
|
||||
}
|
||||
.icon-chevron-down:before {
|
||||
content: '#{$i-chevron-down}';
|
||||
}
|
||||
.icon-users:before {
|
||||
content: '#{$i-users}';
|
||||
}
|
||||
.icon-tag:before {
|
||||
content: '#{$i-tag}';
|
||||
}
|
||||
.icon-tablet:before {
|
||||
content: '#{$i-tablet}';
|
||||
}
|
||||
.icon-menu:before {
|
||||
content: '#{$i-menu}';
|
||||
}
|
||||
.icon-settings:before {
|
||||
content: '#{$i-settings}';
|
||||
}
|
||||
.icon-search:before {
|
||||
content: '#{$i-search}';
|
||||
}
|
||||
.icon-search-left:before {
|
||||
content: '#{$i-search-left}';
|
||||
}
|
||||
.icon-rss:before {
|
||||
content: '#{$i-rss}';
|
||||
}
|
||||
.icon-preview:before {
|
||||
content: '#{$i-preview}';
|
||||
}
|
||||
.icon-app:before {
|
||||
content: '#{$i-app}';
|
||||
}
|
||||
.icon-pin:before {
|
||||
content: '#{$i-pin}';
|
||||
}
|
||||
.icon-pc:before {
|
||||
content: '#{$i-pc}';
|
||||
}
|
||||
.icon-pacman:before {
|
||||
content: '#{$i-pacman}';
|
||||
}
|
||||
.icon-edit:before {
|
||||
content: '#{$i-edit}';
|
||||
}
|
||||
.icon-mobile:before {
|
||||
content: '#{$i-mobile}';
|
||||
}
|
||||
.icon-image:before {
|
||||
content: '#{$i-image}';
|
||||
}
|
||||
.icon-mail:before {
|
||||
content: '#{$i-mail}';
|
||||
}
|
||||
.icon-list:before {
|
||||
content: '#{$i-list}';
|
||||
}
|
||||
.icon-info:before {
|
||||
content: '#{$i-info}';
|
||||
}
|
||||
.icon-home:before {
|
||||
content: '#{$i-home}';
|
||||
}
|
||||
.icon-grid:before {
|
||||
content: '#{$i-grid}';
|
||||
}
|
||||
.icon-fullscreen:before {
|
||||
content: '#{$i-fullscreen}';
|
||||
}
|
||||
.icon-question:before {
|
||||
content: '#{$i-question}';
|
||||
}
|
||||
.icon-external:before {
|
||||
content: '#{$i-external}';
|
||||
}
|
||||
.icon-error:before {
|
||||
content: '#{$i-error}';
|
||||
}
|
||||
.icon-comments:before {
|
||||
content: '#{$i-comments}';
|
||||
}
|
||||
.icon-close:before {
|
||||
content: '#{$i-close}';
|
||||
}
|
||||
.icon-chevron:before {
|
||||
content: '#{$i-chevron}';
|
||||
}
|
||||
.icon-chevron-left:before {
|
||||
content: '#{$i-chevron-left}';
|
||||
}
|
||||
.icon-calendar:before {
|
||||
content: '#{$i-calendar}';
|
||||
}
|
||||
.icon-archive:before {
|
||||
content: '#{$i-archive}';
|
||||
}
|
||||
.icon-services:before {
|
||||
content: '#{$i-services}';
|
||||
}
|
||||
.icon-appearance:before {
|
||||
content: '#{$i-appearance}';
|
||||
}
|
||||
.icon-video:before {
|
||||
content: '#{$i-video}';
|
||||
}
|
||||
.icon-trash:before {
|
||||
content: '#{$i-trash}';
|
||||
}
|
||||
.icon-reply:before {
|
||||
content: '#{$i-reply}';
|
||||
}
|
||||
.icon-stats:before {
|
||||
content: '#{$i-stats}';
|
||||
}
|
||||
.icon-featured:before {
|
||||
content: '#{$i-featured}';
|
||||
}
|
||||
.icon-unfeatured:before {
|
||||
content: '#{$i-unfeatured}';
|
||||
}
|
||||
.icon-clock:before {
|
||||
content: '#{$i-clock}';
|
||||
}
|
||||
.icon-settings2:before {
|
||||
content: '#{$i-settings2}';
|
||||
}
|
||||
.icon-camera:before {
|
||||
content: '#{$i-camera}';
|
||||
}
|
||||
.icon-power:before {
|
||||
content: '#{$i-power}';
|
||||
}
|
||||
.icon-lock:before {
|
||||
content: '#{$i-lock}';
|
||||
}
|
||||
.icon-content:before {
|
||||
content: '#{$i-content}';
|
||||
}
|
||||
.icon-user:before {
|
||||
content: '#{$i-user}';
|
||||
}
|
||||
.icon-support:before {
|
||||
content: '#{$i-support}';
|
||||
}
|
||||
.icon-success:before {
|
||||
content: '#{$i-success}';
|
||||
}
|
||||
.icon-notification:before {
|
||||
content: '#{$i-notification}';
|
||||
}
|
||||
.icon-add:before {
|
||||
content: '#{$i-add}';
|
||||
}
|
||||
.icon-check:before {
|
||||
content: '#{$i-check}';
|
||||
}
|
||||
.icon-x:before {
|
||||
content: '#{$i-x}';
|
||||
}
|
||||
.icon-link:before {
|
||||
content: '#{$i-link}';
|
||||
}
|
||||
.icon-camera:before {
|
||||
content: '#{$i-camera}';
|
||||
}
|
||||
.icon-repost:before {
|
||||
content: '#{$i-repost}';
|
||||
}
|
||||
.icon-weather-rain:before {
|
||||
content: '#{$i-weather-rain}';
|
||||
}
|
||||
.icon-weather-sun:before {
|
||||
content: '#{$i-weather-sun}';
|
||||
}
|
||||
.icon-weather-partial:before {
|
||||
content: '#{$i-weather-partial}';
|
||||
}
|
||||
.icon-weather-snow:before {
|
||||
content: '#{$i-weather-snow}';
|
||||
}
|
||||
.icon-weather-cloudy:before {
|
||||
content: '#{$i-weather-cloudy}';
|
||||
}
|
||||
.icon-lightning:before {
|
||||
content: '#{$i-lightning}';
|
||||
}
|
||||
57
core/client/assets/sass/patterns/global.scss
Normal file
57
core/client/assets/sass/patterns/global.scss
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
//
|
||||
// Globals
|
||||
// --------------------------------------------------
|
||||
|
||||
*, *:before, *:after {
|
||||
@include box-sizing(border-box);
|
||||
}
|
||||
|
||||
html {
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
a, a:active {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
//
|
||||
// Utilities
|
||||
// --------------------------------------------------
|
||||
|
||||
.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;
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
position: static;
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
clip: auto;
|
||||
}
|
||||
}
|
||||
|
|
@ -5,6 +5,7 @@
|
|||
@import "_bourbon"; // via Bower http://bourbon.io/
|
||||
@import "helpers/variables";
|
||||
@import "helpers/mixins";
|
||||
@import "helpers/icons";
|
||||
|
||||
|
||||
//
|
||||
|
|
@ -18,12 +19,13 @@
|
|||
// Patterns - Re-usable styles
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
@import "patterns/global";
|
||||
|
||||
//
|
||||
// Components - User interface objects
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "components/navigation";
|
||||
|
||||
|
||||
//
|
||||
|
|
|
|||
|
|
@ -0,0 +1,244 @@
|
|||
<div class="globalnav">
|
||||
<div class="navigation">
|
||||
|
||||
<a class="ghost-logo nav-item" data-item="search" href="/">
|
||||
<div class="invisible">Ghost</div>
|
||||
</a>
|
||||
|
||||
<div class="desktop-center">
|
||||
|
||||
<div class="nav-item categories menu-holder no-tablet no-mobile active" data-item="search" href="/" data-element="categories-dropdown" data-header-dropdown="categories">
|
||||
<div class="nav-label"><em>Categories<span class="menu-arrow"></span></em></div>
|
||||
|
||||
<div class="menu-wrapper">
|
||||
<div class="menu">
|
||||
<div class="categories-dropdown">
|
||||
<div class="inner">
|
||||
|
||||
<div class="categories">
|
||||
<div class="category-item" data-hover="show-subcategory" data-category-id="141" data-href="/browse/business" data-tappable="true">
|
||||
<span class="category-label">Business</span>
|
||||
</div>
|
||||
|
||||
<div class="category-item" data-hover="show-subcategory" data-category-id="84" data-href="/browse/sales-marketing" data-tappable="true">
|
||||
<span class="category-label">Sales & Marketing</span>
|
||||
</div>
|
||||
|
||||
<div class="category-item" data-hover="show-subcategory" data-category-id="80" data-href="/browse/funding" data-tappable="true">
|
||||
<span class="category-label">Funding</span>
|
||||
</div>
|
||||
|
||||
<div class="category-item" data-hover="show-subcategory" data-category-id="87" data-href="/browse/product-design" data-tappable="true">
|
||||
<span class="category-label">Product & Design</span>
|
||||
</div>
|
||||
<div class="category-item" data-hover="show-subcategory" data-category-id="94" data-href="/browse/technology" data-tappable="true">
|
||||
<span class="category-label">Technology</span>
|
||||
</div>
|
||||
<div class="category-item" data-hover="show-subcategory" data-category-id="93" data-href="/browse/skills-management" data-tappable="true">
|
||||
<span class="category-label">Skills & Management</span>
|
||||
</div>
|
||||
<div class="category-item" data-hover="show-subcategory" data-category-id="132" data-href="/browse/industries" data-tappable="true">
|
||||
<span class="category-label">Industries</span>
|
||||
</div>
|
||||
<div class="category-item" data-hover="show-subcategory" data-category-id="150" data-href="/browse/other" data-tappable="true">
|
||||
<span class="category-label">Other</span>
|
||||
</div>
|
||||
</div><!--.categories-->
|
||||
|
||||
<div class="side-menu">
|
||||
<div class="subcategories" data-category-id="141">
|
||||
<div class="subcategory-item root-category" data-href="/browse/business">Business</div>
|
||||
<div class="subcategory-item" data-href="/browse/business/career-advice">Career Advice</div>
|
||||
<div class="subcategory-item" data-href="/browse/business/branding">Branding</div>
|
||||
<div class="subcategory-item" data-href="/browse/business/financial-consulting">Financial Consulting</div>
|
||||
<div class="subcategory-item" data-href="/browse/business/customer-engagement">Customer Engagement</div>
|
||||
<div class="subcategory-item" data-href="/browse/business/strategy">Strategy</div>
|
||||
<div class="subcategory-item" data-href="/browse/business/sectors">Sectors</div>
|
||||
<div class="subcategory-item" data-href="/browse/business/getting-started">Getting Started</div>
|
||||
<div class="subcategory-item" data-href="/browse/business/human-resources">Human Resources</div>
|
||||
<div class="subcategory-item" data-href="/browse/business/business-development">Business Development</div>
|
||||
<div class="subcategory-item" data-href="/browse/business/legal">Legal</div>
|
||||
<div class="subcategory-item" data-href="/browse/business/other">Other</div>
|
||||
</div>
|
||||
<div class="subcategories" data-category-id="84">
|
||||
<div class="subcategory-item root-category" data-href="/browse/sales-marketing">Sales & Marketing</div>
|
||||
<div class="subcategory-item" data-href="/browse/sales-marketing/social-media-marketing">Social Media Marketing</div>
|
||||
<div class="subcategory-item" data-href="/browse/sales-marketing/search-engine-optimization">Search Engine Optimization</div>
|
||||
<div class="subcategory-item" data-href="/browse/sales-marketing/public-relations">Public Relations</div>
|
||||
<div class="subcategory-item" data-href="/browse/marketing-advertising/branding">Branding</div>
|
||||
<div class="subcategory-item" data-href="/browse/marketing-advertising/publishing">Publishing</div>
|
||||
<div class="subcategory-item" data-href="/browse/sales-marketing/inbound-marketing">Inbound Marketing</div>
|
||||
<div class="subcategory-item" data-href="/browse/sales-marketing/email-marketing">Email Marketing</div>
|
||||
<div class="subcategory-item" data-href="/browse/marketing-advertising/copywriting">Copywriting</div>
|
||||
<div class="subcategory-item" data-href="/browse/sales-marketing/growth-strategy">Growth Strategy</div>
|
||||
<div class="subcategory-item" data-href="/browse/sales-marketing/search-engine-marketing">Search Engine Marketing</div>
|
||||
<div class="subcategory-item" data-href="/browse/sales-marketing/sales-lead-generation">Sales & Lead Generation</div>
|
||||
<div class="subcategory-item" data-href="/browse/sales-marketing/advertising">Advertising</div>
|
||||
<div class="subcategory-item" data-href="/browse/sales-marketing/other">Other</div>
|
||||
</div>
|
||||
<div class="subcategories" data-category-id="80">
|
||||
<div class="subcategory-item root-category" data-href="/browse/funding">Funding</div>
|
||||
<div class="subcategory-item" data-href="/browse/raising-capital/crowdfunding">Crowdfunding</div>
|
||||
<div class="subcategory-item" data-href="/browse/raising-capital/kickstarter">Kickstarter</div>
|
||||
<div class="subcategory-item" data-href="/browse/raising-capital/venture-capital">Venture Capital</div>
|
||||
<div class="subcategory-item" data-href="/browse/funding/finance">Finance</div>
|
||||
<div class="subcategory-item" data-href="/browse/funding/bootstrapping">Bootstrapping</div>
|
||||
<div class="subcategory-item" data-href="/browse/funding/nonprofit">Nonprofit</div>
|
||||
<div class="subcategory-item" data-href="/browse/funding/other">Other</div>
|
||||
</div>
|
||||
<div class="subcategories" data-category-id="87">
|
||||
<div class="subcategory-item root-category" data-href="/browse/product-design">Product & Design</div>
|
||||
<div class="subcategory-item" data-href="/browse/product-design/identity">Identity</div>
|
||||
<div class="subcategory-item" data-href="/browse/product-design/user-experience">User Experience</div>
|
||||
<div class="subcategory-item" data-href="/browse/product-design/lean-startup">Lean Startup</div>
|
||||
<div class="subcategory-item" data-href="/browse/product-design/product-management">Product Management</div>
|
||||
<div class="subcategory-item" data-href="/browse/product-design/metrics-analytics">Metrics & Analytics</div>
|
||||
<div class="subcategory-item" data-href="/browse/product-design/other">Other</div>
|
||||
</div>
|
||||
<div class="subcategories" data-category-id="94">
|
||||
<div class="subcategory-item root-category" data-href="/browse/technology">Technology</div>
|
||||
<div class="subcategory-item" data-href="/browse/technology/wordpress">Wordpress</div>
|
||||
<div class="subcategory-item" data-href="/browse/technology/software-development">Software Development</div>
|
||||
<div class="subcategory-item" data-href="/browse/technology/mobile">Mobile</div>
|
||||
<div class="subcategory-item" data-href="/browse/technology/ruby">Ruby</div>
|
||||
<div class="subcategory-item" data-href="/browse/technology/crm">CRM</div>
|
||||
<div class="subcategory-item" data-href="/browse/technology/innovation">Innovation</div>
|
||||
<div class="subcategory-item" data-href="/browse/technology/cloud">Cloud</div>
|
||||
<div class="subcategory-item" data-href="/browse/technology/other">Other</div>
|
||||
</div>
|
||||
<div class="subcategories" data-category-id="93">
|
||||
<div class="subcategory-item root-category" data-href="/browse/skills-management">Skills & Management</div>
|
||||
<div class="subcategory-item" data-href="/browse/skills-management/productivity">Productivity</div>
|
||||
<div class="subcategory-item" data-href="/browse/skills-management/entrepreneurship">Entrepreneurship</div>
|
||||
<div class="subcategory-item" data-href="/browse/skills-management/public-speaking">Public Speaking</div>
|
||||
<div class="subcategory-item" data-href="/browse/skills-management/leadership">Leadership</div>
|
||||
<div class="subcategory-item" data-href="/browse/skills-management/coaching">Coaching</div>
|
||||
<div class="subcategory-item" data-href="/browse/skills-management/other">Other</div>
|
||||
</div>
|
||||
<div class="subcategories" data-category-id="132">
|
||||
<div class="subcategory-item root-category" data-href="/browse/industries">Industries</div>
|
||||
<div class="subcategory-item" data-href="/browse/industries/saas">SaaS</div>
|
||||
<div class="subcategory-item" data-href="/browse/industries/e-commerce">E-commerce</div>
|
||||
<div class="subcategory-item" data-href="/browse/industries/education">Education</div>
|
||||
<div class="subcategory-item" data-href="/browse/industries/real-estate">Real Estate</div>
|
||||
<div class="subcategory-item" data-href="/browse/industries/restaurant-retail">Restaurant & Retail</div>
|
||||
<div class="subcategory-item" data-href="/browse/industries/marketplaces">Marketplaces</div>
|
||||
<div class="subcategory-item" data-href="/browse/industries/nonprofit">Nonprofit</div>
|
||||
<div class="subcategory-item" data-href="/browse/industries/other">Other</div>
|
||||
</div>
|
||||
</div><!--.side-menu-->
|
||||
|
||||
</div><!--.inner-->
|
||||
</div><!--.categories-dropdown-->
|
||||
</div><!--.menu-->
|
||||
</div><!--.menu-wrapper-->
|
||||
</div><!--.menu-holder-->
|
||||
|
||||
<div class="search-box no-tablet no-mobile">
|
||||
<form action="#" onsubmit="return false;">
|
||||
<div class="input-wrapper">
|
||||
<input placeholder="Search" type="text" name="search_query" class="search_query noglow" value="">
|
||||
</div>
|
||||
<div class="button-wrapper">
|
||||
<i class="clear-search"></i>
|
||||
<button type="submit" class="btn-clear submit-search">
|
||||
<span>Search</span>
|
||||
<i class="search-glass"></i>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="sections">
|
||||
<a href="/" class="nav-item search internal active" data-item="search">
|
||||
<div class="nav-label"><em>Browse</em></div>
|
||||
</a>
|
||||
<a class="nav-item internal" data-item="questions" href="/questions">
|
||||
<div class="nav-label"><em>Answers</em></div>
|
||||
</a>
|
||||
<a class="nav-item live internal" data-item="live" href="/live/upcoming">
|
||||
<div class="nav-label">
|
||||
<em>Live</em>
|
||||
<sup>NEW</sup>
|
||||
</div>
|
||||
</a>
|
||||
<a class="nav-item calls internal" data-item="calls" href="/calls">
|
||||
<div class="nav-label">
|
||||
<em>Calls</em>
|
||||
<div class="unread-badge-wrapper">
|
||||
<div class="unread-badge" data-badge="incoming-calls"></div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="nav-item inbox internal" data-item="inbox" href="/inbox">
|
||||
<div class="nav-label">
|
||||
<em>Inbox</em>
|
||||
<div class="unread-badge-wrapper">
|
||||
<div class="unread-badge" data-badge="unread-messages"></div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div><!--.sections-->
|
||||
|
||||
</div><!--.desktop-center-->
|
||||
|
||||
<div class="nav-item user-item menu-holder internal" data-item="settings" data-href="/account" data-header-dropdown="me-menu">
|
||||
<div class="nav-label">
|
||||
<div class="image"><img src="https://s3.amazonaws.com/clarityfm-production/users/pictures/8389/list_square/75e958a6674a7d68fe0d575fb235116c.jpg?1354967814" alt="John O'Nolan"></div>
|
||||
<div class="name">
|
||||
John O'Nolan
|
||||
<small>Profile & Settings</small>
|
||||
</div>
|
||||
<div class="me">
|
||||
<em>
|
||||
Me<span class="count hidden" data-burger-menu-badge=""></span><span class="menu-arrow"></span>
|
||||
</em>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="menu-wrapper">
|
||||
<div class="menu">
|
||||
<a class="nav-item internal" data-item="settings" href="/account">
|
||||
<div class="nav-label">Account</div>
|
||||
</a>
|
||||
<a class="nav-item internal" data-item="calls" href="/calls">
|
||||
<div class="nav-label">
|
||||
<em>Calls</em>
|
||||
<div class="unread-badge-wrapper">
|
||||
<div class="unread-badge" data-badge="incoming-calls"></div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="nav-item internal" data-item="inbox" href="/inbox">
|
||||
<div class="nav-label">
|
||||
<em>Inbox</em>
|
||||
<div class="unread-badge-wrapper">
|
||||
<div class="unread-badge" data-badge="unread-messages"></div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="nav-item internal" data-item="favorites" href="/favorites">
|
||||
<div class="nav-label">Favorites</div>
|
||||
</a>
|
||||
<a class="nav-item internal separator" data-item="settings" href="/settings/profile">
|
||||
<div class="nav-label">Edit Profile</div>
|
||||
</a>
|
||||
<a class="nav-item internal" data-item="settings" href="/settings/account">
|
||||
<div class="nav-label">Settings</div>
|
||||
</a>
|
||||
<a class="nav-item external separator" target="_blank" href="http://help.clarity.fm">
|
||||
<div class="nav-label">Support</div>
|
||||
</a>
|
||||
<div class="nav-item internal logout separator" data-action="logout">
|
||||
<div class="nav-label">Logout</div>
|
||||
</div>
|
||||
</div><!--menu-->
|
||||
</div><!--menu-wrapper-->
|
||||
</div><!--menu-holder-->
|
||||
|
||||
<a class="nav-item favorites-item internal" data-item="favorites" href="/favorites">
|
||||
<div class="nav-label"><em>Favorites</em></div>
|
||||
</a>
|
||||
|
||||
</div><!--navigation-->
|
||||
</div><!--globalnav-->
|
||||
317
core/client/docs/dist/css/ghost-ui.css
vendored
317
core/client/docs/dist/css/ghost-ui.css
vendored
|
|
@ -1,3 +1,213 @@
|
|||
@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"; }
|
||||
|
||||
/* ==========================================================================
|
||||
Normalize.scss settings
|
||||
========================================================================== */
|
||||
|
|
@ -368,3 +578,110 @@ table {
|
|||
td,
|
||||
th {
|
||||
padding: 0; }
|
||||
|
||||
*, *:before, *:after {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box; }
|
||||
|
||||
html {
|
||||
-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; }
|
||||
|
||||
.globalnav {
|
||||
height: 60px;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
bottom: auto;
|
||||
left: 0px;
|
||||
z-index: 9999;
|
||||
background: #242628;
|
||||
box-shadow: 0 0 2px rgba(6, 8, 8, 0.15); }
|
||||
|
||||
.nav-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
float: left;
|
||||
color: #fff; }
|
||||
|
||||
.nav-label {
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
margin-top: 13px;
|
||||
padding: 0 10px;
|
||||
border-radius: 4px;
|
||||
-webkit-transition: background 0.4s;
|
||||
-moz-transition: background 0.4s;
|
||||
transition: background 0.4s; }
|
||||
|
||||
.nav-item:hover .nav-label {
|
||||
background: #1f2123; }
|
||||
|
||||
.ghost-logo {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
padding: 22px;
|
||||
color: #656d71; }
|
||||
.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: 16px;
|
||||
line-height: 0; }
|
||||
.ghost-logo:hover {
|
||||
text-decoration: none; }
|
||||
|
||||
.ghost-logo:hover,
|
||||
.ghost-logo:focus {
|
||||
color: #e2edf2; }
|
||||
|
||||
.user-item {
|
||||
float: right; }
|
||||
.user-item .image {
|
||||
display: inline-block; }
|
||||
.user-item .image img {
|
||||
display: block;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 100%; }
|
||||
|
|
|
|||
2
core/client/docs/dist/css/ghost-ui.min.css
vendored
2
core/client/docs/dist/css/ghost-ui.min.css
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue