real-world-css-libraries 1.0.2 → 1.0.4

package/libs/waffle-grid-v1.3.6.css

@@ -0,0 +1,544 @@
+/* https://github.com/pr1mer-tech/waffle-grid/blob/master/dist/waffle-grid.css */
+/*!
+ * waffle-grid - v1.3.6 - (https://lucasgruwez.github.io/waffle-grid)
+ * Copyright 2017 Lucas Gruwez.
+ * Licensed under MIT
+ * https://lucasgruwez.github.io/waffle-grid
+ */.container,.grid {
+  width: 960px;
+  max-width: 80%;
+  margin: 0 auto;
+}
+
+.grid,.row {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.grid {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+
+.grid.full-width {
+  width: 100%;
+  max-width: 100%;
+}
+
+.row {
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  width: 100%;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+}
+
+.col {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  margin: 10px;
+  vertical-align: top;
+}
+
+.center,.left {
+  margin-right: auto;
+}
+
+.center,.right {
+  margin-left: auto;
+}
+
+.w-auto {
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+}
+
+.col-1-of-4,.col-2-of-8,.col-3-of-12 {
+  width: calc(25% - 20px);
+}
+
+.push-1-of-4,.push-2-of-8,.push-3-of-12 {
+  margin-left: calc(25% + 20px / 2);
+}
+
+.pull-1-of-4,.pull-2-of-8,.pull-3-of-12 {
+  margin-right: calc(25% + 20px / 2);
+}
+
+.col-2-of-4,.col-4-of-8,.col-6-of-12 {
+  width: calc(50% - 20px);
+}
+
+.push-2-of-4,.push-4-of-8,.push-6-of-12 {
+  margin-left: calc(50% + 20px / 2);
+}
+
+.pull-2-of-4,.pull-4-of-8,.pull-6-of-12 {
+  margin-right: calc(50% + 20px / 2);
+}
+
+.col-3-of-4,.col-6-of-8,.col-9-of-12 {
+  width: calc(75% - 20px);
+}
+
+.push-3-of-4,.push-6-of-8,.push-9-of-12 {
+  margin-left: calc(75% + 20px / 2);
+}
+
+.pull-3-of-4,.pull-6-of-8,.pull-9-of-12 {
+  margin-right: calc(75% + 20px / 2);
+}
+
+.col-12-of-12,.col-4-of-4,.col-8-of-8 {
+  width: calc(100% - 20px);
+}
+
+.push-12-of-12,.push-4-of-4,.push-8-of-8 {
+  margin-left: calc(100% + 20px / 2);
+}
+
+.pull-12-of-12,.pull-4-of-4,.pull-8-of-8 {
+  margin-right: calc(100% + 20px / 2);
+}
+
+.col-1-of-8 {
+  width: calc(12.5% - 20px);
+}
+
+.push-1-of-8 {
+  margin-left: calc(12.5% + 20px / 2);
+}
+
+.pull-1-of-8 {
+  margin-right: calc(12.5% + 20px / 2);
+}
+
+.col-3-of-8 {
+  width: calc(37.5% - 20px);
+}
+
+.push-3-of-8 {
+  margin-left: calc(37.5% + 20px / 2);
+}
+
+.pull-3-of-8 {
+  margin-right: calc(37.5% + 20px / 2);
+}
+
+.col-5-of-8 {
+  width: calc(62.5% - 20px);
+}
+
+.push-5-of-8 {
+  margin-left: calc(62.5% + 20px / 2);
+}
+
+.pull-5-of-8 {
+  margin-right: calc(62.5% + 20px / 2);
+}
+
+.col-7-of-8 {
+  width: calc(87.5% - 20px);
+}
+
+.push-7-of-8 {
+  margin-left: calc(87.5% + 20px / 2);
+}
+
+.pull-7-of-8 {
+  margin-right: calc(87.5% + 20px / 2);
+}
+
+.col-1-of-12 {
+  width: calc(8.33333% - 20px);
+}
+
+.push-1-of-12 {
+  margin-left: calc(8.33333% + 20px / 2);
+}
+
+.pull-1-of-12 {
+  margin-right: calc(8.33333% + 20px / 2);
+}
+
+.col-2-of-12 {
+  width: calc(16.66667% - 20px);
+}
+
+.push-2-of-12 {
+  margin-left: calc(16.66667% + 20px / 2);
+}
+
+.pull-2-of-12 {
+  margin-right: calc(16.66667% + 20px / 2);
+}
+
+.col-4-of-12 {
+  width: calc(33.33333% - 20px);
+}
+
+.push-4-of-12 {
+  margin-left: calc(33.33333% + 20px / 2);
+}
+
+.pull-4-of-12 {
+  margin-right: calc(33.33333% + 20px / 2);
+}
+
+.col-5-of-12 {
+  width: calc(41.66667% - 20px);
+}
+
+.push-5-of-12 {
+  margin-left: calc(41.66667% + 20px / 2);
+}
+
+.pull-5-of-12 {
+  margin-right: calc(41.66667% + 20px / 2);
+}
+
+.col-7-of-12 {
+  width: calc(58.33333% - 20px);
+}
+
+.push-7-of-12 {
+  margin-left: calc(58.33333% + 20px / 2);
+}
+
+.pull-7-of-12 {
+  margin-right: calc(58.33333% + 20px / 2);
+}
+
+.col-8-of-12 {
+  width: calc(66.66667% - 20px);
+}
+
+.push-8-of-12 {
+  margin-left: calc(66.66667% + 20px / 2);
+}
+
+.pull-8-of-12 {
+  margin-right: calc(66.66667% + 20px / 2);
+}
+
+.col-10-of-12 {
+  width: calc(83.33333% - 20px);
+}
+
+.push-10-of-12 {
+  margin-left: calc(83.33333% + 20px / 2);
+}
+
+.pull-10-of-12 {
+  margin-right: calc(83.33333% + 20px / 2);
+}
+
+.col-11-of-12 {
+  width: calc(91.66667% - 20px);
+}
+
+.push-11-of-12 {
+  margin-left: calc(91.66667% + 20px / 2);
+}
+
+.pull-11-of-12 {
+  margin-right: calc(91.66667% + 20px / 2);
+}
+
+@media (max-width:840px) {
+  .m-hide {
+    display: none;
+  }
+
+  .w-m-auto {
+    -webkit-box-flex: 1;
+        -ms-flex: 1;
+            flex: 1;
+  }
+
+  .m-un-push {
+    margin-left: 10px;
+  }
+
+  .m-un-pull {
+    margin-right: 10px;
+  }
+
+  .col-m-1-of-4,.col-m-2-of-8 {
+    width: calc(25% - 20px);
+  }
+
+  .push-m-1-of-4,.push-m-2-of-8 {
+    margin-left: calc(25% + 20px / 2);
+  }
+
+  .pull-m-1-of-4,.pull-m-2-of-8 {
+    margin-right: calc(25% + 20px / 2);
+  }
+
+  .col-m-2-of-4,.col-m-3-of-6,.col-m-4-of-8 {
+    width: calc(50% - 20px);
+  }
+
+  .push-m-2-of-4,.push-m-3-of-6,.push-m-4-of-8 {
+    margin-left: calc(50% + 20px / 2);
+  }
+
+  .pull-m-2-of-4,.pull-m-3-of-6,.pull-m-4-of-8 {
+    margin-right: calc(50% + 20px / 2);
+  }
+
+  .col-m-3-of-4,.col-m-6-of-8 {
+    width: calc(75% - 20px);
+  }
+
+  .push-m-3-of-4,.push-m-6-of-8 {
+    margin-left: calc(75% + 20px / 2);
+  }
+
+  .pull-m-3-of-4,.pull-m-6-of-8 {
+    margin-right: calc(75% + 20px / 2);
+  }
+
+  .col-m-4-of-4,.col-m-6-of-6,.col-m-8-of-8 {
+    width: calc(100% - 20px);
+  }
+
+  .push-m-4-of-4,.push-m-6-of-6,.push-m-8-of-8 {
+    margin-left: calc(100% + 20px / 2);
+  }
+
+  .pull-m-4-of-4,.pull-m-6-of-6,.pull-m-8-of-8 {
+    margin-right: calc(100% + 20px / 2);
+  }
+
+  .col-m-1-of-6 {
+    width: calc(16.66667% - 20px);
+  }
+
+  .push-m-1-of-6 {
+    margin-left: calc(16.66667% + 20px / 2);
+  }
+
+  .pull-m-1-of-6 {
+    margin-right: calc(16.66667% + 20px / 2);
+  }
+
+  .col-m-2-of-6 {
+    width: calc(33.33333% - 20px);
+  }
+
+  .push-m-2-of-6 {
+    margin-left: calc(33.33333% + 20px / 2);
+  }
+
+  .pull-m-2-of-6 {
+    margin-right: calc(33.33333% + 20px / 2);
+  }
+
+  .col-m-4-of-6 {
+    width: calc(66.66667% - 20px);
+  }
+
+  .push-m-4-of-6 {
+    margin-left: calc(66.66667% + 20px / 2);
+  }
+
+  .pull-m-4-of-6 {
+    margin-right: calc(66.66667% + 20px / 2);
+  }
+
+  .col-m-5-of-6 {
+    width: calc(83.33333% - 20px);
+  }
+
+  .push-m-5-of-6 {
+    margin-left: calc(83.33333% + 20px / 2);
+  }
+
+  .pull-m-5-of-6 {
+    margin-right: calc(83.33333% + 20px / 2);
+  }
+
+  .col-m-1-of-8 {
+    width: calc(12.5% - 20px);
+  }
+
+  .push-m-1-of-8 {
+    margin-left: calc(12.5% + 20px / 2);
+  }
+
+  .pull-m-1-of-8 {
+    margin-right: calc(12.5% + 20px / 2);
+  }
+
+  .col-m-3-of-8 {
+    width: calc(37.5% - 20px);
+  }
+
+  .push-m-3-of-8 {
+    margin-left: calc(37.5% + 20px / 2);
+  }
+
+  .pull-m-3-of-8 {
+    margin-right: calc(37.5% + 20px / 2);
+  }
+
+  .col-m-5-of-8 {
+    width: calc(62.5% - 20px);
+  }
+
+  .push-m-5-of-8 {
+    margin-left: calc(62.5% + 20px / 2);
+  }
+
+  .pull-m-5-of-8 {
+    margin-right: calc(62.5% + 20px / 2);
+  }
+
+  .col-m-7-of-8 {
+    width: calc(87.5% - 20px);
+  }
+
+  .push-m-7-of-8 {
+    margin-left: calc(87.5% + 20px / 2);
+  }
+
+  .pull-m-7-of-8 {
+    margin-right: calc(87.5% + 20px / 2);
+  }
+}
+
+@media (max-width:480px) {
+  .s-hide {
+    display: none;
+  }
+
+  .w-s-auto {
+    -webkit-box-flex: 1;
+        -ms-flex: 1;
+            flex: 1;
+  }
+
+  .s-un-push {
+    margin-left: 10px;
+  }
+
+  .s-un-pull {
+    margin-right: 10px;
+  }
+
+  .col-s-1-of-4 {
+    width: calc(25% - 20px);
+  }
+
+  .push-s-1-of-4 {
+    margin-left: calc(25% + 20px / 2);
+  }
+
+  .pull-s-1-of-4 {
+    margin-right: calc(25% + 20px / 2);
+  }
+
+  .col-s-2-of-4,.col-s-3-of-6 {
+    width: calc(50% - 20px);
+  }
+
+  .push-s-2-of-4,.push-s-3-of-6 {
+    margin-left: calc(50% + 20px / 2);
+  }
+
+  .pull-s-2-of-4,.pull-s-3-of-6 {
+    margin-right: calc(50% + 20px / 2);
+  }
+
+  .col-s-3-of-4 {
+    width: calc(75% - 20px);
+  }
+
+  .push-s-3-of-4 {
+    margin-left: calc(75% + 20px / 2);
+  }
+
+  .pull-s-3-of-4 {
+    margin-right: calc(75% + 20px / 2);
+  }
+
+  .col-s-4-of-4,.col-s-6-of-6 {
+    width: calc(100% - 20px);
+  }
+
+  .push-s-4-of-4,.push-s-6-of-6 {
+    margin-left: calc(100% + 20px / 2);
+  }
+
+  .pull-s-4-of-4,.pull-s-6-of-6 {
+    margin-right: calc(100% + 20px / 2);
+  }
+
+  .col-s-1-of-6 {
+    width: calc(16.66667% - 20px);
+  }
+
+  .push-s-1-of-6 {
+    margin-left: calc(16.66667% + 20px / 2);
+  }
+
+  .pull-s-1-of-6 {
+    margin-right: calc(16.66667% + 20px / 2);
+  }
+
+  .col-s-2-of-6 {
+    width: calc(33.33333% - 20px);
+  }
+
+  .push-s-2-of-6 {
+    margin-left: calc(33.33333% + 20px / 2);
+  }
+
+  .pull-s-2-of-6 {
+    margin-right: calc(33.33333% + 20px / 2);
+  }
+
+  .col-s-4-of-6 {
+    width: calc(66.66667% - 20px);
+  }
+
+  .push-s-4-of-6 {
+    margin-left: calc(66.66667% + 20px / 2);
+  }
+
+  .pull-s-4-of-6 {
+    margin-right: calc(66.66667% + 20px / 2);
+  }
+
+  .col-s-5-of-6 {
+    width: calc(83.33333% - 20px);
+  }
+
+  .push-s-5-of-6 {
+    margin-left: calc(83.33333% + 20px / 2);
+  }
+
+  .pull-s-5-of-6 {
+    margin-right: calc(83.33333% + 20px / 2);
+  }
+}
+
+@media (min-width:480px) {
+  .s-and-lower {
+    display: none;
+  }
+}
+
+@media (min-width:840px) {
+  .m-and-lower {
+    display: none;
+  }
+}

package/libs/wenk-v1.0.8.css

@@ -0,0 +1,126 @@
+/* https://github.com/tiaanduplessis/wenk/blob/master/dist/wenk.cssnext.css */
+/**
+ * wenk - Lightweight tooltip for the greater good
+ * @version v1.0.6
+ * (c) 2018 Tiaan du Plessis @tiaanduplessis |
+ * @link https://tiaanduplessis.github.io/wenk/
+ * @license MIT
+ */
+ :root {
+    --font-size: 13px;
+    --font-color: #fff;
+    --bg-color: rgba(17, 17, 17, .8);
+    --length-small: 80px;
+    --length-medium: 150px;
+    --length-large: 260px;
+}
+
+[data-wenk] {
+    position: relative;
+    &:after {
+        position: absolute;
+        font-size: var(--font-size);
+        border-radius: .4rem;
+        content: attr(data-wenk);
+        padding: .8rem;
+        background-color: var(--bg-color);
+        box-shadow: 0 0 14px rgba(0, 0, 0, 0.1);
+        color: var(--font-color);
+        line-height: 1.25rem;
+        text-align: left;
+        z-index: 1;
+        pointer-events: none;
+        display: block;
+        opacity: 0;
+        visibility: hidden;
+        transition: all .3s;
+        bottom: 100%;
+        left: 50%;
+        transform: translate(-50%, 10px);
+        white-space: pre;
+        width: auto;
+    }
+    &:after {
+        opacity: 0;
+    }
+    &:hover {
+        overflow: visible;
+        &:after {
+            display: block;
+            opacity: 1;
+            visibility: visible;
+            transform: translate(-50%, -10px);
+        }
+    }
+
+    &.wenk--bottom, &[data-wenk-pos="bottom"] {
+        &:after {
+            bottom: auto;
+            top: 100%;
+            left: 50%;
+            transform: translate(-50%, -10px);
+        }
+        &:hover {
+            &:after {
+                transform: translate(-50%, 10px);
+            }
+        }
+    }
+
+    &.wenk--left, &[data-wenk-pos="left"] {
+        &:after {
+            bottom: auto;
+            left: auto;
+            top: 50%;
+            right: 100%;
+            transform: translate(10px, -50%);
+        }
+        &:hover {
+            &:after {
+                transform: translate(-10px, -50%);
+            }
+        }
+    }
+
+    &.wenk--right, &[data-wenk-pos="right"] {
+        &:after {
+            bottom: auto;
+            top: 50%;
+            left: 100%;
+            transform: translate(-10px, -50%);
+        }
+        &:hover {
+            &:after {
+                transform: translate(10px, -50%);
+            }
+        }
+    }
+
+    &[data-wenk-length="small"]:after, &.wenk-length--small:after {
+        white-space: normal;
+        width: var(--length-small);
+    }
+    &[data-wenk-length="medium"]:after, &.wenk-length--medium:after {
+        white-space: normal;
+        width: var(--length-medium);
+    }
+    &[data-wenk-length="large"]:after, &.wenk-length--large:after {
+        white-space: normal;
+        width: var(--length-large);
+    }
+    &[data-wenk-length="fit"]:after, &.wenk-length--fit:after {
+        white-space: normal;
+        width: 100%;
+    }
+
+    &[data-wenk-align="right"]:after, &.wenk-align--right:after {
+        text-align: right;
+    }
+    &[data-wenk-align="center"]:after, &.wenk-align--center:after {
+        text-align: center;
+    }
+}
+
+[data-wenk=""]:after {
+    visibility: hidden !important;
+}