ethosstyles 0.1.7 → 0.1.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fce6d48c0b1e84d48868e7fc3acf162c690cbcdfe19c305e45358869f63a10f1
-  data.tar.gz: 353b3934e32adeb483750fb900998a293bd9687d5785db0633aba5646894a4aa
+  metadata.gz: fe969d87f6846095e57c108adade9c3f0705c08753c58e4855fdaceb7ad55f25
+  data.tar.gz: a79685e98829f618b2cdcd797f0f45248c04f7d363051cb6df8612d1fde5c940
 SHA512:
-  metadata.gz: 9fdea4fc7b5152a5d023e5df70101e810df854ba8f8a9ec4c388e659430a0c1554769fe94486ff7158d942ef86f1c22e11615bf1f2c2b08096c3a835b969a772
-  data.tar.gz: 46ae3228d8549602f472c9641f69eebf47ca2a68fc01d99d74a6f3ecafc5f007759be99985772bc9465bde97f7edaa28e5e3d1361b7af547a83fbbd81b70fdcc
+  metadata.gz: 6546bf38bad4f8bbe483a1e4e0c086e02c47a187edfc544d82ab4fb392794c21736ee4f3eb2ca9c6f92176d510eef6f205a617a15a13f0259f03d4192067d9da
+  data.tar.gz: e5f560e091b08d544a915bbfef8b106c05bc41591abaf0475b9e5e98d521f4800b64a7ea25d32f361dd5ecae5d29e5652190acb06548d673ab6eeed28f507587

data/.gitignore

@@ -5,3 +5,5 @@ _site
 *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/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/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,4 +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';
@@ -17,6 +22,7 @@
 @import 'components/lists';
 @import 'components/list-groups';
 @import 'components/logs';
+@import 'components/modal';
 @import 'components/notices';
 @import 'components/panels';
 @import 'components/pills';

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

@@ -23,7 +23,8 @@ h2 {
   padding-bottom: 6px;
 }
 
