From 171c45d698a8b1cde24192e6bff6adf378d5cbe8 Mon Sep 17 00:00:00 2001 From: Tomasz Napieralski Date: Mon, 11 Jul 2016 15:17:12 +0200 Subject: [PATCH 1/2] DAT-4613 | add global-footer styles --- components/_global-footer.scss | 503 +++++++++++++++++++++++++++++++++ components/components.scss | 1 + dist/styles.scss | 1 + 3 files changed, 505 insertions(+) create mode 100644 components/_global-footer.scss create mode 100644 components/components.scss diff --git a/components/_global-footer.scss b/components/_global-footer.scss new file mode 100644 index 000000000..09d6a6b88 --- /dev/null +++ b/components/_global-footer.scss @@ -0,0 +1,503 @@ +.global-footer { + // columns + $desktop-column-fandom: 25%; + $desktop-column-wikia: 75%; + $desktop-first-column-width: 200px; + $desktop-second-column-width: 124px; + $desktop-third-column-width: 290px; + $desktop-fourth-column-width: 200px; + + // rows + $en-logo-height: 26px; + $international-logo-height: 30px; + + $desktop-row-header-en-margin-top: 47px; + $desktop-row-header-en-margin-bottom: 35px; + $desktop-row-header-en-height: $desktop-row-header-en-margin-top + $en-logo-height + $desktop-row-header-en-margin-bottom; + + $desktop-row-header-international-padding-top: 43px; + $desktop-row-header-international-padding-bottom: 34px; + $desktop-row-header-international-height: $desktop-row-header-international-padding-top + $international-logo-height + $desktop-row-header-international-padding-bottom; + + $mobile-row-header-en-fandom-margin-top: 38px; + $mobile-row-header-en-wikia-margin-top: 61px; + $mobile-row-header-en-margin-bottom: 29px; + + $mobile-row-header-international-padding-top: 34px; + $mobile-row-header-international-padding-bottom: 35px; + + $section-line-width: 4px; + $desktop-row-top-height: 205px + $section-line-width; + $desktop-row-bottom-height: 180px + $section-line-width; + + $desktop-en-sections-height: $desktop-row-header-en-height + $desktop-row-top-height + $desktop-row-bottom-height; + $desktop-international-sections-height: $desktop-row-top-height + $desktop-row-bottom-height; + + // others + $desktop-width: 1024px; + $section-padding-top: 8px; + $section-header-height: 24px; + $section-header-margin-bottom: 10px; + + background-color: $color-dark-blue-gray; + box-sizing: border-box; + color: $color-white; + + // reset and set some defaults (that should be set in DS) + * { + box-sizing: inherit; + } + + // we should have class that removes defaults from UL + ul { + list-style-type: none; + padding: 0; + margin: 0; + } + + // main title and license + &__header-wrapper { + display: block; + width: 100%; + } + + &__header { + align-items: center; + display: flex; + justify-content: center; + margin: 0; + } + + &__licensing-and-vertical { + align-items: center; + background: rgba($color-night-sky, .5); + color: $color-white; + display: flex; + font-size: $typescale-size-minus-2; + justify-content: center; + line-height: $line-height; + min-height: 50px; + padding: 16px 20px; + + /** + * 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. + */ + a, + a:visited { + color: $color-link; + text-decoration: none; + } + + a:hover { + color: $color-white; + } + } + + &__fandom-logo { + height: $en-logo-height; + width: 122px; + } + + &__wikia-logo { + height: $en-logo-height; + width: 67px; + + &.is-large { + height: $international-logo-height; + padding: 0; + width: 84px; + } + } + + // "Home of Fandom" subtitle + &__home-of-fandom { + border: { + bottom: 1px solid $color-blue-gray; + top: 1px solid $color-blue-gray; + } + color: #7f90a1; + display: block; + letter-spacing: 0.5px; + font: { + size: $typescale-size-minus-2; + weight: bold; + } + margin: { + left: 13px; + top: 5px; + } + padding: 3px 0; + text-transform: uppercase; + white-space: nowrap; + } + + // main content + &__main { + display: flex; + flex: { + direction: column; + wrap: wrap; + } + } + + // left (Fandom) and right (Wikia) header and sections + &__fandom-header, + &__wikia-header { + margin: 0; + } + + &__fandom-sections, + &__wikia-sections { + display: flex; + flex-wrap: wrap; + } + + &__fandom-section, + &__wikia-section { + border-top: $section-line-width solid $color-slate-gray; + margin-right: 55px; + padding-top: $section-padding-top; + } + + &__link { + &, + &:active, + &:visited { + color: $color-blue-gray; + font-size: $typescale-size-minus-1; + font-weight: normal; + line-height: 2em; + text-decoration: none; + } + + &:hover { + color: $color-white; + } + } + + &__fandom-section { + &.is-fandom-overview { + border: 0; + padding: 0; + + .global-footer__link { + align-items: center; + border-top: $section-line-width solid $color-slate-gray; + display: flex; + font: { + size: $typescale-size-plus-1; + weight: bold; + } + justify-content: space-between; + margin: 0; + padding: 2px 0 28px 0; + text-decoration: none; + + &.is-games { + border-color: $color-games; + } + + &.is-movies { + border-color: $color-movies; + } + + &.is-tv { + border-color: $color-tv; + } + } + + .global-footer__image { + transform: rotate(180deg); + } + } + + &.is-follow-us { + .global-footer__links-list { + display: flex; + flex-wrap: nowrap; + } + + .global-footer__link { + $social-icon-size: 24px; + + background: no-repeat center; + background-size: $social-icon-size; + display: inline-block; + height: $social-icon-size; + margin-right: 20px; + width: $social-icon-size; + } + + .global-footer__image { + color: $color-slate-gray; + &:hover { + color: $color-white; + } + } + } + } + + &__wikia-section { + &.is-create-wiki { + .global-footer__link { + border: solid 1px $color-blue-gray; + color: $color-blue-gray; + display: inline-block; + font: { + size: $typescale-size-minus-2; + weight: bold; + } + letter-spacing: 0.3px; + line-height: normal; + margin-top: 13px; + padding: 14px 18px; + text-decoration: none; + text-transform: uppercase; + + &:hover { + color: $color-white; + } + } + } + + &.is-community-apps { + .global-footer__links-list { + display: flex; + } + + .global-footer__link { + display: block; + line-height: normal; + margin-top: 6px; + width: 119px; + } + + .global-footer__image { + height: 35px; + width: 119px; + } + } + } + + &__section-header { + color: $color-white; + font: { + size: $typescale-size-plus-1; + weight: bold; + } + height: $section-header-height; + margin: { + bottom: $section-header-margin-bottom; + top: 0; + } + padding: 0; + } + + &__section-description { + color: $color-white; + font-size: $typescale-size-minus-1; + line-height: $line-height; + margin: 0; + padding: 0; + } + + @media #{$breakpoint-mobile-only} { + &__main { + margin: 0 20px; + } + + &__header-wrapper { + padding: { + bottom: $mobile-row-header-international-padding-bottom; + top: $mobile-row-header-international-padding-top; + } + } + + &__fandom-header { + margin: { + bottom: $mobile-row-header-en-margin-bottom; + top: $mobile-row-header-en-fandom-margin-top; + } + } + + &__wikia-header { + margin: { + bottom: $mobile-row-header-en-margin-bottom; + top: $mobile-row-header-en-wikia-margin-top; + } + } + + // left (Fandom) and right (Wikia) sections + &__fandom-section, + &__wikia-section { + margin: 0; + width: 100%; + } + + &__fandom-section { + &.is-fandom-overview { + .global-footer__links-list-item { + margin-bottom: 0; + } + } + + &.is-follow-us { + .global-footer__links-list-item { + margin-bottom: 0; + } + + .global-footer__link { + height: 42px; + margin-right: 10px; + width: 42px; + } + } + } + + &__wikia-section { + margin-bottom: 20px; + + &.is-company-overview { + width: 50%; + } + + &.is-site-overview { + padding-top: $section-padding-top + $section-header-height + $section-header-margin-bottom; + width: 50%; + } + + &.is-create-wiki { + display: none; + } + + &.is-community-apps { + .global-footer__links-list { + margin-top: 5px; + margin-bottom: 0; + } + + .global-footer__link { + margin-right: 25px; + } + } + } + + &.is-international { + .global-footer__fandom-section.is-follow-us { + margin-bottom: 37px; + } + } + + &__links-list-item { + margin-bottom: 10px; + } + + &__licensing-and-vertical { + text-align: center; + } + } + + @media #{$breakpoint-desktop-up} { + &__main { + margin: 0 auto; + width: $desktop-width; + } + + // main content + &.is-en { + .global-footer__main { + height: $desktop-en-sections-height; + } + } + + &.is-international { + .global-footer__main { + height: $desktop-international-sections-height; + } + } + + &__header-wrapper { + padding: { + bottom: $desktop-row-header-international-padding-bottom; + top: $desktop-row-header-international-padding-top; + } + } + + // left (Fandom) and right (Wikia) headers and sections + &__fandom-header, + &__wikia-header { + height: $en-logo-height; + margin: { + bottom: $desktop-row-header-en-margin-bottom; + top: $desktop-row-header-en-margin-top; + } + } + + &__fandom-header { + width: $desktop-column-fandom; + } + + &__fandom-sections { + flex-direction: column; + height: $desktop-row-top-height + $desktop-row-bottom-height; + width: $desktop-column-fandom; + } + + &__wikia-header { + width: $desktop-column-wikia; + } + + &__wikia-sections { + flex-direction: column; + height: $desktop-row-top-height + $desktop-row-bottom-height; + width: $desktop-column-wikia; + } + + // items in Fandom section + &__fandom-section { + width: $desktop-first-column-width; + } + + // items in Wikia section + &__wikia-section { + &.is-company-overview { + height: $desktop-row-top-height; + margin-right: 50px; + width: $desktop-second-column-width; + } + + &.is-site-overview { + height: $desktop-row-bottom-height; + margin-right: 50px; + width: $desktop-second-column-width; + } + + &.is-community { + height: $desktop-row-top-height; + width: $desktop-third-column-width; + } + + &.is-create-wiki { + height: $desktop-row-bottom-height; + display: block; + width: $desktop-third-column-width; + } + + &.is-community-apps { + height: $desktop-row-top-height; + width: $desktop-fourth-column-width; + + .global-footer__links-list { + flex-direction: column; + margin-top: 5px; + } + } + + &.is-advertise { + height: $desktop-row-bottom-height; + width: $desktop-fourth-column-width; + } + } + } +} diff --git a/components/components.scss b/components/components.scss new file mode 100644 index 000000000..1590ff0dc --- /dev/null +++ b/components/components.scss @@ -0,0 +1 @@ +@import 'global-footer'; diff --git a/dist/styles.scss b/dist/styles.scss index 2aaabce2d..a7d2597c0 100644 --- a/dist/styles.scss +++ b/dist/styles.scss @@ -1 +1,2 @@ @import '../base/base'; +@import '../components/components'; From 102df2eed739549e1369c750fec3f1c2dcd46707 Mon Sep 17 00:00:00 2001 From: Tomasz Napieralski Date: Mon, 11 Jul 2016 15:24:51 +0200 Subject: [PATCH 2/2] DAT-4613 | rename files --- base/{base.scss => index.scss} | 0 components/{components.scss => index.scss} | 0 dist/styles.scss | 4 ++-- 3 files changed, 2 insertions(+), 2 deletions(-) rename base/{base.scss => index.scss} (100%) rename components/{components.scss => index.scss} (100%) diff --git a/base/base.scss b/base/index.scss similarity index 100% rename from base/base.scss rename to base/index.scss diff --git a/components/components.scss b/components/index.scss similarity index 100% rename from components/components.scss rename to components/index.scss diff --git a/dist/styles.scss b/dist/styles.scss index a7d2597c0..b435e1de0 100644 --- a/dist/styles.scss +++ b/dist/styles.scss @@ -1,2 +1,2 @@ -@import '../base/base'; -@import '../components/components'; +@import '../base/index'; +@import '../components/index';