Skip to content

Instantly share code, notes, and snippets.

@Grunny

Grunny/components.nav-account-dropdown.js

Last active August 30, 2016 09:35
Show Gist options
  • Save Grunny/ca817b9b6476377dbfd0de303d7c7598 to your computer and use it in GitHub Desktop.
Save Grunny/ca817b9b6476377dbfd0de303d7c7598 to your computer and use it in GitHub Desktop.
Download ZIP
Global Navigation
Raw
components.nav-account-dropdown.js
import Ember from 'ember';
export default Ember.Component.extend({
tagName: 'div',
classNames: ['wds-global-navigation__content-item', 'wds-global-navigation__account-navigation', 'wds-dropdown', 'wds-is-active']
});
Raw
components.nav-dropdown.js
import Ember from 'ember';
export default Ember.Component.extend({
tagName: 'div',
classNames: ['wds-global-navigation__content-item', 'wds-dropdown', 'wds-is-active']
});
Raw
components.nav-link-text.js
import Ember from 'ember';
export default Ember.Component.extend({
tagName: 'a',
classNames: ['wds-global-navigation__dropdown-link'],
attributeBindings: ['href'],
href: Ember.computed.oneWay('model.href')
});
Raw
components.nav-wrapper.js
import Ember from 'ember';
export default Ember.Component.extend({
tagName: 'div',
classNames: ['wds-global-navigation', 'sg-has-space-for-dropdowns']
});
Raw
controllers.application.js
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle',
model: {
"logo": {
"header": {
"type": "link-image",
"href": "http://fandom.wikia.com",
"image": "wds/full_fandom_logo",
"title": {
"type": "text",
"value": "Fandom"
}
}
},
"verticals": {
"links": [
{
"type": "link-branded",
"brand": "tv",
"title": {
"type": "translatable-text",
"key": "global-navigation-brandlink-vertical-tv"
},
"href": "http:\/\/tv.wikia.com"
},
{
"type": "link-branded",
"brand": "games",
"title": {
"type": "translatable-text",
"key": "global-navigation-brandlink-vertical-games"
},
"href": "http:\/\/games.wikia.com"
},
{
"type": "link-branded",
"brand": "movies",
"title": {
"type": "translatable-text",
"key": "global-navigation-brandlink-vertical-movies"
},
"href": "http:\/\/movies.wikia.com"
}
]
},
"wikis": {
"header": {
"type": "link-branded",
"brand": "wikis",
"href": "#",
"title": {
"type": "translatable-text",
"key": "global-navigation-brandlink-vertical-wikis"
}
},
"links": [
{
"type": "link-text",
"title": {
"type": "translatable-text",
"key": "global-navigation-brandlink-vertical-explorewikis"
},
"href": "#"
},
{
"type": "link-text",
"title": {
"type": "translatable-text",
"key": "global-navigation-brandlink-vertical-wikis-communitycentral"
},
"href": "#"
}
]
},
"search": {
"modules": {
"type": "search",
"results": {
"url": "http://wikia.com/search",
"param": "query"
},
"suggestions": {
"url": "http://wikia.com/search/suggestions",
"param": "query"
},
"placeholder-inactive": {
"type": "translatable-text",
"key": "global-navigation-search-placeholder-inactive"
},
"placeholder-active": {
"type": "translatable-text",
"key": "global-navigation-search-placeholder-active"
}
}
},
"anon": {
"header": {
"type": "link-image",
"href": "#",
"image": "anon-avatar",
"title": {
"type": "translatable-text",
"key": "global-navigation-userinfo-anon-avatar-title"
}
},
"links": [
{
"type": "register",
"title": {
"type": "translatable-text",
"key": "global-navigation-userinfo-signin-title"
},
"href": "#",
"param": "redirect"
},
{
"type": "link-text",
"title": {
"type": "translatable-text",
"key": "global-navigation-userinfo-register-title"
},
"subtitle": {
"type": "translatable-text",
"key": "global-navigation-userinfo-register-description"
},
"href": "#"
}
]
},
"user": {
"header": {
"type": "avatar",
"username": {
"type": "text",
"value": "Username"
},
"url": "http://static.wikia.nocookie.net/591dee3c-0ce9-48c4-96ee-a7bc437c238f/scale-to-width-down/50"
},
"links": [
{
"type": "link-text",
"href": "#",
"title": {
"type": "translatable-text",
"key": "global-navigation-userinfo-profile"
}
},
{
"type": "link-text",
"href": "#",
"title": {
"type": "translatable-text",
"key": "global-navigation-userinfo-talk"
}
},
{
"type": "link-text",
"href": "#",
"title": {
"type": "translatable-text",
"key": "global-navigation-userinfo-preferences"
}
},
{
"type": "link-text",
"href": "#",
"title": {
"type": "translatable-text",
"key": "global-navigation-userinfo-help"
}
},
{
"type": "link-text",
"href": "#",
"title": {
"type": "translatable-text",
"key": "global-navigation-userinfo-signout"
}
}
]
},
"notifications": {
"modules": {
"type": "notifications",
"url": "#",
"header": {
"type": "line-image",
"image": "wsd/notifications",
"title": {
"type": "translatable-text",
"key": "global-navigation-notifications"
}
}
}
},
"create_wiki": {
"header": {
"type": "link-text",
"title": {
"type": "translatable-text",
"key": "wikia-create-wiki-link-start-wikia"
},
"href": "#"
}
}
}
});
Raw
styles.app.css
.container-fluid,
.container {
margin-right: auto;
margin-left: auto; }
.container-fluid {
padding-right: 2rem;
padding-left: 2rem; }
.row {
box-sizing: border-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex: 0 1 auto;
-webkit-flex: 0 1 auto;
flex: 0 1 auto;
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -0.5rem;
margin-left: -0.5rem; }
.row.reverse {
-ms-flex-direction: row-reverse;
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse; }
.col.reverse {
-ms-flex-direction: column-reverse;
-webkit-flex-direction: column-reverse;
flex-direction: column-reverse; }
.col-xs,
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-offset-0,
.col-xs-offset-1,
.col-xs-offset-2,
.col-xs-offset-3,
.col-xs-offset-4,
.col-xs-offset-5,
.col-xs-offset-6,
.col-xs-offset-7,
.col-xs-offset-8,
.col-xs-offset-9,
.col-xs-offset-10,
.col-xs-offset-11,
.col-xs-offset-12 {
box-sizing: border-box;
-ms-flex: 0 0 auto;
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem; }
.col-xs {
-ms-flex-positive: 1;
-webkit-flex-grow: 1;
flex-grow: 1;
-ms-flex-preferred-size: 0;
-webkit-flex-basis: 0;
flex-basis: 0;
max-width: 100%; }
.col-xs-1 {
-ms-flex-preferred-size: 8.33333333%;
-webkit-flex-basis: 8.33333333%;
flex-basis: 8.33333333%;
max-width: 8.33333333%; }
.col-xs-2 {
-ms-flex-preferred-size: 16.66666667%;
-webkit-flex-basis: 16.66666667%;
flex-basis: 16.66666667%;
max-width: 16.66666667%; }
.col-xs-3 {
-ms-flex-preferred-size: 25%;
-webkit-flex-basis: 25%;
flex-basis: 25%;
max-width: 25%; }
.col-xs-4 {
-ms-flex-preferred-size: 33.33333333%;
-webkit-flex-basis: 33.33333333%;
flex-basis: 33.33333333%;
max-width: 33.33333333%; }
.col-xs-5 {
-ms-flex-preferred-size: 41.66666667%;
-webkit-flex-basis: 41.66666667%;
flex-basis: 41.66666667%;
max-width: 41.66666667%; }
.col-xs-6 {
-ms-flex-preferred-size: 50%;
-webkit-flex-basis: 50%;
flex-basis: 50%;
max-width: 50%; }
.col-xs-7 {
-ms-flex-preferred-size: 58.33333333%;
-webkit-flex-basis: 58.33333333%;
flex-basis: 58.33333333%;
max-width: 58.33333333%; }
.col-xs-8 {
-ms-flex-preferred-size: 66.66666667%;
-webkit-flex-basis: 66.66666667%;
flex-basis: 66.66666667%;
max-width: 66.66666667%; }
.col-xs-9 {
-ms-flex-preferred-size: 75%;
-webkit-flex-basis: 75%;
flex-basis: 75%;
max-width: 75%; }
.col-xs-10 {
-ms-flex-preferred-size: 83.33333333%;
-webkit-flex-basis: 83.33333333%;
flex-basis: 83.33333333%;
max-width: 83.33333333%; }
.col-xs-11 {
-ms-flex-preferred-size: 91.66666667%;
-webkit-flex-basis: 91.66666667%;
flex-basis: 91.66666667%;
max-width: 91.66666667%; }
.col-xs-12 {
-ms-flex-preferred-size: 100%;
-webkit-flex-basis: 100%;
flex-basis: 100%;
max-width: 100%; }
.col-xs-offset-0 {
margin-left: 0; }
.col-xs-offset-1 {
margin-left: 8.33333333%; }
.col-xs-offset-2 {
margin-left: 16.66666667%; }
.col-xs-offset-3 {
margin-left: 25%; }
.col-xs-offset-4 {
margin-left: 33.33333333%; }
.col-xs-offset-5 {
margin-left: 41.66666667%; }
.col-xs-offset-6 {
margin-left: 50%; }
.col-xs-offset-7 {
margin-left: 58.33333333%; }
.col-xs-offset-8 {
margin-left: 66.66666667%; }
.col-xs-offset-9 {
margin-left: 75%; }
.col-xs-offset-10 {
margin-left: 83.33333333%; }
.col-xs-offset-11 {
margin-left: 91.66666667%; }
.start-xs {
-ms-flex-pack: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
text-align: start; }
.center-xs {
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
text-align: center; }
.end-xs {
-ms-flex-pack: end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
text-align: end; }
.top-xs {
-ms-flex-align: start;
-webkit-align-items: flex-start;
-ms-grid-row-align: flex-start;
align-items: flex-start; }
.middle-xs {
-ms-flex-align: center;
-webkit-align-items: center;
-ms-grid-row-align: center;
align-items: center; }
.bottom-xs {
-ms-flex-align: end;
-webkit-align-items: flex-end;
-ms-grid-row-align: flex-end;
align-items: flex-end; }
.around-xs {
-ms-flex-pack: distribute;
-webkit-justify-content: space-around;
justify-content: space-around; }
.between-xs {
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between; }
.first-xs {
-ms-flex-order: -1;
-webkit-order: -1;
order: -1; }
.last-xs {
-ms-flex-order: 1;
-webkit-order: 1;
order: 1; }
@media only screen and (min-width: 48em) {
.container {
width: 49rem; }
.col-sm,
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-offset-0,
.col-sm-offset-1,
.col-sm-offset-2,
.col-sm-offset-3,
.col-sm-offset-4,
.col-sm-offset-5,
.col-sm-offset-6,
.col-sm-offset-7,
.col-sm-offset-8,
.col-sm-offset-9,
.col-sm-offset-10,
.col-sm-offset-11,
.col-sm-offset-12 {
box-sizing: border-box;
-ms-flex: 0 0 auto;
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem; }
.col-sm {
-ms-flex-positive: 1;
-webkit-flex-grow: 1;
flex-grow: 1;
-ms-flex-preferred-size: 0;
-webkit-flex-basis: 0;
flex-basis: 0;
max-width: 100%; }
.col-sm-1 {
-ms-flex-preferred-size: 8.33333333%;
-webkit-flex-basis: 8.33333333%;
flex-basis: 8.33333333%;
max-width: 8.33333333%; }
.col-sm-2 {
-ms-flex-preferred-size: 16.66666667%;
-webkit-flex-basis: 16.66666667%;
flex-basis: 16.66666667%;
max-width: 16.66666667%; }
.col-sm-3 {
-ms-flex-preferred-size: 25%;
-webkit-flex-basis: 25%;
flex-basis: 25%;
max-width: 25%; }
.col-sm-4 {
-ms-flex-preferred-size: 33.33333333%;
-webkit-flex-basis: 33.33333333%;
flex-basis: 33.33333333%;
max-width: 33.33333333%; }
.col-sm-5 {
-ms-flex-preferred-size: 41.66666667%;
-webkit-flex-basis: 41.66666667%;
flex-basis: 41.66666667%;
max-width: 41.66666667%; }
.col-sm-6 {
-ms-flex-preferred-size: 50%;
-webkit-flex-basis: 50%;
flex-basis: 50%;
max-width: 50%; }
.col-sm-7 {
-ms-flex-preferred-size: 58.33333333%;
-webkit-flex-basis: 58.33333333%;
flex-basis: 58.33333333%;
max-width: 58.33333333%; }
.col-sm-8 {
-ms-flex-preferred-size: 66.66666667%;
-webkit-flex-basis: 66.66666667%;
flex-basis: 66.66666667%;
max-width: 66.66666667%; }
.col-sm-9 {
-ms-flex-preferred-size: 75%;
-webkit-flex-basis: 75%;
flex-basis: 75%;
max-width: 75%; }
.col-sm-10 {
-ms-flex-preferred-size: 83.33333333%;
-webkit-flex-basis: 83.33333333%;
flex-basis: 83.33333333%;
max-width: 83.33333333%; }
.col-sm-11 {
-ms-flex-preferred-size: 91.66666667%;
-webkit-flex-basis: 91.66666667%;
flex-basis: 91.66666667%;
max-width: 91.66666667%; }
.col-sm-12 {
-ms-flex-preferred-size: 100%;
-webkit-flex-basis: 100%;
flex-basis: 100%;
max-width: 100%; }
.col-sm-offset-0 {
margin-left: 0; }
.col-sm-offset-1 {
margin-left: 8.33333333%; }
.col-sm-offset-2 {
margin-left: 16.66666667%; }
.col-sm-offset-3 {
margin-left: 25%; }
.col-sm-offset-4 {
margin-left: 33.33333333%; }
.col-sm-offset-5 {
margin-left: 41.66666667%; }
.col-sm-offset-6 {
margin-left: 50%; }
.col-sm-offset-7 {
margin-left: 58.33333333%; }
.col-sm-offset-8 {
margin-left: 66.66666667%; }
.col-sm-offset-9 {
margin-left: 75%; }
.col-sm-offset-10 {
margin-left: 83.33333333%; }
.col-sm-offset-11 {
margin-left: 91.66666667%; }
.start-sm {
-ms-flex-pack: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
text-align: start; }
.center-sm {
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
text-align: center; }
.end-sm {
-ms-flex-pack: end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
text-align: end; }
.top-sm {
-ms-flex-align: start;
-webkit-align-items: flex-start;
-ms-grid-row-align: flex-start;
align-items: flex-start; }
.middle-sm {
-ms-flex-align: center;
-webkit-align-items: center;
-ms-grid-row-align: center;
align-items: center; }
.bottom-sm {
-ms-flex-align: end;
-webkit-align-items: flex-end;
-ms-grid-row-align: flex-end;
align-items: flex-end; }
.around-sm {
-ms-flex-pack: distribute;
-webkit-justify-content: space-around;
justify-content: space-around; }
.between-sm {
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between; }
.first-sm {
-ms-flex-order: -1;
-webkit-order: -1;
order: -1; }
.last-sm {
-ms-flex-order: 1;
-webkit-order: 1;
order: 1; } }
@media only screen and (min-width: 64em) {
.container {
width: 65rem; }
.col-md,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-offset-0,
.col-md-offset-1,
.col-md-offset-2,
.col-md-offset-3,
.col-md-offset-4,
.col-md-offset-5,
.col-md-offset-6,
.col-md-offset-7,
.col-md-offset-8,
.col-md-offset-9,
.col-md-offset-10,
.col-md-offset-11,
.col-md-offset-12 {
box-sizing: border-box;
-ms-flex: 0 0 auto;
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem; }
.col-md {
-ms-flex-positive: 1;
-webkit-flex-grow: 1;
flex-grow: 1;
-ms-flex-preferred-size: 0;
-webkit-flex-basis: 0;
flex-basis: 0;
max-width: 100%; }
.col-md-1 {
-ms-flex-preferred-size: 8.33333333%;
-webkit-flex-basis: 8.33333333%;
flex-basis: 8.33333333%;
max-width: 8.33333333%; }
.col-md-2 {
-ms-flex-preferred-size: 16.66666667%;
-webkit-flex-basis: 16.66666667%;
flex-basis: 16.66666667%;
max-width: 16.66666667%; }
.col-md-3 {
-ms-flex-preferred-size: 25%;
-webkit-flex-basis: 25%;
flex-basis: 25%;
max-width: 25%; }
.col-md-4 {
-ms-flex-preferred-size: 33.33333333%;
-webkit-flex-basis: 33.33333333%;
flex-basis: 33.33333333%;
max-width: 33.33333333%; }
.col-md-5 {
-ms-flex-preferred-size: 41.66666667%;
-webkit-flex-basis: 41.66666667%;
flex-basis: 41.66666667%;
max-width: 41.66666667%; }
.col-md-6 {
-ms-flex-preferred-size: 50%;
-webkit-flex-basis: 50%;
flex-basis: 50%;
max-width: 50%; }
.col-md-7 {
-ms-flex-preferred-size: 58.33333333%;
-webkit-flex-basis: 58.33333333%;
flex-basis: 58.33333333%;
max-width: 58.33333333%; }
.col-md-8 {
-ms-flex-preferred-size: 66.66666667%;
-webkit-flex-basis: 66.66666667%;
flex-basis: 66.66666667%;
max-width: 66.66666667%; }
.col-md-9 {
-ms-flex-preferred-size: 75%;
-webkit-flex-basis: 75%;
flex-basis: 75%;
max-width: 75%; }
.col-md-10 {
-ms-flex-preferred-size: 83.33333333%;
-webkit-flex-basis: 83.33333333%;
flex-basis: 83.33333333%;
max-width: 83.33333333%; }
.col-md-11 {
-ms-flex-preferred-size: 91.66666667%;
-webkit-flex-basis: 91.66666667%;
flex-basis: 91.66666667%;
max-width: 91.66666667%; }
.col-md-12 {
-ms-flex-preferred-size: 100%;
-webkit-flex-basis: 100%;
flex-basis: 100%;
max-width: 100%; }
.col-md-offset-0 {
margin-left: 0; }
.col-md-offset-1 {
margin-left: 8.33333333%; }
.col-md-offset-2 {
margin-left: 16.66666667%; }
.col-md-offset-3 {
margin-left: 25%; }
.col-md-offset-4 {
margin-left: 33.33333333%; }
.col-md-offset-5 {
margin-left: 41.66666667%; }
.col-md-offset-6 {
margin-left: 50%; }
.col-md-offset-7 {
margin-left: 58.33333333%; }
.col-md-offset-8 {
margin-left: 66.66666667%; }
.col-md-offset-9 {
margin-left: 75%; }
.col-md-offset-10 {
margin-left: 83.33333333%; }
.col-md-offset-11 {
margin-left: 91.66666667%; }
.start-md {
-ms-flex-pack: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
text-align: start; }
.center-md {
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
text-align: center; }
.end-md {
-ms-flex-pack: end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
text-align: end; }
.top-md {
-ms-flex-align: start;
-webkit-align-items: flex-start;
-ms-grid-row-align: flex-start;
align-items: flex-start; }
.middle-md {
-ms-flex-align: center;
-webkit-align-items: center;
-ms-grid-row-align: center;
align-items: center; }
.bottom-md {
-ms-flex-align: end;
-webkit-align-items: flex-end;
-ms-grid-row-align: flex-end;
align-items: flex-end; }
.around-md {
-ms-flex-pack: distribute;
-webkit-justify-content: space-around;
justify-content: space-around; }
.between-md {
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between; }
.first-md {
-ms-flex-order: -1;
-webkit-order: -1;
order: -1; }
.last-md {
-ms-flex-order: 1;
-webkit-order: 1;
order: 1; } }
@media only screen and (min-width: 99.75em) {
.container {
width: 100.75rem; }
.col-lg,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-offset-0,
.col-lg-offset-1,
.col-lg-offset-2,
.col-lg-offset-3,
.col-lg-offset-4,
.col-lg-offset-5,
.col-lg-offset-6,
.col-lg-offset-7,
.col-lg-offset-8,
.col-lg-offset-9,
.col-lg-offset-10,
.col-lg-offset-11,
.col-lg-offset-12 {
box-sizing: border-box;
-ms-flex: 0 0 auto;
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem; }
.col-lg {
-ms-flex-positive: 1;
-webkit-flex-grow: 1;
flex-grow: 1;
-ms-flex-preferred-size: 0;
-webkit-flex-basis: 0;
flex-basis: 0;
max-width: 100%; }
.col-lg-1 {
-ms-flex-preferred-size: 8.33333333%;
-webkit-flex-basis: 8.33333333%;
flex-basis: 8.33333333%;
max-width: 8.33333333%; }
.col-lg-2 {
-ms-flex-preferred-size: 16.66666667%;
-webkit-flex-basis: 16.66666667%;
flex-basis: 16.66666667%;
max-width: 16.66666667%; }
.col-lg-3 {
-ms-flex-preferred-size: 25%;
-webkit-flex-basis: 25%;
flex-basis: 25%;
max-width: 25%; }
.col-lg-4 {
-ms-flex-preferred-size: 33.33333333%;
-webkit-flex-basis: 33.33333333%;
flex-basis: 33.33333333%;
max-width: 33.33333333%; }
.col-lg-5 {
-ms-flex-preferred-size: 41.66666667%;
-webkit-flex-basis: 41.66666667%;
flex-basis: 41.66666667%;
max-width: 41.66666667%; }
.col-lg-6 {
-ms-flex-preferred-size: 50%;
-webkit-flex-basis: 50%;
flex-basis: 50%;
max-width: 50%; }
.col-lg-7 {
-ms-flex-preferred-size: 58.33333333%;
-webkit-flex-basis: 58.33333333%;
flex-basis: 58.33333333%;
max-width: 58.33333333%; }
.col-lg-8 {
-ms-flex-preferred-size: 66.66666667%;
-webkit-flex-basis: 66.66666667%;
flex-basis: 66.66666667%;
max-width: 66.66666667%; }
.col-lg-9 {
-ms-flex-preferred-size: 75%;
-webkit-flex-basis: 75%;
flex-basis: 75%;
max-width: 75%; }
.col-lg-10 {
-ms-flex-preferred-size: 83.33333333%;
-webkit-flex-basis: 83.33333333%;
flex-basis: 83.33333333%;
max-width: 83.33333333%; }
.col-lg-11 {
-ms-flex-preferred-size: 91.66666667%;
-webkit-flex-basis: 91.66666667%;
flex-basis: 91.66666667%;
max-width: 91.66666667%; }
.col-lg-12 {
-ms-flex-preferred-size: 100%;
-webkit-flex-basis: 100%;
flex-basis: 100%;
max-width: 100%; }
.col-lg-offset-0 {
margin-left: 0; }
.col-lg-offset-1 {
margin-left: 8.33333333%; }
.col-lg-offset-2 {
margin-left: 16.66666667%; }
.col-lg-offset-3 {
margin-left: 25%; }
.col-lg-offset-4 {
margin-left: 33.33333333%; }
.col-lg-offset-5 {
margin-left: 41.66666667%; }
.col-lg-offset-6 {
margin-left: 50%; }
.col-lg-offset-7 {
margin-left: 58.33333333%; }
.col-lg-offset-8 {
margin-left: 66.66666667%; }
.col-lg-offset-9 {
margin-left: 75%; }
.col-lg-offset-10 {
margin-left: 83.33333333%; }
.col-lg-offset-11 {
margin-left: 91.66666667%; }
.start-lg {
-ms-flex-pack: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
text-align: start; }
.center-lg {
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
text-align: center; }
.end-lg {
-ms-flex-pack: end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
text-align: end; }
.top-lg {
-ms-flex-align: start;
-webkit-align-items: flex-start;
-ms-grid-row-align: flex-start;
align-items: flex-start; }
.middle-lg {
-ms-flex-align: center;
-webkit-align-items: center;
-ms-grid-row-align: center;
align-items: center; }
.bottom-lg {
-ms-flex-align: end;
-webkit-align-items: flex-end;
-ms-grid-row-align: flex-end;
align-items: flex-end; }
.around-lg {
-ms-flex-pack: distribute;
-webkit-justify-content: space-around;
justify-content: space-around; }
.between-lg {
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between; }
.first-lg {
-ms-flex-order: -1;
-webkit-order: -1;
order: -1; }
.last-lg {
-ms-flex-order: 1;
-webkit-order: 1;
order: 1; } }
.wds-icon {
fill: currentColor;
height: 24px;
width: 24px; }
.wds-icon-small {
height: 18px;
width: 18px; }
.wds-icon-tiny {
height: 12px;
width: 12px; }
.wds-avatar {
border: solid 2px currentColor;
height: 28px;
width: 28px; }
.wds-avatar.wds-is-circle {
border-radius: 50%; }
.wds-button {
background-color: #00b7e0;
border: 1px solid #00b7e0;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 12px;
font-weight: 600;
letter-spacing: .15px;
line-height: 1.3em;
outline: none;
padding: 16px 18px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
transition: background-color 300ms, border-color 300ms, color 300ms;
-webkit-appearance: none;
-webkit-border-radius: 0; }
.wds-button:hover:not(:disabled), .wds-button:active, .wds-button.wds-is-active {
background-color: #00647a;
border-color: #00647a; }
.wds-button:disabled, .wds-button.wds-is-disabled {
cursor: default;
opacity: .5; }
.wds-button.wds-is-secondary {
background-color: #fff;
color: #00b7e0; }
.wds-button.wds-is-secondary:hover:not(:disabled), .wds-button.wds-is-secondary:active, .wds-button.wds-is-secondary.wds-is-active {
background-color: #fff;
color: #00647a; }
.wds-button.wds-is-squished {
font-size: 10px;
padding: 9px 18px; }
.wds-button.wds-is-stretched {
padding: 28px 18px; }
.wds-button.wds-is-full-width {
width: 100%; }
.wds-button.wds-is-text {
background-color: #fff;
border: 0;
color: #00b7e0; }
.wds-button.wds-is-text:hover:not(:disabled), .wds-button.wds-is-text:active, .wds-button.wds-is-text.wds-is-active {
background-color: #fff;
color: #00647a; }
.wds-dropdown {
display: inline-block;
position: relative; }
.wds-dropdown .wds-dropdown-toggle-chevron {
margin-left: 5px; }
.wds-dropdown.wds-is-active .wds-dropdown-content {
display: inline-block; }
.wds-dropdown.wds-is-active .wds-dropdown-toggle-chevron {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg); }
.wds-dropdown-toggle {
position: relative;
z-index: 2; }
.wds-dropdown-content {
background-color: #fff;
box-shadow: 0 0 10px 0 rgba(26, 26, 26, 0.2);
display: none;
left: 0;
position: absolute;
top: 100%;
z-index: 1; }
.wds-dropdown-content.wds-is-dark {
box-shadow: 0 0 20px 0 rgba(26, 26, 26, 0.3); }
.wds-dropdown-content.wds-is-right-aligned {
right: 0; }
.wds-global-footer {
background-color: #39424d;
box-sizing: border-box;
color: #fff;
margin-top: 30px;
word-wrap: break-word; }
.wds-global-footer * {
box-sizing: inherit; }
.wds-global-footer ul {
list-style-type: none;
padding: 0;
margin: 0; }
.wds-global-footer__header-wrapper {
display: block;
width: 100%; }
.wds-global-footer__header {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
margin: 0; }
.wds-global-footer__bottom-bar {
background: rgba(38, 38, 38, 0.5);
font-size: 12px;
line-height: 1.3em;
min-height: 50px;
padding: 0 20px;
text-align: center;
/**
* Note: The following rule is an exception on DS Class Naming because whole
* text is user-supplied and we don't insert class names there.
*/ }
.wds-global-footer__bottom-bar a,
.wds-global-footer__bottom-bar a:visited {
color: #00b7e0;
text-decoration: none; }
.wds-global-footer__bottom-bar a:hover {
color: #fff; }
.wds-global-footer__bottom-bar-row {
margin: 0 auto; }
.wds-global-footer__bottom-bar-row.wds-has-border-top {
border-top: 1px solid #656e78; }
.wds-global-footer__bottom-bar-row.wds-has-padding {
padding: 16px 0; }
.wds-global-footer__button-link {
display: inline-block;
font-weight: bold;
letter-spacing: .3px;
line-height: 1.3em;
min-height: 45px;
padding: 14px 18px;
text-decoration: none;
text-transform: uppercase; }
.wds-global-footer__fandom-logo {
fill: #fff;
height: 26px;
width: 122px; }
.wds-global-footer__wikia-logo {
fill: #fff;
height: 26px;
width: 67px; }
.wds-global-footer__wikia-logo.wds-is-large {
height: 30px;
padding: 0;
width: 84px; }
.wds-global-footer__home-of-fandom {
border-bottom: 1px solid #c5ced9;
border-top: 1px solid #c5ced9;
color: #7f90a1;
display: block;
font-size: 12px;
font-weight: bold;
letter-spacing: .5px;
margin-left: 13px;
margin-top: 5px;
padding: 3px 0;
text-transform: uppercase;
white-space: nowrap; }
.wds-global-footer__main {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap; }
.wds-global-footer__fandom-header, .wds-global-footer__wikia-header {
margin: 0; }
.wds-global-footer__fandom-sections, .wds-global-footer__wikia-sections {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap; }
.wds-global-footer__fandom-section, .wds-global-footer__wikia-section {
border-top: 4px solid #656e78;
margin-right: 55px;
padding-top: 8px; }
.wds-global-footer__link, .wds-global-footer__link:active, .wds-global-footer__link:visited, .wds-global-footer__link:focus {
color: #c5ced9;
font-size: 14px;
font-weight: normal;
line-height: 1.3em;
text-decoration: none; }
.wds-global-footer__link:hover {
color: #fff; }
.wds-global-footer__links-list-item {
margin-bottom: 8px; }
.wds-global-footer__fandom-section.wds-is-fandom-overview {
border: 0;
padding: 0; }
.wds-global-footer__fandom-section.wds-is-fandom-overview .wds-global-footer__link {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
border-top: 4px solid #656e78;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
font-size: 18px;
font-weight: bold;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
margin: 0;
padding: 6px 0 28px;
text-decoration: none; }
.wds-global-footer__fandom-section.wds-is-fandom-overview .wds-global-footer__link.wds-is-games {
border-color: #94d11f; }
.wds-global-footer__fandom-section.wds-is-fandom-overview .wds-global-footer__link.wds-is-movies {
border-color: #09d3bf; }
.wds-global-footer__fandom-section.wds-is-fandom-overview .wds-global-footer__link.wds-is-tv {
border-color: #00b7e0; }
.wds-global-footer__fandom-section.wds-is-fandom-overview .wds-global-footer__image {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg); }
.wds-global-footer__fandom-section.wds-is-follow-us .wds-global-footer__links-list {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap; }
.wds-global-footer__fandom-section.wds-is-follow-us .wds-global-footer__link {
background: no-repeat center;
background-size: 24px;
display: inline-block;
height: 24px;
margin-right: 20px;
width: 24px; }
.wds-global-footer__fandom-section.wds-is-follow-us .wds-global-footer__image {
color: #656e78; }
.wds-global-footer__fandom-section.wds-is-follow-us .wds-global-footer__image:hover {
color: #fff; }
.wds-global-footer__wikia-section.wds-is-create-wiki .wds-global-footer__link {
border: solid 1px #c5ced9;
color: #c5ced9;
display: inline-block;
font-size: 12px;
font-weight: bold;
letter-spacing: .3px;
line-height: 1.3em;
margin-top: 13px;
padding: 14px 18px;
text-decoration: none;
text-transform: uppercase; }
.wds-global-footer__wikia-section.wds-is-create-wiki .wds-global-footer__link:hover {
color: #fff; }
.wds-global-footer__wikia-section.wds-is-community-apps .wds-global-footer__links-list {
display: -webkit-flex;
display: -ms-flexbox;
display: flex; }
.wds-global-footer__wikia-section.wds-is-community-apps .wds-global-footer__link {
display: block;
line-height: 1.3em;
margin-top: 6px;
width: 119px; }
.wds-global-footer__wikia-section.wds-is-community-apps .wds-global-footer__image {
height: 35px;
width: 119px; }
.wds-global-footer__section-header {
color: #fff;
font-size: 18px;
font-weight: bold;
min-height: 24px;
margin-bottom: 10px;
margin-top: 0;
padding: 0; }
.wds-global-footer__section-description {
color: #fff;
font-size: 14px;
line-height: 1.3em;
margin: 0;
padding: 0; }
@media only screen and (max-width: 1023px) {
.wds-global-footer__main {
margin: 0 20px; }
.wds-global-footer__header-wrapper {
padding-bottom: 35px;
padding-top: 34px; }
.wds-global-footer__fandom-header {
margin-bottom: 29px;
margin-top: 38px; }
.wds-global-footer__wikia-header {
margin-bottom: 29px;
margin-top: 61px; }
.wds-global-footer__fandom-section, .wds-global-footer__wikia-section {
margin: 0;
width: 100%; }
.wds-global-footer__fandom-section.wds-is-fandom-overview .wds-global-footer__links-list-item {
margin-bottom: 0; }
.wds-global-footer__fandom-section.wds-is-follow-us .wds-global-footer__links-list-item {
margin-bottom: 0; }
.wds-global-footer__fandom-section.wds-is-follow-us .wds-global-footer__link {
height: 42px;
margin-right: 10px;
width: 42px; }
.wds-global-footer__wikia-section {
margin-bottom: 20px; }
.wds-global-footer__wikia-section.wds-is-company-overview {
width: 50%; }
.wds-global-footer__wikia-section.wds-is-site-overview {
padding-top: 42px;
width: 50%; }
.wds-global-footer__wikia-section.wds-is-create-wiki {
display: none; }
.wds-global-footer__wikia-section.wds-is-community-apps .wds-global-footer__links-list {
margin-top: 5px;
margin-bottom: 0; }
.wds-global-footer__wikia-section.wds-is-community-apps .wds-global-footer__link {
margin-right: 25px; }
.wds-global-footer.wds-is-international .wds-global-footer__fandom-section.wds-is-follow-us {
margin-bottom: 37px; }
.wds-global-footer__links-list-item {
margin-bottom: 20px; } }
@media only screen and (min-width: 1024px) {
.wds-global-footer__main {
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
margin: 0 auto;
padding-bottom: 40px;
width: 1024px; }
.wds-global-footer__bottom-bar {
padding: 0; }
.wds-global-footer__bottom-bar-row {
width: 1024px; }
.wds-global-footer__header-wrapper {
padding-bottom: 34px;
padding-top: 43px; }
.wds-global-footer__fandom-header, .wds-global-footer__wikia-header {
height: 26px;
margin-bottom: 35px;
margin-top: 47px; }
.wds-global-footer__fandom-header {
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
width: 25%; }
.wds-global-footer__fandom-sections {
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-order: 3;
-ms-flex-order: 3;
order: 3;
width: 25%; }
.wds-global-footer__wikia-header {
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
width: 75%; }
.wds-global-footer__wikia-sections {
-webkit-align-content: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
-webkit-order: 4;
-ms-flex-order: 4;
order: 4;
width: 75%; }
.wds-global-footer__fandom-section {
width: 200px; }
.wds-global-footer__wikia-section {
padding-bottom: 8px; }
.wds-global-footer__wikia-section.wds-is-company-overview {
margin-right: 50px;
min-height: 210px;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
width: 124px; }
.wds-global-footer__wikia-section.wds-is-site-overview {
margin-right: 50px;
-webkit-order: 4;
-ms-flex-order: 4;
order: 4;
width: 124px; }
.wds-global-footer__wikia-section.wds-is-community {
min-height: 210px;
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
width: 290px; }
.wds-global-footer__wikia-section.wds-is-create-wiki {
display: block;
-webkit-order: 5;
-ms-flex-order: 5;
order: 5;
width: 290px; }
.wds-global-footer__wikia-section.wds-is-community-apps {
margin-right: 0;
min-height: 210px;
-webkit-order: 3;
-ms-flex-order: 3;
order: 3;
width: 200px; }
.wds-global-footer__wikia-section.wds-is-community-apps .wds-global-footer__links-list {
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
margin-top: 5px; }
.wds-global-footer__wikia-section.wds-is-advertise {
margin-right: 0;
-webkit-order: 6;
-ms-flex-order: 6;
order: 6;
width: 200px; } }
.wds-global-navigation {
background-color: #fff;
border-image: linear-gradient(to right, #39424d 40%, #656e78 40%) 1 0 0;
border-top: 6px solid #656e78;
border-width: 6px 0 0;
box-shadow: 0 1px 0 0 #ccc; }
.wds-global-navigation__content-bar {
height: 49px;
margin: 0 auto;
position: relative;
width: 1004px;
z-index: 1; }
.wds-global-navigation__logo {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
background-color: #fff;
border-top: 6px solid #39424d;
color: #656e78;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
font-size: 9px;
font-weight: 600;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
letter-spacing: .15px;
margin-top: -6px;
text-decoration: none;
text-transform: uppercase; }
.wds-global-navigation__logo__fandom {
fill: #39424d;
height: 24px;
padding-bottom: 4px;
width: 120px; }
.wds-global-navigation__logo__wikia {
fill: #092344;
height: 12px;
width: 36px; }
.wds-global-navigation__logo__powered-by {
padding: 2px 3px 0 7px; }
.wds-global-navigation__middle-column {
background-color: #fff;
display: -webkit-flex;
display: -ms-flexbox;
display: flex; }
.wds-global-navigation__right-column {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
background-color: #fff;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start; }
.wds-global-navigation__content-item {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
border-top: 6px solid #656e78;
color: #39424d;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
font-size: 14px;
height: 49px;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
margin-top: -6px;
padding: 0 5px;
text-decoration: none; }
.wds-global-navigation__content-item:hover {
color: #00b7e0; }
.wds-global-navigation__content-item:active, .wds-global-navigation__content-item.wds-is-active {
background-color: #656e78;
border-color: #363b41;
color: #fff; }
.wds-global-navigation__content-item.wds-is-games {
border-color: #94d11f; }
.wds-global-navigation__content-item.wds-is-games:active, .wds-global-navigation__content-item.wds-is-games.wds-is-active {
background-color: #94d11f;
border-color: #75a518; }
.wds-global-navigation__content-item.wds-is-movies {
border-color: #09d3bf; }
.wds-global-navigation__content-item.wds-is-movies:active, .wds-global-navigation__content-item.wds-is-movies.wds-is-active {
background-color: #09d3bf;
border-color: #07a293; }
.wds-global-navigation__content-item.wds-is-tv {
border-color: #00b7e0; }
.wds-global-navigation__content-item.wds-is-tv:active, .wds-global-navigation__content-item.wds-is-tv.wds-is-active {
background-color: #00b7e0;
border-color: #008dad; }
.wds-global-navigation__dropdown-toggle {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center; }
.wds-global-navigation__dropdown {
color: #39424d;
top: calc(100% + 1px);
width: 190px;
z-index: -1; }
.wds-global-navigation__dropdown-link {
color: #39424d;
text-decoration: none; }
.wds-global-navigation__dropdown-link:hover, .wds-global-navigation__dropdown-link:active, .wds-global-navigation__dropdown-link.wds-is-active {
color: #00b7e0; }
.wds-global-navigation__search {
background-color: lightgray;
-webkit-flex: 2;
-ms-flex: 2;
flex: 2; }
.wds-global-navigation__account-navigation {
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
margin-right: 8px; }
.wds-global-navigation__user-menu {
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
width: 55px; }
.wds-global-navigation__user-icon {
margin-right: 5px; }
.wds-global-navigation__notifications {
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
margin-right: 8px;
padding-right: 0;
position: relative;
width: 50px; }
.wds-global-navigation__notifications-counter {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
background-color: #00b7e0;
border: 1px solid #fff;
border-radius: 9px;
box-sizing: border-box;
color: #fff;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
font-size: 10px;
height: 18px;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
left: 7px;
min-width: 18px;
padding: 0 4px;
position: absolute;
top: 7px; }
.wds-global-navigation__register-button-caption {
font-size: 12px;
padding-bottom: 10px;
text-align: center; }
@media only screen and (max-width: 1023px) {
.wds-global-navigation__account-navigation-caption {
display: none; }
.wds-global-navigation__start-a-wiki::before {
content: '┼';
display: inline; }
.wds-global-navigation__start-a-wiki-content {
display: none; } }
@media only screen and (min-width: 1440px) {
.wds-global-navigation__content-bar {
width: 1420px; } }
.wds-list {
list-style-type: none;
margin: 0;
padding: 7px 18px; }
.wds-list > li {
box-sizing: border-box;
font-size: 14px;
line-height: 1em;
padding: 11px 0; }
.wds-list.wds-has-big-items {
padding-bottom: 2px;
padding-top: 2px; }
.wds-list.wds-has-big-items > li {
font-size: 16px;
padding-bottom: 16px;
padding-top: 16px; }
.wds-list.wds-has-lines-between > li {
border-bottom: solid 1px #e6e6e6; }
.wds-list.wds-has-lines-between > li:last-child {
border: 0; }
/**
* Breakpoints:
*
* @example
* h4.breakpoint-preview-current-header Currently displayed breakpoint: 
* div.breakpoint-preview-current
* h4.breakpoint-preview-list-header All supported breakpoint media queries: 
* ul.breakpoint-preview-list
* li.breakpoint-preview-mobile-up
* li.breakpoint-preview-mobile-only
* li.breakpoint-preview-tablet-up
* li.breakpoint-preview-tablet-down
* li.breakpoint-preview-tablet-only
* li.breakpoint-preview-desktop-up
* li.breakpoint-preview-desktop-only
* li.breakpoint-preview-desktop-xl-up
*/
.breakpoint-preview-current-header,
.breakpoint-preview-list-header {
font-weight: bold; }
.breakpoint-preview-current::after,
.breakpoint-preview-list ::after {
font-family: monospace; }
.breakpoint-preview-mobile-up::after {
content: "$breakpoint-mobile-up: only screen"; }
.breakpoint-preview-mobile-only::after {
content: "$breakpoint-mobile-only: only screen and (max-width:767px)"; }
.breakpoint-preview-tablet-up::after {
content: "$breakpoint-tablet-up: only screen and (min-width:768px)"; }
.breakpoint-preview-tablet-down::after {
content: "$breakpoint-tablet-down: only screen and (max-width:1023px)"; }
.breakpoint-preview-tablet-only::after {
content: "$breakpoint-tablet-only: only screen and (min-width:768px) and (max-width:1023px)"; }
.breakpoint-preview-desktop-up::after {
content: "$breakpoint-desktop-up: only screen and (min-width:1024px)"; }
.breakpoint-preview-desktop-only::after {
content: "$breakpoint-desktop-only: only screen and (min-width:1024px) and (max-width:1439px)"; }
.breakpoint-preview-desktop-xl-up::after {
content: "$breakpoint-desktop-xl-up: only screen and (min-width:1440px)"; }
.breakpoint-preview-current::after {
content: "$breakpoint-$breakpoint-mobile-up (default): only screen";
color: #1a5eb8; }
@media only screen and (min-width: 768px) {
.breakpoint-preview-current::after {
content: "$breakpoint-tablet-up: only screen and (min-width:768px)";
color: #5ba200; } }
@media only screen and (min-width: 1024px) {
.breakpoint-preview-current::after {
content: "$breakpoint-desktop-up: only screen and (min-width:1024px)";
color: #f08a24; } }
@media only screen and (min-width: 1440px) {
.breakpoint-preview-current::after {
content: "$breakpoint-desktop-xl-up: only screen and (min-width:1440px)";
color: #ed1c24; } }
/**
* Wikia Corporate Colors:
*
* @example
* div.color-preview-group
* div#color-dark-blue.color-preview-card
* div.color-preview-box.color-dark-blue
* div.color-preview-name Dark Blue
* div.color-preview-variable $color-dark-blue
* div.color-preview-value #092344
* div#color-light-blue.color-preview-card
* div.color-preview-box.color-light-blue
* div.color-preview-name Light Blue
* div.color-preview-variable $color-light-blue
* div.color-preview-value #1a5eb8
* div#color-dark-blue-gray.color-preview-card
* div.color-preview-box.color-dark-blue-gray
* div.color-preview-name Dark Blue Gray
* div.color-preview-variable $color-dark-blue-gray
* div.color-preview-value #39424d
* div#color-slate-gray.color-preview-card
* div.color-preview-box.color-slate-gray
* div.color-preview-name Medium Gray
* div.color-preview-variable $color-slate-gray
* div.color-preview-value #656e78
* div#color-blue-gray.color-preview-card
* div.color-preview-box.color-blue-gray
* div.color-preview-name Blue Gray
* div.color-preview-variable $color-blue-gray
* div.color-preview-value #c5ced9
* div#color-light-blue-gray.color-preview-card
* div.color-preview-box.color-light-blue-gray
* div.color-preview-name Light Blue Gray
* div.color-preview-variable $color-light-blue-gray
* div.color-preview-value #e6ebf2
* div#color-faint-blue-gray.color-preview-card
* div.color-preview-box.color-faint-blue-gray
* div.color-preview-name Gray
* div.color-preview-variable $color-faint-blue-gray
* div.color-preview-value #f2f6fa
* div#color-white.color-preview-card
* div.color-preview-box.color-white
* div.color-preview-name White
* div.color-preview-variable $color-white
* div.color-preview-value #fff
*/
.color-dark-blue {
background-color: #092344; }
.color-light-blue {
background-color: #1a5eb8; }
.color-dark-blue-gray {
background-color: #39424d; }
.color-slate-gray {
background-color: #656e78; }
.color-blue-gray {
background-color: #c5ced9; }
.color-light-blue-gray {
background-color: #e6ebf2; }
.color-faint-blue-gray {
background-color: #f2f6fa; }
.color-white {
background-color: #fff; }
/**
* Vertical Colors:
*
* @example
* div.color-preview-group
* div#color-comics.color-preview-card
* div.color-preview-box.color-comics
* div.color-preview-name Comics
* div.color-preview-variable $color-comics
* div.color-preview-value #ff5400
* div#color-games.color-preview-card
* div.color-preview-box.color-games
* div.color-preview-name Games
* div.color-preview-variable $color-games
* div.color-preview-value #94d11f
* div#color-books.color-preview-card
* div.color-preview-box.color-books
* div.color-preview-name Books
* div.color-preview-variable $color-books
* div.color-preview-value #ff7f26
* div#color-movies.color-preview-card
* div.color-preview-box.color-movies
* div.color-preview-name Movies
* div.color-preview-variable $color-movies
* div.color-preview-value #09d3bf
* div#color-lifestyle.color-preview-card
* div.color-preview-box.color-lifestyle
* div.color-preview-name Lifestyle
* div.color-preview-variable $color-lifestyle
* div.color-preview-value #ffd000
* div#color-music.color-preview-card
* div.color-preview-box.color-music
* div.color-preview-name Music
* div.color-preview-variable $color-music
* div.color-preview-value #c819ad
* div#color-tv.color-preview-card
* div.color-preview-box.color-tv
* div.color-preview-name TV
* div.color-preview-variable $color-tv
* div.color-preview-value #00b7e0
*/
.color-comics {
background-color: #ff5400; }
.color-games {
background-color: #94d11f; }
.color-books {
background-color: #ff7f26; }
.color-movies {
background-color: #09d3bf; }
.color-lifestyle {
background-color: #ffd000; }
.color-music {
background-color: #c819ad; }
.color-tv {
background-color: #00b7e0; }
/**
* Alerts:
*
* @example
* div.color-preview-group
* div#color-alert.color-preview-card
* div.color-preview-box.color-alert
* div.color-preview-name Alert/Delete
* div.color-preview-variable $color-alert
* div.color-preview-value #ed1c24
* div#color-warning.color-preview-card
* div.color-preview-box.color-warning
* div.color-preview-name Warning/Reported
* div.color-preview-variable $color-warning
* div.color-preview-value #f08a24
* div#color-success.color-preview-card
* div.color-preview-box.color-success
* div.color-preview-name Success/Approve
* div.color-preview-variable $color-success
* div.color-preview-value #5ba200
* div#color-message.color-preview-card
* div.color-preview-box.color-message
* div.color-preview-name Message
* div.color-preview-variable $color-message
* div.color-preview-value #1a5eb8
*/
.color-alert {
background-color: #ed1c24; }
.color-warning {
background-color: #f08a24; }
.color-success {
background-color: #5ba200; }
.color-message {
background-color: #1a5eb8; }
/**
* Fandom Corporate Colors:
*
* @example
* div.color-preview-group
* div#color-games.color-preview-card
* div.color-preview-box.color-games
* div.color-preview-name Games
* div.color-preview-variable $color-games
* div.color-preview-value #94d11f
* div#color-movies.color-preview-card
* div.color-preview-box.color-movies
* div.color-preview-name Movies
* div.color-preview-variable $color-movies
* div.color-preview-value #09d3bf
* div#color-tv.color-preview-card
* div.color-preview-box.color-tv
* div.color-preview-name TV
* div.color-preview-variable $color-tv
* div.color-preview-value #00b7e0
* div#color-dark-blue-gray.color-preview-card
* div.color-preview-box.color-dark-blue-gray
* div.color-preview-name Dark Blue Gray
* div.color-preview-variable $color-dark-blue-gray
* div.color-preview-value #39424d
* div#color-slate-gray.color-preview-card
* div.color-preview-box.color-slate-gray
* div.color-preview-name Medium Gray
* div.color-preview-variable $color-slate-gray
* div.color-preview-value #656e78
* div#color-blue-gray.color-preview-card
* div.color-preview-box.color-blue-gray
* div.color-preview-name Blue Gray
* div.color-preview-variable $color-blue-gray
* div.color-preview-value #c5ced9
* div#color-off-white.color-preview-card
* div.color-preview-box.color-off-white
* div.color-preview-name Off-White 96%
* div.color-preview-variable $color-off-white
* div.color-preview-value #f6f6f6
* div#color-link.color-preview-card
* div.color-preview-box.color-link
* div.color-preview-name Link
* div.color-preview-variable $color-link
* div.color-preview-value #00b7e0
*/
.color-off-white {
background-color: #f6f6f6; }
.color-link {
background-color: #00b7e0; }
/**
* Light Theme:
*
* @example
* div.color-preview-group
* div#color-light-c1.color-preview-card
* div.color-preview-box.color-light-c1
* div.color-preview-name White 100%
* div.color-preview-variable $color-light-c1
* div.color-preview-value #fff
* div#color-light-c2.color-preview-card
* div.color-preview-box.color-light-c2
* div.color-preview-name Off-White 96%
* div.color-preview-variable $color-light-c2
* div.color-preview-value #f6f6f6
* div#color-light-c3.color-preview-card
* div.color-preview-box.color-light-c3
* div.color-preview-name Mist Gray 90%
* div.color-preview-variable $color-light-c3
* div.color-preview-value #e6e6e6
* div#color-light-c4.color-preview-card
* div.color-preview-box.color-light-c4
* div.color-preview-name Faint Gray 80%
* div.color-preview-variable $color-light-c4
* div.color-preview-value #ccc
* div#color-light-c5.color-preview-card
* div.color-preview-box.color-light-c5
* div.color-preview-name Light Gray 60%
* div.color-preview-variable $color-light-c5
* div.color-preview-value #999
* div#color-light-c6.color-preview-card
* div.color-preview-box.color-light-c6
* div.color-preview-name Dark Gray 20%
* div.color-preview-variable $color-light-c6
* div.color-preview-value #333
* div#color-light-c7.color-preview-card
* div.color-preview-box.color-light-c7
* div.color-preview-name Medium Gray 40%
* div.color-preview-variable $color-light-c7
* div.color-preview-value #666
* div#color-light-c8.color-preview-card
* div.color-preview-box.color-light-c8
* div.color-preview-name Gold
* div.color-preview-variable $color-light-c8
* div.color-preview-value #e3bd00
*/
.color-light-c1 {
background-color: #fff; }
.color-light-c2 {
background-color: #f6f6f6; }
.color-light-c3 {
background-color: #e6e6e6; }
.color-light-c4 {
background-color: #ccc; }
.color-light-c5 {
background-color: #999; }
.color-light-c6 {
background-color: #333; }
.color-light-c7 {
background-color: #666; }
.color-light-c8 {
background-color: #e3bd00; }
/**
* Dark Theme:
*
* @example
* div.color-preview-group
* div#color-dark-c1.color-preview-card
* div.color-preview-box.color-dark-c1
* div.color-preview-name Dark Gray 15%
* div.color-preview-variable $color-dark-c1
* div.color-preview-value #262626
* div#color-dark-c2.color-preview-card
* div.color-preview-box.color-dark-c2
* div.color-preview-name Dark Gray 10%
* div.color-preview-variable $color-dark-c2
* div.color-preview-value #1a1a1a
* div#color-dark-c3.color-preview-card
* div.color-preview-box.color-dark-c3
* div.color-preview-name Dark Gray 20%
* div.color-preview-variable $color-dark-c3
* div.color-preview-value #333
* div#color-dark-c4.color-preview-card
* div.color-preview-box.color-dark-c4
* div.color-preview-name Medium Gray 40%
* div.color-preview-variable $color-dark-c4
* div.color-preview-value #666
* div#color-dark-c5.color-preview-card
* div.color-preview-box.color-dark-c5
* div.color-preview-name Light Gray 60%
* div.color-preview-variable $color-dark-c5
* div.color-preview-value #999
* div#color-dark-c6.color-preview-card
* div.color-preview-box.color-dark-c6
* div.color-preview-name Faint Gray 80%
* div.color-preview-variable $color-dark-c6
* div.color-preview-value #ccc
* div#color-dark-c7.color-preview-card
* div.color-preview-box.color-dark-c7
* div.color-preview-name White 100%
* div.color-preview-variable $color-dark-c7
* div.color-preview-value #fff
* div#color-dark-c8.color-preview-card
* div.color-preview-box.color-dark-c8
* div.color-preview-name Gold
* div.color-preview-variable $color-dark-c8
* div.color-preview-value #e3bd00
*/
.color-dark-c1 {
background-color: #262626; }
.color-dark-c2 {
background-color: #1a1a1a; }
.color-dark-c3 {
background-color: #333; }
.color-dark-c4 {
background-color: #666; }
.color-dark-c5 {
background-color: #999; }
.color-dark-c6 {
background-color: #ccc; }
.color-dark-c7 {
background-color: #fff; }
.color-dark-c8 {
background-color: #e3bd00; }
/**
* Standard Set (24x24):
*
* @example
* div.icon-preview-group
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-alert")
* div.icon-name alert
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-arrow")
* div.icon-name arrow
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-bell")
* div.icon-name bell
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-bold")
* div.icon-name bold
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-bookmark")
* div.icon-name bookmark
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-bullet-list")
* div.icon-name bullet-list
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-camera")
* div.icon-name camera
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-checkbox")
* div.icon-name checkbox
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-checkmark")
* div.icon-name checkmark
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-checkmark-circle")
* div.icon-name checkmark-circle
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-clipboard")
* div.icon-name clipboard
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-community")
* div.icon-name community
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-controls")
* div.icon-name controls
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-cross")
* div.icon-name cross
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-document")
* div.icon-name document
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-dropdown")
* div.icon-name dropdown
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-eye")
* div.icon-name eye
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-eye-crossed")
* div.icon-name eye-crossed
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-flag")
* div.icon-name flag
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-gear")
* div.icon-name gear
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-gift")
* div.icon-name gift
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-grid")
* div.icon-name grid
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-house")
* div.icon-name house
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-image")
* div.icon-name image
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-image-add")
* div.icon-name image-add
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-image-remove")
* div.icon-name image-remove
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-information")
* div.icon-name information
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-italics")
* div.icon-name italics
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-link")
* div.icon-name link
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-loading")
* div.icon-name loading
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-lock")
* div.icon-name lock
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-magnifying-glass")
* div.icon-name magnifying-glass
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-mail")
* div.icon-name mail
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-map")
* div.icon-name map
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-menu")
* div.icon-name menu
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-menu-control")
* div.icon-name menu-control
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-more")
* div.icon-name more
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-note")
* div.icon-name note
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-numbered-list")
* div.icon-name numbered-list
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-page")
* div.icon-name page
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-pencil")
* div.icon-name pencil
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-play")
* div.icon-name play
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-plus")
* div.icon-name plus
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-question")
* div.icon-name question
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-quote")
* div.icon-name quote
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-refresh")
* div.icon-name refresh
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-reply")
* div.icon-name reply
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-reply-arrow")
* div.icon-name reply-arrow
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-share")
* div.icon-name share
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-text")
* div.icon-name text
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-trash")
* div.icon-name trash
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-trash-open")
* div.icon-name trash-open
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-undo")
* div.icon-name undo
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-unlock")
* div.icon-name unlock
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-upload")
* div.icon-name upload
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-upvote")
* div.icon-name upvote
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-user")
* div.icon-name user
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-video-camera")
* div.icon-name video-camera
**/
/**
* Small Set (18x18):
* @example
* div.icon-preview-group
* div.icon-preview-card
* svg.wds-icon.wds-icon-small
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-alert-small")
* div.icon-name alert-small
* div.icon-preview-card
* svg.wds-icon.wds-icon-small
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-bold-small")
* div.icon-name bold-small
* div.icon-preview-card
* svg.wds-icon.wds-icon-small
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-bookmark-small")
* div.icon-name bookmark-small
* div.icon-preview-card
* svg.wds-icon.wds-icon-small
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-bullet-list-small")
* div.icon-name bullet-list-small
* div.icon-preview-card
* svg.wds-icon.wds-icon-small
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-checkmark-small")
* div.icon-name checkmark-small
* div.icon-preview-card
* svg.wds-icon.wds-icon-small
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-clipboard-small")
* div.icon-name clipboard-small
* div.icon-preview-card
* svg.wds-icon.wds-icon-small
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-community-small")
* div.icon-name community-small
* div.icon-preview-card
* svg.wds-icon.wds-icon-small
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-eye-small")
* div.icon-name eye-small
* div.icon-preview-card
* svg.wds-icon.wds-icon-small
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-eye-crossed-small")
* div.icon-name eye-crossed-small
* div.icon-preview-card
* svg.wds-icon.wds-icon-small
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-house-small")
* div.icon-name house-small
* div.icon-preview-card
* svg.wds-icon.wds-icon-small
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-italics-small")
* div.icon-name italics-small
* div.icon-preview-card
* svg.wds-icon.wds-icon-small
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-lock-small")
* div.icon-name lock-small
* div.icon-preview-card
* svg.wds-icon.wds-icon-small
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-menu-control-small")
* div.icon-name menu-control-small
* div.icon-preview-card
* svg.wds-icon.wds-icon-small
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-numbered-list-small")
* div.icon-name numbered-list-small
* div.icon-preview-card
* svg.wds-icon.wds-icon-small
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-pencil-small")
* div.icon-name pencil-small
* div.icon-preview-card
* svg.wds-icon.wds-icon-small
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-quote-small")
* div.icon-name quote-small
* div.icon-preview-card
* svg.wds-icon.wds-icon-small
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-reply-small")
* div.icon-name reply-small
* div.icon-preview-card
* svg.wds-icon.wds-icon-small
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-reply-arrow-small")
* div.icon-name reply-arrow-small
* div.icon-preview-card
* svg.wds-icon.wds-icon-small
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-share-small")
* div.icon-name share-small
* div.icon-preview-card
* svg.wds-icon.wds-icon-small
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-text-small")
* div.icon-name text-small
* div.icon-preview-card
* svg.wds-icon.wds-icon-small
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-trash-small")
* div.icon-name trash-small
* div.icon-preview-card
* svg.wds-icon.wds-icon-small
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-trash-open-small")
* div.icon-name trash-open-small
* div.icon-preview-card
* svg.wds-icon.wds-icon-small
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-upvote-small")
* div.icon-name upvote-small
* div.icon-preview-card
* svg.wds-icon.wds-icon-small
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-unlock-small")
* div.icon-name unlock-small
**/
/**
* Tiny Set (12x12):
* @example
* div.icon-preview-group
* div.icon-preview-card
* svg.wds-icon.wds-icon-tiny
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-dropdown-tiny")
* div.icon-name dropdown-tiny
* div.icon-preview-card
* svg.wds-icon.wds-icon-tiny
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-menu-control-tiny")
* div.icon-name menu-control-tiny
* div.icon-preview-card
* svg.wds-icon.wds-icon-tiny
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-reply-tiny")
* div.icon-name reply-tiny
* div.icon-preview-card
* svg.wds-icon.wds-icon-tiny
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-upvote-tiny")
* div.icon-name upvote-tiny
* div.icon-preview-card
* svg.wds-icon.wds-icon-tiny
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-upvote-reply-tiny")
* div.icon-name upvote-reply-tiny
**/
/**
* Social Icons:
*
* @example
* div.icon-preview-group
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-facebook")
* div.icon-name facebook
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-google-plus")
* div.icon-name google-plus
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-instagram")
* div.icon-name instagram
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-line")
* div.icon-name line
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-meneame")
* div.icon-name meneame
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-nk")
* div.icon-name nk
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-odnoklassniki")
* div.icon-name odnoklassniki
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-qzone")
* div.icon-name qzone
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-reddit")
* div.icon-name reddit
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-tumblr")
* div.icon-name tumblr
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-twitter")
* div.icon-name twitter
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-vkontakte")
* div.icon-name vkontakte
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-weibo")
* div.icon-name weibo
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-wykop")
* div.icon-name wykop
* div.icon-preview-card
* svg.wds-icon
* use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-youtube")
* div.icon-name youtube
*/
/**
* Typescale:
*
* @example
* p
* div.typescale-size-plus-7 The quick brown fox jumps over the lazy dog
* code.sg $typograghy-size-plus-7
* p
* div.typescale-size-plus-6 The quick brown fox jumps over the lazy dog
* code.sg $typograghy-size-plus-6
* p
* div.typescale-size-plus-5 The quick brown fox jumps over the lazy dog
* code.sg $typograghy-size-plus-5
* p
* div.typescale-size-plus-4 The quick brown fox jumps over the lazy dog
* code.sg $typograghy-size-plus-4
* p
* div.typescale-size-plus-3 The quick brown fox jumps over the lazy dog
* code.sg $typograghy-size-plus-3
* p
* div.typescale-size-plus-2 The quick brown fox jumps over the lazy dog
* code.sg $typograghy-size-plus-2
* p
* div.typescale-size-plus-1 The quick brown fox jumps over the lazy dog
* code.sg $typograghy-size-plus-1
* p
* div.typescale-size-base The quick brown fox jumps over the lazy dog
* code.sg $typograghy-size-base
* p
* div.typescale-size-minus-1 The quick brown fox jumps over the lazy dog
* code.sg $typograghy-minus-1
* p
* div.typescale-size-minus-2 The quick brown fox jumps over the lazy dog
* code.sg $typograghy-minus-2
* p
* div.typescale-size-minus-3 The quick brown fox jumps over the lazy dog
* code.sg $typograghy-minus-3
*/
body {
font-family: "San Francisco", "Helvetica Neue", "Roboto", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif; }
.typescale-size-base {
font-size: 16px;
line-height: 1.5em; }
.typescale-size-minus-1 {
font-size: 14px;
line-height: 1.5em; }
.typescale-size-minus-2 {
font-size: 12px;
line-height: 1.5em; }
.typescale-size-minus-3 {
font-size: 10px;
line-height: 1.5em; }
.typescale-size-plus-1 {
font-size: 18px;
line-height: 1.5em; }
.typescale-size-plus-2 {
font-size: 24px;
line-height: 1.5em; }
.typescale-size-plus-3 {
font-size: 28px;
line-height: 1.5em; }
.typescale-size-plus-4 {
font-size: 36px;
line-height: 1.5em; }
.typescale-size-plus-5 {
font-size: 40px;
line-height: 1.5em; }
.typescale-size-plus-6 {
font-size: 48px;
line-height: 1.5em; }
.typescale-size-plus-7 {
font-size: 54px;
line-height: 1.5em; }
.typescale-size-minus-3 {
font-size: 10px;
line-height: 1.5em; }
Raw
templates.application.hbs
<h2>Logged out state</h2>
{{nav-wrapper loggedIn=false model=model}}
Raw
templates.components.nav-account-dropdown.hbs
<div class="wds-dropdown-toggle wds-global-navigation__dropdown-toggle">
<span class="wds-global-navigation__account-navigation-caption">My Account</span>
</div>
<div class="wds-dropdown-content wds-global-navigation__dropdown">
<ul class="wds-list wds-has-lines-between">
<li>
<button class="wds-button wds-is-full-width">Sign in</button>
</li>
<li>
<div class="wds-global-navigation__register-button-caption">Don&apos;t have an account?</div>
<button class="wds-button wds-is-secondary wds-is-full-width">Register</button>
</li>
</ul>
</div>
Raw
templates.components.nav-dropdown.hbs
<div class="wds-dropdown-toggle wds-global-navigation__dropdown-toggle">
<span>{{model.header.title.key}}</span>
</div>
<div class="wds-dropdown-content wds-global-navigation__dropdown">
<ul class="wds-list">
{{#each model.links as |link|}}
<li>
{{nav-link-text model=link}}
</li>
{{/each}}
</ul>
</div>
Raw
templates.components.nav-link-text.hbs
{{model.title.key}}
Raw
templates.components.nav-wrapper.hbs
<div class="wds-global-navigation__content-bar row">
<a href="#" class="wds-global-navigation__logo col-sm-4 col-md-3 col-lg-3">
<span class="wds-global-navigation__logo__powered-by">powered by</span>
</a>
<div class="col-sm-5 col-md-6 col-lg-6 wds-global-navigation__middle-column">
{{#each model.verticals.links as |vertical|}}
{{nav-link-branded model=vertical}}
{{/each}}
{{#with model.wikis as |wikis|}}
{{nav-dropdown model=wikis}}
{{/with}}
<div class="wds-global-navigation__search wds-global-navigation__content-item">Search placeholder</div>
</div>
<div class="col-sm-3 wds-global-navigation__right-column">
<div class="wds-global-navigation__content-item wds-global-navigation__account-navigation wds-dropdown wds-is-active">
<div class="wds-dropdown-toggle wds-global-navigation__dropdown-toggle">
<span class="wds-global-navigation__account-navigation-caption">My Account</span>
</div>
<div class="wds-dropdown-content wds-global-navigation__dropdown">
<ul class="wds-list wds-has-lines-between">
<li>
<button class="wds-button wds-is-full-width">Sign in</button>
</li>
<li>
<div class="wds-global-navigation__register-button-caption">Don&apos;t have an account?</div>
<button class="wds-button wds-is-secondary wds-is-full-width">Register</button>
</li>
</ul>
</div>
</div>
<a href="#" class="wds-button wds-is-squished wds-is-secondary wds-global-navigation__start-a-wiki">
<span class="wds-global-navigation__start-a-wiki-content">Start a wiki</span>
</a>
</div>
</div>
Raw
twiddle.json
{
"version": "0.10.4",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
"ember": "2.7.0",
"ember-data": "2.7.0",
"ember-template-compiler": "2.7.0"
},
"addons": {}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment