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 a3b0e18..db9b0eb 100644 Binary files a/fonts/hy-icons.eot and b/fonts/hy-icons.eot differ diff --git a/fonts/hy-icons.ttf b/fonts/hy-icons.ttf index 4ad3029..0f6ee2f 100644 Binary files a/fonts/hy-icons.ttf and b/fonts/hy-icons.ttf differ diff --git a/fonts/hy-icons.woff b/fonts/hy-icons.woff index bbbaac9..d57bb97 100644 Binary files a/fonts/hy-icons.woff and b/fonts/hy-icons.woff differ 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
+
+