ethosstyles 0.1.14 → 0.1.15

checksums.yaml

@@ -1,7 +1,7 @@
 ---
-SHA256:
-  metadata.gz: 0aee2aeac24c749ccddb800dafe531d3ad62d6e2471b8b3cf738414de408a365
-  data.tar.gz: eb53a8b1ebe1d59ffc580c05eb99b191159810318e705ff6d03d03171e492b59
+SHA1:
+  metadata.gz: 95e0be2e152179fc55900ae9659e3b43f1172737
+  data.tar.gz: 9be708925dbbda7e350e8612491f75986c49fea7
 SHA512:
-  metadata.gz: 2bcd45bcfbc424ce84ac60f3ad4e0f761de42d149a2162bbe44d59ee5cbbcc7d2a5874c97f36ac7987d4cf8c7456ade2ac024dba00929536aabcde441bbfa37e
-  data.tar.gz: 2bb871e668eae7f4f9b806bc85b3e6e03afb6805c0fc8548b2e43655529dd76b72231b0bc9ceb32ca47f4bb18e7bef33c20e60319da67c1bda81f56c000c9160
+  metadata.gz: 731bf7ab2b4f4998a7407f45cb15fa5486ba0fa8410b0f5067f552b11071f0b9ccd50c655c267eb4df07b972a69b5d57d44d783a2fabd61cd623d9b4393b7325
+  data.tar.gz: d3f897e5b5eefc89d324605e92fe0d9ce9f35d3d835e07417b7ba9716a8103b8c2915d4744f59b5b395be85306fcb327cbaa13f68347292a12656431f1c5dfad

data/.gitignore

@@ -0,0 +1,9 @@
+_site
+.DS_store
+.sass-cache
+*gem
+*swp
+Gemfile.lock
+tmp
+
+app/assets/compiled/

data/Dockerfile

@@ -0,0 +1,7 @@
+FROM behance/docker-php:7.1
+
+# (optional, recommended) Verify everything is in order from the parent
+RUN goss -g /tests/php-fpm/7.1.goss.yaml validate && /aufs_hack.sh
+
+# Layer local code into runtime
+COPY ./ /app/

data/Gemfile

@@ -0,0 +1,4 @@
+source "http://rubygems.org"
+
+# Specify your gem's dependencies in sass-mixins.gemspec
+gemspec

data/Makefile

@@ -0,0 +1,15 @@
+export DOCKER_IP = $(shell which docker-machine > /dev/null 2>&1 && docker-machine ip $(DOCKER_MACHINE_NAME))
+
+down:
+	docker stop stardust || true
+	docker rm -v $$(docker ps -a -q -f status=exited -f status=created) || true
+up: down
+	docker run --name stardust -p 9090:8080 -d \
+		-v $$(pwd)/app:/app/public:ro \
+		stardust
+build:
+	docker build -t stardust .
+	sass --watch app/assets/stylesheets:app/assets/compiled &
+open:
+	open "http://$(DOCKER_IP):9090/views/"
+dev: build up open

data/README.md

