ethosstyles 0.1.7 → 0.1.8

data/app/assets/stylesheets/lib/fontawesome/scss/fa-brands.scss

@@ -0,0 +1,21 @@
+/*!
+ * Font Awesome Free 5.0.10 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ */
+@import 'variables';
+
+@font-face {
+  font-family: 'Font Awesome 5 Brands';
+  font-style: normal;
+  font-weight: normal;
+  src: url('#{$fa-font-path}/fa-brands-400.eot');
+  src: url('#{$fa-font-path}/fa-brands-400.eot?#iefix') format('embedded-opentype'),
+  url('#{$fa-font-path}/fa-brands-400.woff2') format('woff2'),
+  url('#{$fa-font-path}/fa-brands-400.woff') format('woff'),
+  url('#{$fa-font-path}/fa-brands-400.ttf') format('truetype'),
+  url('#{$fa-font-path}/fa-brands-400.svg#fontawesome') format('svg');
+}
+
+.fab {
+  font-family: 'Font Awesome 5 Brands';
+}

data/app/assets/stylesheets/lib/fontawesome/scss/fa-regular.scss

@@ -0,0 +1,22 @@
+/*!
+ * Font Awesome Free 5.0.10 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ */
+@import 'variables';
+
+@font-face {
+  font-family: 'Font Awesome 5 Free Regular';
+  font-style: normal;
+  font-weight: 400;
+  src: url('#{$fa-font-path}/fa-regular-400.eot');
+  src: url('#{$fa-font-path}/fa-regular-400.eot?#iefix') format('embedded-opentype'),
+  url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'),
+  url('#{$fa-font-path}/fa-regular-400.woff') format('woff'),
+  url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype'),
+  url('#{$fa-font-path}/fa-regular-400.svg#fontawesome') format('svg');
+}
+
+.far {
+  font-family: 'Font Awesome 5 Free Regular';
+  font-weight: 400;
+}

data/app/assets/stylesheets/lib/fontawesome/scss/fa-solid.scss

@@ -0,0 +1,23 @@
+/*!
+ * Font Awesome Free 5.0.10 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ */
+@import 'variables';
+
+@font-face {
+  font-family: 'Font Awesome 5 Free';
+  font-style: normal;
+  font-weight: 900;
+  src: url('#{$fa-font-path}/fa-solid-900.eot');
+  src: url('#{$fa-font-path}/fa-solid-900.eot?#iefix') format('embedded-opentype'),
+  url('#{$fa-font-path}/fa-solid-900.woff2') format('woff2'),
+  url('#{$fa-font-path}/fa-solid-900.woff') format('woff'),
+  url('#{$fa-font-path}/fa-solid-900.ttf') format('truetype'),
+  url('#{$fa-font-path}/fa-solid-900.svg#fontawesome') format('svg');
+}
+
+.fa,
+.fas {
+  font-family: 'Font Awesome 5 Free';
+  font-weight: 900;
+}

data/app/assets/stylesheets/main.scss

@@ -0,0 +1 @@
+@import 'ethosstyles';

data/app/assets/stylesheets/settings/_variables.scss

@@ -51,4 +51,7 @@ $input-padding-h: 12px;
 
 $font-primary: acumin-pro, sans-serif;
 $font-icon-f: "FontAwesome";
+$font-icon-f5: "Font Awesome 5 Free"; // solid
+$font-icon-f5-r: "Font Awesome 5 Free Regular"; // regular
+$font-icon-f5-b: 'Font Awesome 5 Brands'; // brands
 $font-icon-g: "Glyphicons Halflings";

data/app/assets/stylesheets/utilities/_mixins.scss

@@ -82,54 +82,6 @@
 }
 
 
-//
-// LOADING ICON
-//
-
-// Can specify background color and size
-
-@mixin rf-loader( $bg-color: $white, $size: 30px ) {
-  display: inline-block;
-  vertical-align: middle;
-  font-size: 10px;
-  text-indent: -9999em;
-  width: $size;
-  height: $size;
-  border-radius: 50%;
-  background: $blue-bright;
-  background: -webkit-linear-gradient(left, $blue-bright 10%, rgba(0,87,255, 0) 42%);
-  background: linear-gradient(to right, $blue-bright 10%, rgba(0,87,255, 0) 42%);
-  position: relative;
-  animation: spin 1.4s infinite linear;
-  transform: translateZ(0);
-
-  &:before {
-    width: 50%;
-    height: 50%;
-    background: $blue-bright;
-    border-radius: 100% 0 0 0;
-    position: absolute;
-    top: 0;
-    left: 0;
-    content: '';
-  }
-
-  &:after {
-    background: $bg-color;
-    width: 75%;
-    height: 75%;
-    border-radius: 50%;
-    content: '';
-    margin: auto;
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-  }
-}
-
-
 //
 // TRIGGER ARROW
 //

