Box liftup (#79)

* added new component box-liftup * hover * fixed input background to white from transparent * fixed search form dark background to darkgray
UniversityofHelsinki · Feb 15, 2017 · cb7a7b4 · cb7a7b4
1 parent 1c36b7d
commit cb7a7b4
Show file tree

Hide file tree

Showing 9 changed files with 163 additions and 12 deletions.
diff --git 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
diff --git a/fonts/hy-icons.ttf b/fonts/hy-icons.ttf
diff --git a/fonts/hy-icons.woff b/fonts/hy-icons.woff
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,10 @@
+<a class="box-liftup" href="">
+  <div class="box-liftup__left">
+    <div class="box-liftup__icon icon--video"></div>
+  </div>
+  <div class="box-liftup__right">
+    <div class="box-liftup__precontent">Suora lähetys</div>
+    <h4 class="box-liftup__title">Academic freedom and the Turkish turmoil: Symposium on academic freedom in Turkey</h4>
+    <div class="box-liftup__content">ti 28.6.2016 12:00-14:00</div>
+  </div>
+</a>