ethosstyles 0.1.14 → 0.1.15

data/app/assets/stylesheets/components/_modal.scss

@@ -1,66 +1,37 @@
-//
-// Modals
-//
-// Uses Bootstrap React modals
-//
-
-//
-// Hacks for Boostrap
-// Because you can't add a class to specific elements
-//
-
 .rf-modal {
-  .modal-content {
-    border-width: 0;
-    box-shadow: none;
-    height: 100%;
-    width: 100%;
-  }
-
-  .modal-footer,
-  .modal-header {
-    border-width: 0;
-    padding: 0;
-  }
-}
-
-
-//
-// Modal
-//
-
-.rf-modal {
-  background-color: $white;
-  border: $border-default;
-  border-radius: $border-radius;
-  box-shadow: 0 0 50px $metal;
-  color: $slate;
-  font-size: 14px;
+  width: 100%;
   max-width: 500px;
+  border-radius: $border-radius;
+  border: $border-default;
+  box-shadow: none; // for Bootstrap
   padding: 50px;
-  width: 100%;
 }
 
-.rf-modal__header,
-.rf-modal__footer {
+.rf-modal__header {
+  padding: 0; // for Bootstrap
   text-align: center;
+  border-bottom: 0px; // for Bootstrap
 }
 
 .rf-modal__header .rf-icon {
   margin-bottom: 16px;
 }
 
+.rf-modal__footer {
+  padding: 0; // for Bootstrap
+  border-top-width: 0px; // for Bootstrap
+  text-align: center;
+}
+
 .rf-modal__body {
+  padding: 30px 0;
   color: $slate;
   font-size: 14px;
   line-height: 20px;
-  padding: 30px 0;
 }
 
 
-//
 // Types
-//
 
 .rf-modal--info {
   .rf-modal__header .rf-icon {

data/app/assets/stylesheets/components/_pills.scss

@@ -2,16 +2,6 @@
 // Pills
 //
 
-%rf-pill--neutral {
-  border-color: $blue-bright;
-  color: $blue-bright;
-}
-
-%rf-pill--minor {
-  border-color: $stormy;
-  color: $stormy;
-}
-
 .rf-pill {
   border-radius: 20px;
   border-style: solid;
@@ -45,43 +35,7 @@
   color: $green;
 }
 
-.rf-pill--warning {
-  border-color: $gold;
-  color: $gold;
-}
-
 .rf-pill--minor {
   border-color: $stormy;
   color: $stormy;
 }
-
-.rf-pill--met,
-%rf-pill--met {
-  @extend %rf-pill--neutral;
-
-  &:before {
-    content: "\e013";
-    font-family: $font-icon-g;
-    font-size: 8px;
-    margin-right: 2px;
-  }
-}
-
-.rf-pill--unmet,
-%rf-pill--unmet {
-  @extend %rf-pill--minor;
-
-  &:before {
-    content: "\e014";
-    font-family: $font-icon-g;
-    font-size: 8px;
-    margin-right: 2px;
-  }
-}
-
-// Solid pills
-
-.rf-pill--solid {
-  background-color: $prewhite;
-  border-color: $prewhite;
-}

data/app/assets/stylesheets/components/_tables.scss

@@ -102,16 +102,3 @@ tr:first-of-type > .rf-table__td {
 .rf-table__body {
   @include round-table-corners();
 }
-
-
-//
-// Row status classes
-//
-
-.rf-table__row--error {
-  border-left: 6px solid $red;
-}
-
-.rf-table__row--success {
-  border-left: 6px solid $green;
-}

data/app/assets/stylesheets/components/_tooltips.scss

@@ -0,0 +1,55 @@
+//
+// Tooltips
+//
+
+.rf-tooltip + .tooltip {
+  line-height: 1.1em;
+
+  &.left {
+    width: 78px;
+    margin-left: -10px;
+  }
+
+  &.right {
+    width: 78px;
+    margin-left: +10px;
+  }
+
+  .tooltip-inner {
+    padding: 4px 8px;
+  }
+}
+
+.rf-tooltip--danger + .tooltip {
+  .tooltip-inner {
+    background-color: $red;
+  }
+
+  &.left .tooltip-arrow { border-left-color: $red; }
+  &.top .tooltip-arrow { border-top-color: $red; }
+  &.right .tooltip-arrow { border-right-color: $red; }
+  &.bottom .tooltip-arrow { border-bottom-color: $red; }
+}
+
+.rf-tooltip--pending + .tooltip {
+  .tooltip-inner {
+    background-color: $lemon;
+    color: $charcoal;
+  }
+
+  &.left .tooltip-arrow { border-left-color: $lemon; }
+  &.top .tooltip-arrow { border-top-color: $lemon; }
+  &.right .tooltip-arrow { border-right-color: $lemon; }
+  &.bottom .tooltip-arrow { border-bottom-color: $lemon; }
+}
+
+.rf-tooltip--valid + .tooltip {
+  .tooltip-inner {
+    background-color: $green;
+  }
+
+  &.left .tooltip-arrow { border-left-color: $green; }
+  &.top .tooltip-arrow { border-top-color: $green; }
+  &.right .tooltip-arrow { border-right-color: $green; }
+  &.bottom .tooltip-arrow { border-bottom-color: $green; }
+}

data/app/assets/stylesheets/main.scss

@@ -1,5 +1 @@
-@import 'lib/fontawesome/scss/fa-regular.scss';
-@import 'lib/fontawesome/scss/fa-solid.scss';
-@import 'lib/fontawesome/scss/fa-brands.scss';
-
 @import 'ethosstyles';

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

@@ -1,14 +1,12 @@
 //
 // Colors
 // https://davidwalsh.name/sass-color-variables-dont-suck
-// Name That Color: http://chir.ag/projects/name-that-color/
 //
 
 $white: #ffffff;
 $black: #000000;
 
 $charcoal: #191919;
-$metal: #555555;
 $slate: #777777;
 $stormy: #c0c0c0;
 $mercury: #e8e8e8;
@@ -57,26 +55,3 @@ $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";
-
-
-// Icons
-%icon--info {
-  color: $blue-bright;
-  content: "\f05a";
-  font-family: $font-icon-f5;
-  font-weight: 900;
-}
-
-%icon--error {
-  color: $red;
-  content: "\f06a";
-  font-family: $font-icon-f5;
-  font-weight: 900;
-}
-
-%icon--warning {
-  color: $gold;
-  content: "\f071";
-  font-family: $font-icon-f5;
-  font-weight: 900;
-}

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

@@ -11,25 +11,3 @@
     transform: rotate(360deg);
   }
 }
-
-@-webkit-keyframes rf-spin {
-  0% {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes rf-spin {
-  0% {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}

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

@@ -91,11 +91,15 @@
 @mixin trigger_arrow ( $display: block, $arrow-pos: $list-padding ) {
   &[aria-expanded='false']:after,
   &[aria-expanded='true']:after {
-    font-family: $font-icon-f5;
+    color: inherit;
+    font-family: 'octicons';
     font-size: 14px;
-    font-weight: 900;
     vertical-align: middle;
 
+    @include hocus() {
+      color: inherit;
+    }
+
     @if ($display==block) {
       display: block;
       position: absolute;
@@ -112,15 +116,14 @@
   }
 
   &[aria-expanded='false']:after {
-    content: '\f0da'; // triangle right
+    content: '\f05a'; // triangle right
   }
 
   &[aria-expanded='true']:after {
-    content: '\f0d7'; // triangle down
+    content: '\f05b'; // triangle down
   }
 }
 
-
 //
 // INPUT HANDLE
 // Used for toggles and ranges
@@ -154,9 +157,8 @@
   &[aria-expanded='false']:after,
   &[aria-expanded='true']:after {
     color: inherit;
-    font-family: $font-icon-f5;
+    font-family: 'octicons';
     font-size: 14px;
-    font-weight: 900;
     vertical-align: middle;
     height: $arrow-height;
     width: $arrow-width;
@@ -170,11 +172,11 @@
     }
   }
 
-    &[aria-expanded='false']:after {
-    content: '\f0da'; // triangle right
+  &[aria-expanded='false']:after {
+    content: '\f05a'; // triangle right
   }
 
   &[aria-expanded='true']:after {
-    content: '\f0d7'; // triangle down
+    content: '\f05b'; // triangle down
   }
 }

data/app/views/avatars.php

@@ -0,0 +1,31 @@
+<section class="rf-section">
+
+ <h3>Basic avatars</h3>
+  <?php
+    $avatar_nametag = "";
+    $avatar_overlay = "";
+    include 'partial_avatars.php';
+  ?>
+
+  <h3>Avatars with nametags</h3>
+  <?php
+    $avatar_nametag = "Devyn Elena Krevat";
+    $avatar_overlay = "";
+    include 'partial_avatars.php';
+  ?>
+
+  <h3>Avatars with success overlay</h3>
+  <?php
+    $avatar_nametag = "";
+    $avatar_overlay = "success";
+    include 'partial_avatars.php';
+  ?>
+
+  <h3>Avatars with failure overlay</h3>
+  <?php
+    $avatar_nametag = "";
+    $avatar_overlay = "failure";
+    include 'partial_avatars.php';
+  ?>
+
+</section>

data/app/views/buttons.html

@@ -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>