data/app/assets/stylesheets/utilities/_utilities.scss

@@ -67,6 +67,15 @@
 }
 
 
+//
+// COLORS
+//
+
+.rf-u-color--slate {
+  color: $slate !important;
+}
+
+
 //
 // STATUSES
 //

data/app/views/buttons.html

@@ -1,9 +1,5 @@
 <h1>BUTTON</h1>
 
-<?php
-echo "Hello World";
-?>
-
 <section class="rf-section">
 
   <h2>BUTTON TYPES</h2>

data/app/views/buttons.php

@@ -0,0 +1,105 @@
+<h1>BUTTON</h1>
+
+<section class="rf-section">
+
+  <h2>BUTTON TYPES</h2>
+
+  <a href="#" class="rf-btn rf-btn--primary">Primary</a>
+  <a href="#" class="rf-btn rf-btn--secondary">Secondary</a>
+  <a href="#" class="rf-btn rf-btn--link">Link</a>
+  <a href="#" class="rf-btn rf-btn--dropdown">Dropdown</a>
+  <a href="#" class="rf-btn rf-btn--warning">Warning</a>
+  <a href="#" class="rf-btn rf-btn--error">Error</a>
+</section>
+
+<section class="rf-section">
+
+  <h2>BUTTON SIZES</h2>
+
+  <a href="#" class="rf-btn rf-btn--small">Button</a>
+  <a href="#" class="rf-btn rf-btn--large">Button</a>
+  <br/><br/><br/>
+
+  <h3>Types + sizes </h3>
+
+  <a href="#" class="rf-btn rf-btn--primary rf-btn--large">Primary</a>
+  <a href="#" class="rf-btn rf-btn--warning rf-btn--large">Secondary</a>
+  <a href="#" class="rf-btn rf-btn--secondary rf-btn--large">Button</a>
+  <a href="#" class="rf-btn rf-btn--link rf-btn--large">Link</a>
+  <a href="#" class="rf-btn rf-btn--dropdown rf-btn--large">Dropdown</a>
+  <a href="#" class="rf-btn rf-btn--error rf-btn--large">Error</a>
+  <br/><br/><br/>
+
+  <a href="#" class="rf-btn rf-btn--primary rf-btn--small">Button</a>
+  <a href="#" class="rf-btn rf-btn--secondary rf-btn--small">Button</a>
+  <a href="#" class="rf-btn rf-btn--warning rf-btn--small">Button</a>
+  <a href="#" class="rf-btn rf-btn--link rf-btn--small">Link</a>
+  <a href="#" class="rf-btn rf-btn--dropdown rf-btn--small">Dropdown</a>
+  <a href="#" class="rf-btn rf-btn--error rf-btn--small">Error</a>
+</section>
+
+<section class="rf-section">
+  <h2>BUTTON HELPERS</h2>
+
+  <a href="#" class="rf-btn rf-btn--primary rf-btn--disabled">Disabled</a>
+  <a href="#" class="rf-btn rf-btn--primary rf-btn--errorhover">Error Hover</a>
+  <br/><br/><br/>
+
+  <div class="rf-sg--dark">
+    <a href="#" class="rf-btn rf-btn--secondary rf-btn--light">Button</a>
+    <a href="#" class="rf-btn rf-btn--secondary rf-btn--large rf-btn--light">Button</a>
+    <a href="#" class="rf-btn rf-btn--secondary rf-btn--small rf-btn--light">Button</a>
+    <a href="#" class="rf-btn rf-btn--dropdown rf-btn--light">Dropdown</a>
+  </div>
+  <br/><br/><br/>
+
+  <h3>Multiline buttons</h3>
+
+  <a href="#" class="rf-btn rf-btn--primary rf-btn--large rf-btn--multiline">
+    Primary
+    <small class="rf-btn__text">Extra line of text</small>
+  </a>
+  <a href="#" class="rf-btn rf-btn--secondary rf-btn--large">
+    Secondary
+  </a>
+</section>
+
+<section class="rf-section">
+
+  <h2>BUTTON GROUPINGS</h2>
+  <br/>
+  <h3>Button Group</h3>
+
+  <div class="rf-btn-group">
+    <a href="#" class="rf-btn rf-btn--primary rf-btn--large">Primary</a>
+    <a href="#" class="rf-btn rf-btn--warning rf-btn--large">Secondary</a>
+    <a href="#" class="rf-btn rf-btn--secondary rf-btn--large">Button</a>
+    <a href="#" class="rf-btn rf-btn--dropdown rf-btn--large">Dropdown</a>
+    <a href="#" class="rf-btn rf-btn--error rf-btn--large">Error</a>
+  </div>
+  <br/><br/><br/><br/>
+
+  <h3>Button Set</h3>
+  <div class="rf-col--2">
+    <div class="rf-btn-set">
+      <a href="#" class="rf-btn rf-btn--primary">Primary</a>
+      <a href="#" class="rf-btn rf-btn--secondary">Secondary</a>
+    </div>
+  </div>
+  <br/>
+  <div class="rf-col--8">
+    <div class="rf-btn-set">
+      <a href="#" class="rf-btn rf-btn--primary">Primary</a>
+      <a href="#" class="rf-btn rf-btn--secondary">Secondary</a>
+      <a href="#" class="rf-btn rf-btn--secondary">Secondary</a>
+    </div>
+  </div>
+  <br/>
+  <div class="rf-col--1">
+    <div class="rf-btn-set">
+      <a href="#" class="rf-btn rf-btn--primary">Primary</a>
+      <a href="#" class="rf-btn rf-btn--secondary">Secondary</a>
+      <a href="#" class="rf-btn rf-btn--secondary">Secondary</a>
+    </div>
+  </div>
+</section>

