Convert sass files to scss files

sass/components/media.scss

@@ -0,0 +1,81 @@
+@import "../utilities/mixins";
+
+$media-border-color: bulmaRgba($border, 0.5) !default;
+$media-border-size: 1px !default;
+$media-spacing: 1rem !default;
+$media-spacing-large: 1.5rem !default;
+$media-content-spacing: 0.75rem !default;
+$media-level-1-spacing: 0.75rem !default;
+$media-level-1-content-spacing: 0.5rem !default;
+$media-level-2-spacing: 0.5rem !default;
+
+.media {
+  align-items: flex-start;
+  display: flex;
+  text-align: inherit;
+
+  .content:not(:last-child) {
+    margin-bottom: $media-content-spacing;
+  }
+
+  .media {
+    border-top: $media-border-size solid $media-border-color;
+    display: flex;
+    padding-top: $media-level-1-spacing;
+
+    .content:not(:last-child),
+    .control:not(:last-child) {
+      margin-bottom: $media-level-1-content-spacing;
+    }
+
+    .media {
+      padding-top: $media-level-2-spacing;
+
+      & + .media {
+        margin-top: $media-level-2-spacing;
+      }
+    }
+  }
+
+  & + .media {
+    border-top: $media-border-size solid $media-border-color;
+    margin-top: $media-spacing;
+    padding-top: $media-spacing;
+  }
+
+  // Sizes
+  &.is-large {
+    & + .media {
+      margin-top: $media-spacing-large;
+      padding-top: $media-spacing-large;
+    }
+  }
+}
+
+.media-left,
+.media-right {
+  flex-basis: auto;
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+.media-left {
+  @include ltr-property("margin", $media-spacing);
+}
+
+.media-right {
+  @include ltr-property("margin", $media-spacing, false);
+}
+
+.media-content {
+  flex-basis: auto;
+  flex-grow: 1;
+  flex-shrink: 1;
+  text-align: inherit;
+}
+
+@include mobile {
+  .media-content {
+    overflow-x: auto;
+  }
+}