rails-active-ui 0.2.2 → 0.3.1

data/formantic-ui/components/placeholder.css

@@ -0,0 +1,228 @@
+/*!
+ * # Fomantic-UI 2.9.4 - Placeholder
+ * https://github.com/fomantic/Fomantic-UI/
+ *
+ *
+ * Released under the MIT license
+ * https://opensource.org/licenses/MIT
+ *
+ */
+
+/* -------------------
+      Content
+-------------------- */
+.ui.placeholder {
+  position: static;
+  overflow: hidden;
+  animation: placeholderShimmer 2s linear;
+  animation-iteration-count: infinite;
+  background-color: #fff;
+  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.08) 0, rgba(0, 0, 0, 0.15) 15%, rgba(0, 0, 0, 0.08) 30%);
+  background-size: 1200px 100%;
+  max-width: 30rem;
+}
+@keyframes placeholderShimmer {
+  0% {
+    background-position: -1200px 0;
+  }
+  100% {
+    background-position: 1200px 0;
+  }
+}
+.ui.placeholder + .ui.placeholder {
+  margin-top: 2rem;
+}
+.ui.placeholder + .ui.placeholder {
+  animation-delay: 0.15s;
+}
+.ui.placeholder + .ui.placeholder + .ui.placeholder {
+  animation-delay: 0.3s;
+}
+.ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder {
+  animation-delay: 0.45s;
+}
+.ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder {
+  animation-delay: 0.6s;
+}
+.ui.placeholder,
+.ui.placeholder > ::before,
+.ui.placeholder .image.header::after,
+.ui.placeholder .line,
+.ui.placeholder .line::after {
+  background-color: #fff;
+}
+.ui.placeholder.hidden {
+  display: none;
+}
+
+/* Image */
+.ui.placeholder .image:not(.header):not(.ui):not(.icon) {
+  height: 100px;
+}
+.ui.placeholder .square.image:not(.header) {
+  height: 0;
+  overflow: hidden;
+  
+/* 1/1 aspect ratio */
+  padding-top: 100%;
+}
+.ui.placeholder .rectangular.image:not(.header) {
+  height: 0;
+  overflow: hidden;
+  
+/* 4/3 aspect ratio */
+  padding-top: 75%;
+}
+
+/* Lines */
+.ui.placeholder .line {
+  position: relative;
+  height: 0.85714286em;
+}
+.ui.placeholder .line::before,
+.ui.placeholder .line::after {
+  top: 100%;
+  position: absolute;
+  content: "";
+  background-color: inherit;
+}
+.ui.placeholder .line::before {
+  left: 0;
+}
+.ui.placeholder .line::after {
+  right: 0;
+}
+
+/* Any Lines */
+.ui.placeholder .line {
+  margin-bottom: 0.5em;
+}
+.ui.placeholder .line::before,
+.ui.placeholder .line::after {
+  height: 0.5em;
+}
+.ui.placeholder .line:not(:first-child) {
+  margin-top: 0.5em;
+}
+
+/* Line Outdent */
+.ui.placeholder .line:nth-child(1)::after {
+  width: 0;
+}
+.ui.placeholder .line:nth-child(2)::after {
+  width: 50%;
+}
+.ui.placeholder .line:nth-child(3)::after {
+  width: 10%;
+}
+.ui.placeholder .line:nth-child(4)::after {
+  width: 35%;
+}
+.ui.placeholder .line:nth-child(5)::after {
+  width: 65%;
+}
+
+/* Header Image + 2 Lines */
+.ui.placeholder .header {
+  position: relative;
+  overflow: hidden;
+}
+
+/* Header Line 1 & 2 */
+.ui.placeholder .header .line {
+  margin-bottom: 0.64285714em;
+}
+.ui.placeholder .header .line::before,
+.ui.placeholder .header .line::after {
+  height: 0.64285714em;
+}
+.ui.placeholder .header .line:not(:first-child) {
+  margin-top: 0.64285714em;
+}
+.ui.placeholder .header .line::after {
+  width: 20%;
+}
+.ui.placeholder .header .line:nth-child(2)::after {
+  width: 60%;
+}
+
+/* Image Header */
+.ui.placeholder .image.header .line {
+  margin-left: 3em;
+}
+.ui.placeholder .image.header .line::before {
+  width: 0.71428571rem;
+}
+.ui.placeholder .image.header::after {
+  display: block;
+  height: 0.85714286em;
+  content: "";
+  margin-left: 3em;
+}
+
+/* Spacing */
+.ui.placeholder .image .line:first-child,
+.ui.placeholder .paragraph .line:first-child,
+.ui.placeholder .header .line:first-child {
+  height: 0.01px;
+}
+.ui.placeholder .image:not(:first-child)::before,
+.ui.placeholder .paragraph:not(:first-child)::before,
+.ui.placeholder .header:not(:first-child)::before {
+  height: 1.42857143em;
+  content: "";
+  display: block;
+}
+
+/* Inverted Content Loader */
+.ui.inverted.placeholder {
+  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.08) 0, rgba(255, 255, 255, 0.14) 15%, rgba(255, 255, 255, 0.08) 30%);
+}
+.ui.inverted.placeholder,
+.ui.inverted.placeholder > ::before,
+.ui.inverted.placeholder .image.header::after,
+.ui.inverted.placeholder .line,
+.ui.inverted.placeholder .line::after {
+  background-color: #1b1c1d;
+}
+
+
+/*******************************
+            Variations
+*******************************/
+
+
+/* -------------------
+        Sizes
+-------------------- */
+.ui.placeholder .full.line.line.line::after {
+  width: 0;
+}
+.ui.placeholder .very.long.line.line.line::after {
+  width: 10%;
+}
+.ui.placeholder .long.line.line.line::after {
+  width: 35%;
+}
+.ui.placeholder .medium.line.line.line::after {
+  width: 50%;
+}
+.ui.placeholder .short.line.line.line::after {
+  width: 65%;
+}
+.ui.placeholder .very.short.line.line.line::after {
+  width: 80%;
+}
+
+/* -------------------
+            Fluid
+    -------------------- */
+.ui.fluid.placeholder {
+  max-width: none;
+}
+
+
+/*******************************
+         Theme Overrides
+*******************************/
+