data/app/views/icons.php

@@ -0,0 +1,129 @@
+<section class="rf-section">
+  <h3>Basic Icons</h3>
+
+  <?php
+    $icon_class = "rf-icon--no";
+    include 'partial_icons.php';
+  ?>
+  <?php
+    $icon_class = "rf-icon--ok";
+    include 'partial_icons.php';
+  ?>
+  <?php
+    $icon_class = "rf-icon--grip";
+    include 'partial_icons.php';
+  ?>
+  <?php
+    $icon_class = "rf-icon--caret--right";
+    include 'partial_icons.php';
+  ?>
+  <?php
+    $icon_class = "rf-icon--refresh";
+    include 'partial_icons.php';
+  ?>
+  <?php
+    $icon_class = "rf-icon--rollback";
+    include 'partial_icons.php';
+  ?>
+  <?php
+    $icon_class = "rf-icon--pencil";
+    include 'partial_icons.php';
+  ?>
+  <?php
+    $icon_class = "rf-icon--eye-open";
+    include 'partial_icons.php';
+  ?>
+  <?php
+    $icon_class = "rf-icon--eye-closed";
+    include 'partial_icons.php';
+  ?>
+  <?php
+    $icon_class = "rf-icon--download";
+    include 'partial_icons.php';
+  ?>
+  <?php
+    $icon_class = "rf-icon--upload";
+    include 'partial_icons.php';
+  ?>
+  <?php
+    $icon_class = "rf-icon--trash";
+    include 'partial_icons.php';
+  ?>
+  <?php
+    $icon_class = "rf-icon--dashboard";
+    include 'partial_icons.php';
+  ?>
+  <?php
+    $icon_class = "rf-icon--repeat";
+    include 'partial_icons.php';
+  ?>
+  <?php
+    $icon_class = "rf-icon--question";
+    include 'partial_icons.php';
+  ?>
+  <?php
+    $icon_class = "rf-icon--github";
+    include 'partial_icons.php';
+  ?>
+</section>
+
+<section class="rf-section">
+  <h3>Status Icons</h3>
+  <p class="rf-p--lead">
+    Currently used in modals and on Moonbeam deploy pages.
+  </p>
+
+  <?php
+    $icon_class = "rf-icon--info";
+    include 'partial_icons.php';
+  ?>
+  <?php
+    $icon_class = "rf-icon--warning";
+    include 'partial_icons.php';
+  ?>
+  <?php
+    $icon_class = "rf-icon--error";
+    include 'partial_icons.php';
+  ?>
+</section>
+
+<section class="rf-section">
+  <h3>Status Icons</h3>
+  <p class="rf-p--lead">
+    Currently used in OrCA Onboarding page.
+  </p>
+
+  <?php
+    $icon_class = "rf-icon--failure";
+    include 'partial_icons.php';
+  ?>
+
+  <?php
+    $icon_class = "rf-icon--success";
+    include 'partial_icons.php';
+  ?>
+
+  <?php
+    $icon_class = "rf-icon--pending";
+    include 'partial_icons.php';
+  ?>
+
+  <?php
+    $icon_class = "rf-icon--ongoing";
+    include 'partial_icons.php';
+  ?>
+
+  <?php
+    $icon_class = "rf-icon--irrelevant";
+    include 'partial_icons.php';
+  ?>
+</section>
+
+<section class="rf-section">
+  <h3>Loaders</h3>
+
+  <?php
+    $icon_class = "rf-icon--loading";
+    include 'partial_icons.php';
+  ?>
+</section>

