Last active
August 30, 2016 09:35
-
-
Save Grunny/ca817b9b6476377dbfd0de303d7c7598 to your computer and use it in GitHub Desktop.
Global Navigation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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": "#" | |
} | |
} | |
} | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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; } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"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