-h3 {
+h3,
+%h3 {
   @include remove_bootstrap_styles();
   color: $charcoal;
   font-size: 14px;
@@ -32,7 +33,8 @@ h3 {
   padding-bottom: 6px;
 }
 
-h4 {
+h4,
+%h4 {
   @include remove_bootstrap_styles();
   color: $charcoal;
   font-size: 16px;
@@ -41,7 +43,8 @@ h4 {
   padding-bottom: 8px;
 }
 
-h5 {
+h5,
+%h5 {
   @include remove_bootstrap_styles();
   color: $slate;
   font-size: 9px;
@@ -61,7 +64,8 @@ a:hover {
   color: $blue-bright;
 }
 
-p {
+p,
+%p {
   color: $slate;
   font-size: 14px;
   line-height: 18px;

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

@@ -16,6 +16,14 @@
 // COLUMNS
 //
 
+.rf-col {
+  float: left;
+}
+
+.rf-col--grid {
+  padding: 20px;
+}
+
 .rf-col--1 {
   width: 8.333333%;
 }

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

@@ -6,48 +6,270 @@
   position: relative;
   top: 1px;
   display: inline-block;
-  font-family: 'Glyphicons Halflings';
+  font-family: $font-icon-f5;
+  font-size: 1em;
   font-style: normal;
   font-weight: normal;
-  line-height: 1;
+  line-height: 1em;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-.rf-icon--pending:after {
-  color: $stormy;
-  content: "\e083";
+
+//
+// BASIC
+//
+
+// the letter x
+
+.rf-icon--no:after {
+  color: $red;
+  content: "\f00d";
+  font-family: $font-icon-f5;
 }
 
-.rf-icon--success:after {
-  content: "\e084";
+// Green check mark
+
+.rf-icon--ok:after {
+  content: "\f00c";
   color: $green;
+  font-family: $font-icon-f5;
+}
+// 6 dots, 2 across
+
+.rf-icon--grip:after {
+  color: $stormy;
+  content: "\f142 \202F \f142";
+  cursor: -webkit-grab;
+  font-family: $font-icon-f5;
+
+  &:active {
+    cursor: -webkit-grabbing;
+  }
+}
+
+.rf-icon--caret--right:after {
+  content: "\f0da";
+  font-family: $font-icon-f5;
+}
+
+.rf-icon--refresh:after {
+  content: "\f021";
+  font-family: $font-icon-f5;
+}
+
+.rf-icon--rollback{
+  transform: scale(-1, 1);
+
+  &:after {
+    color: $red;
+    content: "\f01e";
+    font-family: $font-icon-f5;
+  }
+}
+
+.rf-icon--pencil:after {
+  content: "\270f";
+  font-family: $font-icon-g;
 }
 
+.rf-icon--eye-open:after {
+  content: "\f06e";
+  font-family: $font-icon-f5;
+}
+
+.rf-icon--eye-closed:after {
+  content: "\f070";
+  font-family: $font-icon-f5;
+}
+
+.rf-icon--download:after {
+  content: "\f019";
+  font-family: $font-icon-f5;
+}
+
+.rf-icon--upload:after {
+  content: "\f093";
+  font-family: $font-icon-f5;
+}
+
+.rf-icon--trash:after {
+  content: "\f2ed";
+  font-family: $font-icon-f5;
+}
+
+.rf-icon--dashboard:after {
+  content: "\f3fd";
+  font-family: $font-icon-f5;
+}
+
+.rf-icon--repeat:after {
+  content: "\f2f9";
+  font-family: $font-icon-f5;
+}
+
+.rf-icon--question:after {
+  color: $blue-bright;
+  content: "\f059";
+  font-family: $font-icon-f5;
+}
+
+.rf-icon--github:after {
+  font-weight: 900;
+  content: "\f09b";
+  font-family: $font-icon-f5-b;
+}
+
+
+//
+// MODAL
+//
+
+// i with a circle
+
+.rf-icon--info:after,
+%rf-icon--info:after {
+  color: $blue-bright;
+  content: "\f05a";
+  font-family: $font-icon-f5;
+}
+
+// ! with a triangle
+
+.rf-icon--warning:after,
+%rf-icon--warning:after {
+  color: $gold;
+  content: "\f071";
+  font-family: $font-icon-f5;
+}
+
+// ! with a circle
+
+.rf-icon--error:after,
+%rf-icon--error:after {
+  color: $red;
+  content: "\f06a";
+  font-family: $font-icon-f5;
+}
+
+
+//
+// STEP STATUSES
+// In use on OrCA at the moment
+//
+
+// Circle with x
+// Not executed
+
 .rf-icon--failure:after {
-  content: "\e083";
   color: $red;
+  content: "\f057";
+  font-family: $font-icon-f5;
 }
 
-.rf-icon--ongoing {
-  // @include rf-loader( $white, 14px );
-  border: 3px solid $blue-bright;
-  border-radius: 100%;
-  height: 14px;
-  width: 14px;
+// Circle with x
+// Not executed
+
+.rf-icon--success:after {
+  color: $green;
+  content: "\f058";
+  font-family: $font-icon-f5;
 }
 
+// Circle with x
+// Not executed
+
+.rf-icon--pending:after {
+  color: $stormy;
+  content: "\f057";
+  font-family: $font-icon-f5;
+}
+
+// Blue circle
+// Step you're currently on
+
+.rf-icon--ongoing:after {
+  color: $blue-bright;
+  content: "\f111";
+  font-family: $font-icon-f5-r;
+}
+
+// Gray dash
+// Unneeded step
+
 .rf-icon--irrelevant:after {
-  content: "\2212";
   color: $stormy;
+  content: "\f068";
+  font-family: $font-icon-f5;
 }
 
-// Grip Icon
 
-.rf-icon--grip {
-  cursor: -webkit-grab;
+//
+// LOADERS
+// Must define background color
+//
 
-  &:active {
-    cursor: -webkit-grabbing;
+.rf-icon--loading {
+  background-image: url(../images/loader.svg);
+  background-size: 100% 100%;
+  height: 30px;
+  width: 30px;
+
+  &.rf-icon--xlarge {
+    height: 50px;
+    width: 50px;
+  }
+
+  &.rf-icon--large {
+    height: 38px;
+    width: 38px;
+  }
+
+  &.rf-icon--small {
+    height: 20px;
+    width: 20px;
+  }
+
+  &.rf-icon--xsmall {
+    height: 14px;
+    width: 14px;
   }
 }
+
+
+//
+// ICON HELPERS
+//
+
+.rf-icon--onleft {
+  margin-right: 6px;
+}
+
+.rf-icon--onright {
+  margin-left: 6px;
+}
+
+
+//
+// ICON SIZES
+//
+
+.rf-icon--xlarge,
+%rf-icon--xlarge {
+  font-size: 3.8em;
+}
+
+.rf-icon--large,
+%rf-icon--large {
+  font-size: 2em;
+}
+
+.rf-icon--small,
+%rf-icon--small {
+  font-size: .8em;
+}
+
+.rf-icon--xsmall,
+%rf-icon--xsmall {
+  font-size: .6em;
+}

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

@@ -0,0 +1,52 @@
+.rf-modal {
+  width: 100%;
+  max-width: 500px;
+  border-radius: $border-radius;
+  border: $border-default;
+  box-shadow: none; // for Bootstrap
+  padding: 50px;
+}
+
+.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;
+}
+
+
+// Types
+
+.rf-modal--info {
+  .rf-modal__header .rf-icon {
+    @extend %rf-icon--info;
+  }
+}
+
+.rf-modal--warning {
+  .rf-modal__header .rf-icon {
+    @extend %rf-icon--warning;
+  }
+}
+
+.rf-modal--error {
+  .rf-modal__header .rf-icon {
+    @extend %rf-icon--error;
+  }
+}

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

@@ -5,6 +5,7 @@
 .rf-section {
   padding-bottom: 20px;
   padding-top: 20px;
+  clear: both;
 
   &:first-of-type {
     padding-top: 0;