@@ -0,0 +1,32 @@
+# Ethos Styles
+
+These are Ethos's main styles.
+
+Note: These are foundational styles, and should be edited sparingly. You can still add styles to Moonbeam and OrCA in the `stylesheets` directories.
+
+## To edit gem
+To develop this gem locally:
+
+1. Clone this repo to your computer.
+
+2. Replace gem name with gem file path in Gemfile:
+
+        # gem "ethosstyles"
+        gem "ethosstyles", :path => "/usr/ethosstyles"
+
+3. Add directory to `docker-compose.yml` under volumes within web:
+
+        web:
+          ...
+          volumes:
+            ...
+            - ../ethosstyles:/usr/ethosstyles
+
+4. You may need to rebuild moonbeam.
+
+        flotilla rebuild moonbeam
+
+
+## Process
+
+**Review any changes on Moonbeam and OrCA before pushing to [prod](https://rubygems.org/gems/ethosstyles).**

data/Rakefile

@@ -0,0 +1,9 @@
+# encoding: utf-8
+require 'rubygems'
+require 'bundler'
+require 'cucumber/rake/task'
+
+Bundler::GemHelper.install_tasks
+Cucumber::Rake::Task.new
+
+task :default => :cucumber

data/app/assets/images/loader.svg

@@ -0,0 +1,12 @@
+<svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+   width="40px" height="40px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
+<path fill="#0057ff" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z">
+  <animateTransform attributeType="xml"
+    attributeName="transform"
+    type="rotate"
+    from="0 25 25"
+    to="360 25 25"
+    dur="0.8s"
+    repeatCount="indefinite"/>
+  </path>
+</svg>

data/app/assets/stylesheets/_ethosstyles.scss

@@ -1,3 +1,9 @@
+@import 'settings/test';
+
+@import 'lib/fontawesome/scss/fa-regular.scss';
+@import 'lib/fontawesome/scss/fa-solid.scss';
+@import 'lib/fontawesome/scss/fa-brands.scss';
+
 @import 'settings/variables';
 
 @import 'utilities/animations';
@@ -5,6 +11,7 @@
 @import 'utilities/utilities';
 @import 'utilities/shame';
 
+@import 'components/avatars';
 @import 'components/base';
 @import 'components/blurbs';
 @import 'components/buttons';
@@ -25,7 +32,7 @@
 @import 'components/sliders';
 @import 'components/tables';
 @import 'components/timestamp';
-@import 'components/tooltip';
+@import 'components/tooltips';
 @import 'components/well';
 
 @import 'pages/styleguide';

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

@@ -0,0 +1,59 @@
+//
+// AVATARS
+//
+
+.rf-avatar {
+  position: relative;
+  display: inline-block;
+  margin-right: 4px;
+  margin-bottom: 4px;
+}
+
+.rf-avatar--med {
+  width: 50px;
+  height: 50px;
+}
+
+.rf-avatar--small {
+  width: 32px;
+  height: 32px;
+}
+
+.rf-avatar__img {
+  width: 100%;
+  height: 100%;
+  border-radius: 2px;
+}
+
+.rf-avatar__nametag {
+  width: 100%;
+  height: 15px;
+  background: $black;
+  opacity: .8;
+  border-radius: 0 0 2px 2px;
+  position: absolute;
+  font-size: 10px;
+  color: $white;
+  bottom: 0;
+  line-height: 15px;
+  text-overflow: ellipsis;
+  white-space: nowrap; 
+  overflow: hidden;
+  text-indent: 2px;
+}
+
+.rf-avatar__overlay {
+  width: 100%;
+  height: 100%;
+  border-radius: 2px;
+  position: absolute;
+  opacity: .7;
+}
+
+.rf-avatar__overlay--success {
+  background: $green;
+}
+
+.rf-avatar__overlay--failure {
+  background: $red;
+}

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

@@ -3,42 +3,27 @@
 // todo: add success and info styles
 //
 
-
-%blurb-icon {
-  background-color: $white;
-  border-radius: 10px;
-  display: block;
-  font-family: $font-icon-f5;
-  font-size: 18px;
-  font-weight: 900;
-  height: 15px;
-  left: -11px;
-  line-height: 17px;
-  position: absolute;
-  top: 15px;
-  width: 16px;
-}
-
 .rf-blurb {
   @extend %p;
 
   background-color: $prewhite;
-  border-radius: 0;
+  border-radius: $border-radius;
   padding: $list-padding;
   position: relative;
   width: 100%;
 
-  p:last-child {
-    margin-bottom: 0;
-  }
-}
-
-.rf-blurb--info {
-  border-left: 4px solid $blue-bright;
-
   &:before {
-    @extend %blurb-icon;
-    @extend %icon--info;
+    background-color: $white;
+    border-radius: 10px;
+    content: '';
+    display: block;
+    font-family: 'Glyphicons Halflings';
+    font-size: 18px;
+    height: 18px;
+    left: -11px;
+    position: absolute;
+    top: 16px;
+    width: 18px;
   }
 }
 
@@ -46,18 +31,7 @@
   border-left: 4px solid $red;
 
   &:before {
-    @extend %blurb-icon;
-    @extend %icon--error;
-  }
-}
-
-.rf-blurb--warning {
-  border-left: 4px solid $gold;
-
-  &:before {
-    @extend %blurb-icon;
-    @extend %icon--warning;
-
-    left: -12px;
+    color: $red;
+    content: "\e101";;
   }
 }

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

@@ -95,9 +95,8 @@ $btn-padding-x: $btn-padding-y * 1.8;
   &:after {
     content: "\f0d7";
     display: inline-block;
-    font-family: $font-icon-f5;
+    font-family: $font-icon-f;
     font-size: .8em;
-    font-weight: 900;
     line-height: 1em;
     margin-left: 7px;
   }
