Apripetrol (#78)

Update styleguide to apripetrol theme

.sass-lint.yml

@@ -90,8 +90,8 @@ rules:
   empty-args: 2
   hex-length: 2
   hex-notation: 2
-  indentation: 2
-  leading-zero: 2
+  indentation: 0
+  leading-zero: 0
   max-line-length: 0
   max-file-line-count: 0
   nesting-depth: 0
@@ -101,7 +101,7 @@ rules:
       order: 'concentric'
       order-explanation: Please use concentric property order. Details can be found here http://rhodesmill.org/brandon/2011/concentric-css/
   pseudo-element: 2
-  quotes: 2
+  quotes: 0
   shorthand-values: 2
   url-quotes: 2
   variable-for-property: 2

components/01-atoms/input-elements/alert/_alert.scss → components/01-atoms/form-elements/alert/_alert.scss

@@ -1,15 +1,12 @@
-$alert-color: $brand-white;
-
 .alert {
   @extend %heading-font-regular;
   display: flex;
   flex-wrap: nowrap;
   justify-content: space-between;
-  margin-bottom: $content-spacer-sm;
+  margin-bottom: $spacer-sm;
   padding: $spacer-xs;
-  line-height: $alert-line-height;
   color: $alert-color;
-  font-size: $alert-font-size-sm;
+  font-size: $font-size-base;
 
   &--info {
     background-color: $brand-info;
@@ -30,10 +27,9 @@ $alert-color: $brand-white;
   color: inherit;
 }
 
-
 @media screen and (min-width: $grid-breakpoint-md) {
   .alert {
-    margin-bottom: $content-spacer-base;
-    padding: $container-spacer-y-sm $container-spacer-x-sm;
+    margin-bottom: $spacer-md;
+    padding: $spacer-sm;
   }
 }

components/01-atoms/input-elements/button/_button.scss → components/01-atoms/form-elements/button/_button.scss

@@ -14,8 +14,7 @@ $default-btn-margin: $spacer-sm;
   border-radius: 0;
   background-color: $button-background;
   padding: $spacer-md $spacer-base;
-  line-height: $button-medium-line-height;
-  font-size: $button-medium-font-size;
+  font-size: $font-size-sm;
 
   &--cta {
     border-color: $button-cta-border-color;
@@ -52,20 +51,17 @@ $default-btn-margin: $spacer-sm;
 
   &--small {
     padding: $spacer-sm $spacer-md;
-    line-height: $button-small-line-height;
-    font-size: $button-small-font-size;
+    font-size: $font-size-base;
   }
 
   &--condensed {
     padding: $spacer-xs $spacer-sm;
-    line-height: $button-small-line-height;
-    font-size: $button-small-font-size;
+    font-size: $font-size-base;
   }
 
   &--large {
     padding: $spacer-md $spacer-lg;
-    line-height: $button-large-line-height;
-    font-size: $button-large-font-size;
+    font-size: $font-size-md;
   }
 
   &--inverted {

components/01-atoms/form-elements/fieldset/fieldset.html

@@ -0,0 +1 @@
+<fieldset class="fieldset">Fieldset</fieldset>

components/01-atoms/input-elements/form-control/_form-control.scss → components/01-atoms/form-elements/form-control/_form-control.scss

@@ -5,8 +5,8 @@
   transition: standard-transition(background-color);
   padding: $spacer-xs;
   width: 100%;
-  line-height: $form-control-line-height;
-  font-size: $form-control-font-size;
+  line-height: $paragraph-line-height;
+  font-size: $font-size-base;
 }
 
 .form-control {
@@ -33,7 +33,7 @@
 .custom-form-control {
   position: relative;
   transition: standard-transition(background-color, color, border-color);
-  min-height: ($base-line-height * 1rem);
+  min-height: ($paragraph-line-height * 1rem);
 
   &.form-control--invalid,
   .form-group--invalid & {

components/01-atoms/input-elements/form-label/_form-label.scss → components/01-atoms/form-elements/form-label/_form-label.scss

@@ -1,9 +1,10 @@
 .form-label {
   @extend %heading-font-regular;
+
   display: block;
   width: 100%;
-  line-height: $form-label-line-height;
-  font-size: $form-label-font-size;
+  color: $form-label-color;
+  font-size: $font-size-base;
 
   &--emphasized {
     @extend %heading-font-bold;

components/01-atoms/input-elements/legend/_legend.scss → components/01-atoms/form-elements/legend/_legend.scss

@@ -1,5 +1,7 @@
 .legend {
   @extend %heading-font-heavy;
+
   margin-bottom: $spacer-md;
-  font-size: $h3-font-size-small;
+  color: $form-legend-color;
+  font-size: $font-size-lg;
 }

components/01-atoms/media/avatar/_avatar.scss

@@ -1,3 +1,8 @@
+$avatar-size-xs: ms(10);             //~40px
+$avatar-size-sm: ms(14);             //~55px
+$avatar-size-md: ms(18);             //~80px
+$avatar-size-base: ms(22);           //~120px
+
 .avatar {
   display: inline-block;
 }

components/01-atoms/media/avatar/avatar.html

@@ -1,19 +1,18 @@
-<div>
-    <div class="avatar avatar--base">
-        <a class="avatar__link" href="#author-bio">
-            <img class="avatar__image" itemprop="photo" src={context.app.uri("assets/heribert.jpg")} alt="Portrait von Heribert Innoq" />
-        </a>
-    </div>
+<div class="avatar avatar--base">
+    <a class="avatar__link" href="#author-bio">
+        <img class="avatar__image" itemprop="photo" src={context.app.uri("assets/example-content/heribert.jpg")} alt="Portrait von Heribert Innoq" />
+    </a>
+</div>
 
-    <div class="avatar avatar--small">
-        <a class="avatar__link" href="#author-bio">
-            <img class="avatar__image" itemprop="photo" src={context.app.uri("assets/heribert.jpg")} alt="Portrait von Heribert Innoq" />
-        </a>
-    </div>
+<div class="avatar avatar--small">
+    <a class="avatar__link" href="#author-bio">
+        <img class="avatar__image" itemprop="photo" src={context.app.uri("assets/example-content/heribert.jpg")} alt="Portrait von Heribert Innoq" />
+    </a>
+</div>
 
-    <div class="avatar avatar--xs">
-        <a class="avatar__link" href="#author-bio">
-            <img class="avatar__image" itemprop="photo" src={context.app.uri("assets/heribert.jpg")} alt="Portrait von Heribert Innoq" />
-        </a>
-    </div>
+<div class="avatar avatar--xs">
+    <a class="avatar__link" href="#author-bio">
+        <img class="avatar__image" itemprop="photo" src={context.app.uri("assets/example-content/heribert.jpg")} alt="Portrait von Heribert Innoq" />
+    </a>
 </div>
+

components/01-atoms/media/figure/_figure.scss

@@ -1,5 +1,5 @@
 figure {
-  margin: 0 0 $content-spacer-base;
+  margin: 0 0 $spacer-md;
   // Short figcaptions will be centered, long ones left aligned
   text-align: center;
 
@@ -15,15 +15,15 @@ figcaption {
   display: inline-block;
   // Short figcaptions will be centered, long ones left aligned
   text-align: left;
-  line-height: $figcaption-line-height-small;
-  font-size: $figcaption-font-size-small;
+  line-height: $paragraph-line-height-sm;
+  font-size: $font-size-xxs;
 }
 
 
 @media screen and (min-width: $grid-breakpoint-md) {
 
   figcaption {
-    line-height: $figcaption-line-height;
-    font-size: $figcaption-font-size;
+    line-height: $paragraph-line-height-sm;
+    font-size: $font-size-base;
   }
 }

components/01-atoms/media/icon/_icon.scss

@@ -1,4 +1,4 @@
-  // sass-lint:disable no-vendor-prefixes, pseudo-element, empty-line-between-blocks
+// sass-lint:disable no-vendor-prefixes, pseudo-element, empty-line-between-blocks
 
 // icon font
 %icon,
@@ -7,8 +7,8 @@
   top: 2px;
   text-transform: none;
   line-height: 1;
-  font-family: 'icons';
-  font-size: .8em;
+  font-family: "icons";
+  font-size: 0.8em;
   font-weight: normal;
   font-style: normal;
   font-variant: normal;
@@ -133,11 +133,11 @@
   }
 }
 
-
 // SVG icons
 // TODO: Clean up svg icon classes after removing icon font
 .icon-svg {
-  display: inline-block;
+  display: inline-flex;
+  align-self: center;
   background: $brand-gray;
   width: $spacer-md;
   height: $spacer-md;
@@ -182,84 +182,96 @@
   background: $brand-yellow;
 }
 
-// Interface Icons
-.arrow-right {
-  position: relative;
-  top: .1em;
-  margin-left: $spacer-xs;
+//Arrows
+.icon-arrow-long-down {
+  width: 0.75rem; // magic number
+  height: 4.5rem; // magic number
+  mask-image: asset-url("icons/arrow-long-down.svg");
+  mask-repeat: no-repeat;
 }
 
-// .icon-arrow-long-down {
-//   mask: asset-url('icons/arrow-long-down.svg');
-// }
-//
 .icon-arrow-long-right {
   width: 4.5rem; // magic number
-  height: .75rem; // magic number
-  mask: asset-url('icons/arrow-long-right-blue.svg');
+  height: 0.75rem; // magic number
+  mask-image: asset-url("icons/arrow-long-right.svg");
+}
+
+.icon-arrow-medium-left {
+  width: 2rem; // magic number
+  height: 0.75rem; // magic number
+  mask-image: asset-url("icons/arrow-medium-left-red.svg");
 }
-//
-// .icon-arrow-medium-left {
-//   mask: asset-url('icons/arrow-medium-left-red.svg');
-// }
 
 .icon-arrow-sync {
-  mask-image: asset-url('icons/arrow-sync.svg');
+  mask-image: asset-url("icons/arrow-sync.svg");
 }
 
+// Interface Icons
 .icon-email {
-  mask-image: asset-url('icons/email.svg');
+  mask-image: asset-url("icons/email.svg");
 }
 
 .icon-feedback {
-  mask-image: asset-url('icons/feedback.svg');
+  mask-image: asset-url("icons/feedback.svg");
+}
+
+.icon-minus {
+  width: 1rem; // magic number
+  height: 0.5rem; // magic number
+  mask-image: asset-url("icons/minus-red.svg");
+}
+
+.icon-plus {
+  width: 1rem; // magic number
+  height: 1rem; // magic number
+  mask-image: asset-url("icons/plus-red.svg");
 }
 
 .icon-text {
-  mask-image: asset-url('icons/text.svg');
+  mask-image: asset-url("icons/text.svg");
 }
 
 // Logos
 .icon-apple-itunes {
-  mask-image: asset-url('icons/apple-itunes.svg');
+  mask-image: asset-url("icons/apple-itunes.svg");
 }
 
 .icon-facebook {
-  mask-image: asset-url('icons/facebook.svg');
+  mask-image: asset-url("icons/facebook.svg");
 }
 
 .icon-leanpub {
-  mask-image: asset-url('icons/leanpub.svg');
+  mask-image: asset-url("icons/leanpub.svg");
 }
 
 .icon-github {
-  mask-image: asset-url('icons/github.svg');
+  mask-image: asset-url("icons/github.svg");
 }
 
 .icon-linkedin {
-  mask-image: asset-url('icons/linkedin.svg');
+  mask-image: asset-url("icons/linkedin.svg");
 }
 
 .icon-rss {
-  mask-image: asset-url('icons/rss-boxed.svg');
+  mask-image: asset-url("icons/rss-boxed.svg");
 }
 
 .icon-rss-1 {
-  mask-image: asset-url('icons/rss.svg');
+  mask-image: asset-url("icons/rss.svg");
 }
 
 .icon-spotify {
-  mask-image: asset-url('icons/spotify.svg');
+  mask-image: asset-url("icons/spotify.svg");
 }
 
 .icon-twitter {
-  mask-image: asset-url('icons/twitter.svg');
+  mask-image: asset-url("icons/twitter.svg");
 }
 
 .icon-xing {
-  mask-image: asset-url('icons/xing.svg');
+  mask-image: asset-url("icons/xing.svg");
 }
 
 .icon-youtube {
-  mask-image: asset-url('icons/youtube.svg');
+  mask-image: asset-url("icons/youtube.svg");
 }