Merge branch 'develop'

sass/_states.scss

@@ -81,12 +81,6 @@
   animation-name: slideIn;
 }
 
-.is-slideout {
-  animation-duration: 0.2s;
-  animation-fill-mode: forwards;
-  animation-name: slideOut;
-}
-
 @keyframes slideIn {
   0% {
     opacity: 0;
@@ -98,6 +92,12 @@
   }
 }
 
+.is-slideout {
+  animation-duration: 0.2s;
+  animation-fill-mode: forwards;
+  animation-name: slideOut;
+}
+
 @keyframes slideOut {
   0% {
     opacity: 1;
@@ -108,3 +108,18 @@
     transform: translateY(-50px);
   }
 }
+
+.is-fadein {
+  animation-duration: 0.2s;
+  animation-fill-mode: forwards;
+  animation-name: fadeIn;
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}

sass/common-elements/_common-elements.scss

@@ -210,6 +210,7 @@ input[type="submit"] {
 select,
 input[type="email"],
 input[type="text"],
+input[type="password"],
 textarea {
   @include font-size(16px);
   background: none;

sass/components/_carousel.scss

@@ -41,9 +41,9 @@
   bottom: auto;
   color: $silver;
   height: $vert-spacing-unit + 10px;
-  line-height: $vert-spacing-unit + 10px;
   margin-bottom: 0;
   margin-left: 0;
+  margin-top: 1em;
   position: absolute;
   right: 0;
   top: auto;

sass/components/_horizontal-tabs.scss

@@ -9,18 +9,32 @@
   margin-bottom: $vert-spacing-unit;
 
   .horizontal-tabs-list {
-    box-shadow: 0 -1px 0 0 $mediumsilver inset;
     margin-bottom: $vert-spacing-unit * 2;
 
     @include breakpoint($small) {
+      align-items: flex-end;
       display: flex;
       flex-direction: row;
       justify-content: center;
-      padding: 0 $vert-spacing-unit;
+      overflow: hidden;
+      padding: 1px $vert-spacing-unit 0;
+      position: relative;
+
+      &:after {
+        bottom: 0;
+        box-shadow: 0 -1px 0 0 $mediumsilver inset;
+        content: "";
+        height: 1px;
+        left: 0;
+        position: absolute;
+        right: 0;
+      }
     }
   }
 
   .horizontal-tabs-pane {
+    min-width: 0;
+
     legend {
       display: none;
     }
@@ -46,46 +60,43 @@
 
   @include breakpoint($small) {
     .horizontal-tab-button {
-      @include link-heading;
-      background: none;
-      border-bottom: none;
-      border-right: 1px solid $mediumsilver;
-      border-top: 1px solid $mediumsilver;
-      color: $white;
       flex-grow: 1;
+      flex-shrink: 0;
       margin: 0;
       text-align: center;
 
       > a {
         align-items: center;
-        background: none;
+        background: $white;
+        box-shadow: 0px 0px 0px 1px $mediumsilver;
         color: $blue;
         display: flex;
-        height: 100%;
+        height: 3rem;
         justify-content: center;
-        padding: 1em 3em;
+        padding: 0;
+        transform: translateY(5px);
+        transition-property: all;
+        transition-duration: 0.1s;
 
+        &:active,
         &:focus {
-          background-color: transparent;
+          background-color: $white;
           color: $blue;
         }
       }
 
-      &.selected a,
-      &:hover > a {
-        background-color: rgba(255, 255, 255, 1);
-        color: $darkblue;
-        transition-property: all;
-      }
+      &.selected {
+        z-index: 2;
 
-      &:not(.selected) {
-        &:first-child {
-          box-shadow: none;
+        a {
+          transform: translateY(0);
         }
       }
 
-      &:first-child {
-        border-left: 1px solid $mediumsilver;
+      &.selected a,
+      &:hover > a {
+        background-color: $white;
+        color: $darkblue;
       }
     }
   }

sass/components/_index.scss

@@ -30,6 +30,8 @@
 
 .index__row {
   margin: 0 0 0.6em 0;
+  page-break-inside: avoid;
+  -webkit-column-break-inside: avoid;
 }
 
 .index__link {

sass/components/_jobs-listing.scss

@@ -62,7 +62,6 @@ td.jobs-listing__title {
   @include font-family-main;
   @include font-size(14px);
   @include font-weight-medium;
-  @include text-informative;
   display: block;
   width: 100%;
 
@@ -76,7 +75,6 @@ td.jobs-listing__title {
 td.jobs-listing__date {
   @include font-family-main;
   @include font-size(14px);
-  @include text-informative;
   display: inline;
 
   @include breakpoint($medium) {

sass/components/_links.scss

@@ -66,5 +66,9 @@
 }
 
 span.links__link.theme-language {
-  color: $lightgray;
+  color: $mediumsilver;
+
+  @include breakpoint($small) {
+    color: $lightgray;
+  }
 }

sass/components/_textarea.scss

@@ -0,0 +1,131 @@
+/*
+ section: 6.11.1
+ title: Textarea
+ template: 6_11_1_textarea
+ description: Basic component used in multiple row textareas with links, headings, lists and so on. Class .theme-ingress is used on textarea without p-tags inside. Class .dropcap is an optional class for the first letter to make dropcaps.
+*/
+
+.textarea,
+%textarea {
+  @include font-family-bodytext;
+  line-height: 1.5em;
+
+  ul, ol {
+    margin-bottom: $vert-spacing-unit;
+  }
+
+  li {
+    line-height: 1.5em;
+    margin-bottom: 0.5em;
+  }
+
+  ul {
+    padding-left: 1.5em;
+    position: relative;
+
+    li {
+      list-style-type: none;
+
+      &:before {
+        @include font-size(9px);
+        @include icon($icon-dot);
+        left: 0;
+        margin-top: 1px;
+        position: absolute;
+      }
+    }
+  }
+
+  ol {
+    counter-reset: item;
+    padding-left: 1.5em;
+    position: relative;
+
+    li {
+      display: block;
+
+      &:before {
+        @include font-family-main;
+        @include font-weight-bold;
+        content: counter(item) ". ";
+        counter-increment: item;
+        left: 1px;
+        line-height: 1.7em;
+        position: absolute;
+      }
+    }
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    margin-top: 32px;
+
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+
+  a {
+    word-wrap: break-word;
+  }
+
+  table {
+    @extend %table-simple;
+    line-height: normal;
+    margin-bottom: 2em;
+  }
+
+  &.theme-ingress {
+    font-size: 1.2em;
+    font-weight: 600;
+    letter-spacing: 0.01em;
+    line-height: 1.5em;
+    margin-bottom: $vert-spacing-unit;
+  }
+
+  .dropcap {
+    @include breakpoint($small) {
+      @include font-size(75px);
+      @include font-weight-bold;
+      float: left;
+      line-height: 65px;
+      padding-right: 10px;
+      text-transform: uppercase;
+    }
+  }
+}
+
+/**
+ * textarea-initial
+ * An element (usually an image) floated left before a textarea.
+ */
+
+%textarea-initial,
+.textarea-initial {
+  float: left;
+  margin-bottom: 2em;
+  margin-right: 2em;
+}
+
+
+/*
+ section: 6.11.2
+ title: Textarea infobox
+ template: 6_11_2_textarea-infobox
+ description: Infobox type textarea.
+*/
+
+%textarea-infobox,
+.textarea-infobox {
+  @include font-family-main;
+  background-color: $lightsilver;
+  margin-bottom: 2em;
+  padding: 1.5em;
+
+  p {
+    line-height: normal;
+
+    &:last-of-type {
+      margin-bottom: 0;
+    }
+  }
+}

sass/components/box/_box-card.scss

@@ -131,7 +131,6 @@
   @extend .box-card__field;
 
   a {
-    @extend a;
     display: block;
     margin-bottom: 0.5em;
     padding-left: 1em;

sass/components/box/_box-data.scss

@@ -18,6 +18,7 @@
 .box-data__left {
   align-items: center;
   background-color: $lightgray;
+  color: $white;
   display: flex;
   flex-shrink: 0;
   height: 55px;
@@ -42,28 +43,25 @@
 }
 
 .box-data__date {
-  @include text-informative;
-  @include font-family-main;
   @include font-weight-medium;
-  color: $white;
+  @include font-size(14px);
 }
 
 .box-data__icon {
-  color: $white;
-
   &:after {
     @include font-size(38px);
     @include icon($icon-helsinginyliopisto);
   }
 }
 
+.box-data__container {
+  @include font-size(14px);
+}
+
 .box-data__title {
-  @include text-informative;
-  @include font-family-main;
   @include font-weight-medium;
 }
 
 .box-data__content {
-  @include text-informative;
-  @include font-family-main;
+  color: $lightgray;
 }