data/app/views/index.php

@@ -0,0 +1,48 @@
+<doctype>
+<html lang="">
+<head>
+  <meta charset="utf-8">
+  <title>Stardust</title>
+  <meta name="description" content="Ethos's design system">
+
+  <link rel="icon" href="favicon.ico" type="image/x-icon" />
+
+  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
+
+  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
+  <link rel="stylesheet" href="../assets/compiled/main.css">
+</head>
+
+<body>
+
+<div class="rf-container">
+  <ul>
+    <li><a href="#icons">Icons</a></li>
+    <li><a href="#modals">Modals</a></li>
+    <li><a href="#buttons">Buttons</a></li>
+  </ul>
+
+  <section class="rf-section">
+    <h2 id="icons">Icons</h2>
+    <?php include "icons.php" ?>
+  </section>
+
+  <section class="rf-section">
+    <h2 id="modals">Modals</h2>
+    <?php include "modals.php" ?>
+  </section>
+
+  <section class="rf-section">
+    <h2 id="buttons">Buttons</h2>
+    <?php include "buttons.php" ?>
+  </section>
+
+  <section class="rf-section">
+    <h2 id="list-groups">List Groups</h2>
+    <?php include "list-groups.php" ?>
+  </section>
+</div>
+
+</body>
+</html>

data/app/views/{list-groups.html → list-groups.php}

@@ -1,7 +1,4 @@
-<h1>LISTS</h1>
-
 <section class="rf-section">
-
   <h2>Basic List Groups + List Items</h2>
 
   <ul class="rf-list-group">

data/app/views/modal_partial.php

@@ -0,0 +1,21 @@
+<div class="modal-dialog">
+  <div class="modal-content rf-modal rf-modal--<?php echo $modal_type; ?>" role="document">
+    <div class="modal-header rf-modal__header">
+      <span class="rf-icon rf-icon--xlarge"></span>
+      <h2 class="rf-modal__title">This is a <?php echo $modal_type; ?> modal.</h2>
+    </div>
+    <div class="modal-body rf-modal__body">
+      <ul>
+        <li>This is a list item.</li>
+        <li>This is a second list item.</li>
+        <li>
+          This is a third list item. It is a long item. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque metus odio, pellentesque non odio ut, aliquam rhoncus quam. Mauris vulputate aliquet massa rutrum bibendum. Etiam consectetur ex erat, in sollicitudin sapien convallis at. Ut quis ligula sed massa consectetur lacinia vel vitae libero.
+        </li>
+      </ul>
+    </div>
+    <div class="modal-footer rf-modal__footer">
+      <button class="rf-btn rf-btn--secondary">Cancel</button>
+      <button class="rf-btn rf-btn--primary">Continue</button>
+    </div>
+  </div>
+</div>

data/app/views/modals.php

