@internetstiftelsen/styleguide 2.22.3-beta.0.19 → 2.22.3-beta.0.21

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@internetstiftelsen/styleguide",
-	"version": "2.22.3-beta.0.19",
+	"version": "2.22.3-beta.0.21",
 	"main": "dist/components.js",
 	"ports": {
 		"fractal": "3000"

package/src/organisms/timeline/_timeline.scss

@@ -135,6 +135,25 @@ html {
 			display: none;
 			padding-bottom: 0;
 			margin-top: 0;
+			min-height: 45px;
+			background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid' class='lds-ring' style='background: none;'%3E%3Ccircle cx='50' cy='50' ng-attr-r='%7B%7Bconfig.radius%7D%7D' ng-attr-stroke='%7B%7Bconfig.base%7D%7D' ng-attr-stroke-width='%7B%7Bconfig.width%7D%7D' fill='none' r='43' stroke='%23a7d8fd' stroke-width='7'%3E%3C/circle%3E%3Ccircle cx='50' cy='50' ng-attr-r='%7B%7Bconfig.radius%7D%7D' ng-attr-stroke='%7B%7Bconfig.stroke%7D%7D' ng-attr-stroke-width='%7B%7Bconfig.innerWidth%7D%7D' ng-attr-stroke-linecap='%7B%7Bconfig.linecap%7D%7D' fill='none' r='43' stroke='%2350b2fc' stroke-width='7' stroke-linecap='square' transform='rotate(27.6965 50 50)'%3E%3CanimateTransform attributeName='transform' type='rotate' calcMode='linear' values='0 50 50;180 50 50;720 50 50' keyTimes='0;0.5;1' dur='2.5s' begin='0s' repeatCount='indefinite'%3E%3C/animateTransform%3E%3Canimate attributeName='stroke-dasharray' calcMode='linear' values='9.42477796076938 179.0707812546182;188.4955592153876 -2.842170943040401e-14;9.42477796076938 179.0707812546182' keyTimes='0;0.5;1' dur='2.5' begin='0s' repeatCount='indefinite'%3E%3C/animate%3E%3C/circle%3E%3C/svg%3E%0A");
+			background-repeat: no-repeat;
+			background-position: center center;
+			background-size: 45px 45px;
+
+			@include bp-up(md) {
+				min-height: 100px;
+				background-size: 100px 100px;
+			}
+
+			@include bp-up(xl) {
+				min-height: 150px;
+				background-size: 150px 150px;
+			}
+
+			&[data-timeline-post-expanded-content="true"] {
+				background-image: none;
+			}
 
 			@include e(meta) {
 				@include e(related) {

package/src/organisms/video-guide/_video-guide.scss

@@ -420,6 +420,7 @@
 		width: auto;
 		position: absolute;
 		bottom: rhythm(1);
+		right: rhythm(1);
 		z-index: 3;
 		font-family: $font-family-headings;
 		min-width: 200px;
@@ -445,12 +446,16 @@
 		@include bp-up(lg) {
 			font-size: $size-base * 1.7;
 			min-width: 500px;
-			max-width: 800px;
+			max-width: 700px;
 			bottom: rhythm(2);
 			align-self: flex-end;
 			right: rhythm(2);
 		}
 
+		@include bp-up(xxl) {
+			max-width: 800px;
+		}
+
 		&.is-visible {
 			display: inline-block;