@@ -119,11 +118,10 @@ $btn-padding-x: $btn-padding-y * 1.8;
   // Warning icon
 
   &:before {
-
-    @extend %icon--warning;
-
     color: $white;
+    content: "\f071";
     display: inline-block;
+    font-family: $font-icon-f;
     font-size: 1em;
     line-height: .6em;
     margin-right: 4px;

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

@@ -36,7 +36,6 @@
 .rf-check__label {
   display: inline-block;
   font-size: 14px;
-  font-weight: 400;
   line-height: 14px;
   text-indent: -22px;
 }
@@ -46,16 +45,15 @@
   border-radius: $border-radius;
   color: $blue-bright;
   display: inline-block;
-  font-family: $font-icon-f5;
-  font-size: 11px;
-  font-weight: 900;
-  height: 18px;
-  line-height: 1.6em;
+  font-family: FontAwesome;
+  font-size: 9px;
+  height: 14px;
+  line-height: 1.4em;
   margin-right: 8px;
   margin-top: -2px;
   text-align: center;
   text-indent: 0;
-  width: 18px;
+  width: 14px;
   vertical-align: middle;
 }
 

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

@@ -9,7 +9,7 @@
   font-family: $font-icon-f5;
   font-size: 1em;
   font-style: normal;
-  font-weight: 900;
+  font-weight: normal;
   line-height: 1em;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -48,6 +48,11 @@
   }
 }
 
+.rf-icon--caret--right:after {
+  content: "\f0da";
+  font-family: $font-icon-f5;
+}
+
 .rf-icon--refresh:after {
   content: "\f021";
   font-family: $font-icon-f5;
@@ -115,41 +120,6 @@
   font-family: $font-icon-f5-b;
 }
 
-.rf-icon--caret--right:after {
-  content: "\f0da";
-  font-family: $font-icon-f5;
-}
-
-.rf-icon--caret--left:after {
-  content: "\f0d9";
-  font-family: $font-icon-f5;
-}
-
-.rf-icon--caret--up:after {
-  content: "\f0d8";
-  font-family: $font-icon-f5;
-}
-
-.rf-icon--caret--down:after {
-  content: "\f0d7";
-  font-family: $font-icon-f5;
-}
-
-.rf-icon--external:after {
-  content: "\f360";
-  font-family: $font-icon-f5;
-}
-
-.rf-icon--minus:after {
-  content: "\f068";
-  font-family: $font-icon-f5;
-}
-
-.rf-icon--plus:after {
-  content: "\f067";
-  font-family: $font-icon-f5;
-}
-
 
 //
 // MODAL
@@ -240,41 +210,27 @@
 //
 
 .rf-icon--loading {
-  -ms-transform: translateZ(0);
-  -webkit-animation: rf-spin 1.1s infinite linear;
-  -webkit-transform: translateZ(0);
-  animation: rf-spin 1.1s infinite linear;
-  border-radius: 50%;
-  border-bottom: 4px solid rgba(0,87,255, 0.2);
-  border-left: 4px solid $blue-bright;
-  border-right: 4px solid rgba(0,87,255, 0.2);
-  border-top: 4px solid rgba(0,87,255, 0.2);
+  background-image: url(../images/loader.svg);
+  background-size: 100% 100%;
   height: 30px;
-  position: relative;
-  text-indent: -9999em;
-  transform: translateZ(0);
   width: 30px;
 
   &.rf-icon--xlarge {
-    border-width: 10px;
-    height: 60px;
-    width: 60px;
+    height: 50px;
+    width: 50px;
   }
 
   &.rf-icon--large {
-    border-width: 6px;
     height: 38px;
     width: 38px;
   }
 
   &.rf-icon--small {
-    border-width: 4px;
     height: 20px;
     width: 20px;
   }
 
   &.rf-icon--xsmall {
-    border-width: 4px;
     height: 14px;
     width: 14px;
   }

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

@@ -6,16 +6,12 @@
   color: $slate;
   cursor: pointer;
   font-size: 12px;
-  font-weight: 400;
   text-decoration: underline;
-  text-indent: 0;
-  white-space: nowrap;
 
   &:after {
     display: inline-block;
-    font-family: $font-icon-f5;
-    font-size: 13px;
-    font-weight: 900;
+    font-family: 'Glyphicons Halflings';
+    font-size: 9px;
     margin-left: 4px;
   }
 
@@ -29,8 +25,7 @@
 }
 
 .rf-infolink--external:after {
-  content: '\f35d';
-  font-size: 10px;
+  content: '\e164';
 }
 
 .rf-infolink--external:before {
@@ -52,15 +47,3 @@
 .rf-infolink--trigger[aria-expanded='true']:after {
   content: '\2212';
 }
-
-.rf-infolink--refresh:after {
-  content: "\f2f1";
-  font-family: $font-icon-f5;
-  font-size: 10px;
-}
-
-.rf-infolink--noprefix {
-  &:before {
-    content: '' !important;
-  }
-}