@@ -0,0 +1,20 @@
+<?php
+  $modal_type = "";
+  include 'modal_partial.php';
+?>
+
+<?php
+  $modal_type = "warning";
+  include 'modal_partial.php';
+?>
+
+<?php
+  $modal_type = "error";
+  include 'modal_partial.php';
+?>
+
+<?php
+  $modal_type = "info";
+  include 'modal_partial.php';
+?>
+<br/>

data/app/views/partial_icons.php

@@ -0,0 +1,16 @@
+<div class="rf-col rf-col--6 rf-col--grid">
+  <h4><?php echo $icon_class ?></h4>
+  <p>
+    <span class="rf-icon <?php echo $icon_class ?> rf-icon--xlarge"></span>
+    <span class="rf-icon <?php echo $icon_class ?> rf-icon--large"></span>
+    <span class="rf-icon <?php echo $icon_class ?>"></span>
+    <span class="rf-icon <?php echo $icon_class ?> rf-icon--small"></span>
+    <span class="rf-icon <?php echo $icon_class ?> rf-icon--xsmall"></span>
+  </p>
+
+  <pre>&lt;span class="rf-icon <?php echo $icon_class ?> rf-icon--xlarge"&gt;&lt;/span&gt;
+&lt;span class="rf-icon <?php echo $icon_class ?> rf-icon--large"&gt;&lt;/span&gt;
+&lt;span class="rf-icon <?php echo $icon_class ?>">&lt;/span&gt;
+&lt;span class="rf-icon <?php echo $icon_class ?> rf-icon--small"&gt;&lt;/span&gt;
+&lt;span class="rf-icon <?php echo $icon_class ?> rf-icon--xsmall"&gt;&lt;/span&gt;
+</div>

data/lib/ethosstyles/version.rb

@@ -1,3 +1,3 @@
 module Ethosstyles
-  VERSION = "0.1.7"
+  VERSION = "0.1.8"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: ethosstyles
 version: !ruby/object:Gem::Version
-  version: 0.1.7
+  version: 0.1.8
 platform: ruby
 authors:
 - Ethos
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-04-24 00:00:00.000000000 Z
+date: 2018-05-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -74,9 +74,12 @@ extensions: []
 extra_rdoc_files: []
 files:
 - ".gitignore"
+- Dockerfile
 - Gemfile
+- Makefile
 - README.md
 - Rakefile
+- app/assets/images/loader.svg
 - app/assets/stylesheets/_ethosstyles.scss
 - app/assets/stylesheets/components/_base.scss
 - app/assets/stylesheets/components/_blurbs.scss
@@ -89,6 +92,7 @@ files:
 - app/assets/stylesheets/components/_list-groups.scss
 - app/assets/stylesheets/components/_lists.scss
 - app/assets/stylesheets/components/_logs.scss
+- app/assets/stylesheets/components/_modal.scss
 - app/assets/stylesheets/components/_notices.scss
 - app/assets/stylesheets/components/_panels.scss
 - app/assets/stylesheets/components/_pills.scss
@@ -98,6 +102,12 @@ files:
 - app/assets/stylesheets/components/_tables.scss
 - app/assets/stylesheets/components/_timestamp.scss
 - app/assets/stylesheets/components/_well.scss
+- app/assets/stylesheets/lib/_normalize.scss
+- app/assets/stylesheets/lib/fontawesome/scss/_variables.scss
+- app/assets/stylesheets/lib/fontawesome/scss/fa-brands.scss
+- app/assets/stylesheets/lib/fontawesome/scss/fa-regular.scss
+- app/assets/stylesheets/lib/fontawesome/scss/fa-solid.scss
+- app/assets/stylesheets/main.scss
 - app/assets/stylesheets/pages/_styleguide.scss
 - app/assets/stylesheets/settings/_test.scss
 - app/assets/stylesheets/settings/_variables.scss
@@ -106,7 +116,14 @@ files:
 - app/assets/stylesheets/utilities/_shame.scss
 - app/assets/stylesheets/utilities/_utilities.scss
 - app/views/buttons.html
-- app/views/list-groups.html
+- app/views/buttons.php
+- app/views/favicon.ico
+- app/views/icons.php
+- app/views/index.php
+- app/views/list-groups.php
+- app/views/modal_partial.php
+- app/views/modals.php
+- app/views/partial_icons.php
 - ethosstyles.gemspec
 - lib/ethosstyles.rb
 - lib/ethosstyles/engine.rb