data/formantic-ui/components/placeholder.min.css

@@ -0,0 +1,9 @@
+/*!
+ * # Fomantic-UI 2.9.4 - Placeholder
+ * https://github.com/fomantic/Fomantic-UI/
+ *
+ *
+ * Released under the MIT license
+ * https://opensource.org/licenses/MIT
+ *
+ */.ui.placeholder{position:static;overflow:hidden;animation:placeholderShimmer 2s linear;animation-iteration-count:infinite;background-color:#fff;background-image:linear-gradient(to right,rgba(0,0,0,.08) 0,rgba(0,0,0,.15) 15%,rgba(0,0,0,.08) 30%);background-size:1200px 100%;max-width:30rem}@keyframes placeholderShimmer{0%{background-position:-1200px 0}100%{background-position:1200px 0}}.ui.placeholder+.ui.placeholder{margin-top:2rem}.ui.placeholder+.ui.placeholder{animation-delay:.15s}.ui.placeholder+.ui.placeholder+.ui.placeholder{animation-delay:.3s}.ui.placeholder+.ui.placeholder+.ui.placeholder+.ui.placeholder{animation-delay:.45s}.ui.placeholder+.ui.placeholder+.ui.placeholder+.ui.placeholder+.ui.placeholder{animation-delay:.6s}.ui.placeholder,.ui.placeholder .image.header::after,.ui.placeholder .line,.ui.placeholder .line::after,.ui.placeholder>::before{background-color:#fff}.ui.placeholder.hidden{display:none}.ui.placeholder .image:not(.header):not(.ui):not(.icon){height:100px}.ui.placeholder .square.image:not(.header){height:0;overflow:hidden;padding-top:100%}.ui.placeholder .rectangular.image:not(.header){height:0;overflow:hidden;padding-top:75%}.ui.placeholder .line{position:relative;height:.85714286em}.ui.placeholder .line::after,.ui.placeholder .line::before{top:100%;position:absolute;content:"";background-color:inherit}.ui.placeholder .line::before{left:0}.ui.placeholder .line::after{right:0}.ui.placeholder .line{margin-bottom:.5em}.ui.placeholder .line::after,.ui.placeholder .line::before{height:.5em}.ui.placeholder .line:not(:first-child){margin-top:.5em}.ui.placeholder .line:nth-child(1)::after{width:0}.ui.placeholder .line:nth-child(2)::after{width:50%}.ui.placeholder .line:nth-child(3)::after{width:10%}.ui.placeholder .line:nth-child(4)::after{width:35%}.ui.placeholder .line:nth-child(5)::after{width:65%}.ui.placeholder .header{position:relative;overflow:hidden}.ui.placeholder .header .line{margin-bottom:.64285714em}.ui.placeholder .header .line::after,.ui.placeholder .header .line::before{height:.64285714em}.ui.placeholder .header .line:not(:first-child){margin-top:.64285714em}.ui.placeholder .header .line::after{width:20%}.ui.placeholder .header .line:nth-child(2)::after{width:60%}.ui.placeholder .image.header .line{margin-left:3em}.ui.placeholder .image.header .line::before{width:.71428571rem}.ui.placeholder .image.header::after{display:block;height:.85714286em;content:"";margin-left:3em}.ui.placeholder .header .line:first-child,.ui.placeholder .image .line:first-child,.ui.placeholder .paragraph .line:first-child{height:.01px}.ui.placeholder .header:not(:first-child)::before,.ui.placeholder .image:not(:first-child)::before,.ui.placeholder .paragraph:not(:first-child)::before{height:1.42857143em;content:"";display:block}.ui.inverted.placeholder{background-image:linear-gradient(to right,rgba(255,255,255,.08) 0,rgba(255,255,255,.14) 15%,rgba(255,255,255,.08) 30%)}.ui.inverted.placeholder,.ui.inverted.placeholder .image.header::after,.ui.inverted.placeholder .line,.ui.inverted.placeholder .line::after,.ui.inverted.placeholder>::before{background-color:#1b1c1d}.ui.placeholder .full.line.line.line::after{width:0}.ui.placeholder .very.long.line.line.line::after{width:10%}.ui.placeholder .long.line.line.line::after{width:35%}.ui.placeholder .medium.line.line.line::after{width:50%}.ui.placeholder .short.line.line.line::after{width:65%}.ui.placeholder .very.short.line.line.line::after{width:80%}.ui.fluid.placeholder{max-width:none}