From cb7a7b4a8c7549b43e1accf4054803e147b9302a Mon Sep 17 00:00:00 2001 From: Oskari Lindblad Date: Wed, 15 Feb 2017 17:06:01 +0200 Subject: [PATCH] Box liftup (#79) * added new component box-liftup * hover * fixed input background to white from transparent * fixed search form dark background to darkgray --- css/styles.css | 93 +++++++++++++++++++-- fonts/hy-icons.eot | Bin 25284 -> 25284 bytes fonts/hy-icons.ttf | Bin 25116 -> 25116 bytes fonts/hy-icons.woff | Bin 15356 -> 15356 bytes sass/common-elements/_common-elements.scss | 2 +- sass/components/_search-form.scss | 2 +- sass/components/box/_box-liftup.scss | 62 ++++++++++++++ sass/components/box/_box-story.scss | 6 +- templates/6_10_10_box-liftup.html | 10 +++ 9 files changed, 163 insertions(+), 12 deletions(-) create mode 100644 sass/components/box/_box-liftup.scss create mode 100644 templates/6_10_10_box-liftup.html diff --git a/css/styles.css b/css/styles.css index 8fdabf8..e6ae697 100644 --- a/css/styles.css +++ b/css/styles.css @@ -4333,7 +4333,7 @@ input[type="text"], input[type="password"], textarea { font-size: 1rem; - background: none; + background: #FFF; border-radius: 0; border: 1px solid #979797; color: #777777; @@ -6946,7 +6946,7 @@ input[type="submit"].search-form__submit:hover, } input[type="text"].search-form--dark__input { - background: #222; + background: #424242; border: none; color: #FFF; height: 3rem; @@ -8111,6 +8111,85 @@ input[type="text"].search-form-large__input { font-size: 1.125rem; } +/* + section: 6.10.10 + title: Box liftup + template: 6_10_10_box-liftup + description: Prominent liftup for e.g. ongoing Unitube live video. +*/ + +.box-liftup { + background-color: #0882B3; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + padding: 1em 1em 1em 0.5em; + position: relative; + transition-duration: 0.1s; + transition-property: background-color; +} + + +.box-liftup:hover { + background-color: #005479; +} + +@media (min-width: 48em) { + + .box-liftup { + padding: 1.25em; + } +} + +.box-liftup__left { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + margin-right: 0.5em; +} + +@media (min-width: 48em) { + .box-liftup__left { + margin-right: 1.25em; + } +} + +.box-liftup__icon { + font-size: 5.75rem; + color: #FFF; + line-height: 1; +} + +@media (max-width: 48em) { + .box-liftup__icon { + font-size: 3.14286rem; + } +} + +.box-liftup__precontent { + font-size: 0.8125rem; + color: #FFF; + padding-bottom: 5px; + text-transform: uppercase; +} + +.box-liftup__title { + color: #FFF; + padding-bottom: 5px; +} + +.box-liftup__content { + font-size: 0.8125rem; + color: #FFF; + text-transform: uppercase; +} + /* section: 6.10.9 title: Box logo @@ -8170,18 +8249,18 @@ input[type="text"].search-form-large__input { .box-story--liftup, .box-story--constrained, .box-story { - transition-property: background-color; - transition-duration: 0.1s; display: -webkit-flex; display: -ms-flexbox; display: flex; - -webkit-flex: 1 1 auto; - -ms-flex: 1 1 auto; - flex: 1 1 auto; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; position: relative; + transition-duration: 0.1s; + transition-property: background-color; } diff --git a/fonts/hy-icons.eot b/fonts/hy-icons.eot index a3b0e184ac26ff363d852cfc2eb7ad7c2593b0f1..db9b0ebaca92e88f335a359be36c8882d63fb542 100644 GIT binary patch delta 55 zcmX?dl<~+>#tAmed5#tAmeOqaG#wBN-X{mymbpQ+N@FEPdQ+k9o-_&6_~-{va=H}eYyAh>eiLK=+T%)%&<2ms{&5^4Yd delta 48 xcmbPpgmKOh#tDJU(eGR*hD?>-eu*ib-{va=H}eYyAh@zWvdjRRigkFk(~H7OfxKE?Cfd}ZKfegPC=xN_h^8jSw``~P>A!_3ct TTn+{%kSGALo)B2GJ2t@uvdjRRZmMX`{AH7VP)+v53czA|t#zW|CbT-hIT5Jvz1{r@}5Vdm#R TE(Ze>NE85;gb$swJ2t@u=QJHv diff --git a/sass/common-elements/_common-elements.scss b/sass/common-elements/_common-elements.scss index d70c53b..ec005e0 100644 --- a/sass/common-elements/_common-elements.scss +++ b/sass/common-elements/_common-elements.scss @@ -213,7 +213,7 @@ input[type="text"], input[type="password"], textarea { @include font-size(16px); - background: none; + background: $white; border-radius: 0; border: 1px solid $silver; color: $lightgray; diff --git a/sass/components/_search-form.scss b/sass/components/_search-form.scss index 93ab8bd..7fa3a42 100644 --- a/sass/components/_search-form.scss +++ b/sass/components/_search-form.scss @@ -59,7 +59,7 @@ input[type="submit"].search-form__submit { } input[type="text"].search-form--dark__input { - background: $black; + background: $darkgray; border: none; color: $white; height: 3rem; diff --git a/sass/components/box/_box-liftup.scss b/sass/components/box/_box-liftup.scss new file mode 100644 index 0000000..02def92 --- /dev/null +++ b/sass/components/box/_box-liftup.scss @@ -0,0 +1,62 @@ +/* + section: 6.10.10 + title: Box liftup + template: 6_10_10_box-liftup + description: Prominent liftup for e.g. ongoing Unitube live video. +*/ + +%box-liftup, +.box-liftup { + background-color: $blue--active; + display: flex; + flex-direction: row; + flex: 1 1 auto; + padding: 1em 1em 1em 0.5em; + position: relative; + transition-duration: 0.1s; + transition-property: background-color; + + &:hover { + background-color: $darkblue; + } + + @include breakpoint($small) { + padding: 1.25em; + } +} + +.box-liftup__left { + flex-shrink: 0; + margin-right: 0.5em; + + @include breakpoint($small) { + margin-right: 1.25em; + } +} + +.box-liftup__icon { + @include font-size(92px, 44px); + color: $white; + line-height: 1; +} + +.box-liftup__right { +} + +.box-liftup__precontent { + @include font-size(13px); + color: $white; + padding-bottom: 5px; + text-transform: uppercase; +} + +.box-liftup__title { + color: $white; + padding-bottom: 5px; +} + +.box-liftup__content { + @include font-size(13px); + color: $white; + text-transform: uppercase; +} diff --git a/sass/components/box/_box-story.scss b/sass/components/box/_box-story.scss index 144a50e..cf65a98 100644 --- a/sass/components/box/_box-story.scss +++ b/sass/components/box/_box-story.scss @@ -11,12 +11,12 @@ */ %box-story, .box-story { - transition-property: background-color; - transition-duration: 0.1s; display: flex; - flex: 1 1 auto; flex-direction: column; + flex: 1 1 auto; position: relative; + transition-duration: 0.1s; + transition-property: background-color; &:active .box-story__title, &:hover .box-story__title { diff --git a/templates/6_10_10_box-liftup.html b/templates/6_10_10_box-liftup.html new file mode 100644 index 0000000..140bf39 --- /dev/null +++ b/templates/6_10_10_box-liftup.html @@ -0,0 +1,10 @@ + +
+
+
+
+
Suora lähetys
+

Academic freedom and the Turkish turmoil: Symposium on academic freedom in Turkey

+
ti 28.6.2016 12:00-14:00
+
+