real-world-css-libraries 1.0.2 → 1.0.3

package/libs/colofilter-v0.0.0.css

@@ -0,0 +1,232 @@
+/* https://github.com/LukyVj/colofilter.css/blob/master/styles/colofilter.css */
+[class^="blend"] img {
+  mix-blend-mode: luminosity;
+}
+[class^="blend"]:before {
+  position: absolute;
+  z-index: 3;
+  background: rgba(0, 0, 0, 0.4);
+  color: #fff;
+  padding: 0.2em;
+  font-size: 14px;
+}
+[class^="blend"]:after {
+  display: block;
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  -webkit-filter: contrast(1.3);
+  filter: contrast(1.3);
+  mix-blend-mode: hue;
+}
+[class^="blend"][class*="-dark"] img {
+  mix-blend-mode: darken;
+}
+[class^="blend"][class*="-dark"]:after {
+  mix-blend-mode: lighten !important;
+}
+[class^="blend"][class*="-light"] img {
+  mix-blend-mode: lighten;
+}
+[class^="blend"][class*="-light"]:after {
+  mix-blend-mode: darken !important;
+}
+[class^="blend"][class*="-red"] {
+  background: #E50914;
+}
+[class^="blend"][class*="-red"]:after {
+  mix-blend-mode: hard-light;
+  -webkit-filter: contrast(0.6) saturate(120%) brightness(1.2);
+  filter: contrast(0.6) saturate(120%) brightness(1.2);
+}
+[class^="blend"][class*="-red"][class*="-dark"]:after {
+  mix-blend-mode: lighten !important;
+  -webkit-filter: contrast(1.1) !important;
+  filter: contrast(1.1) !important;
+}
+[class^="blend"][class*="-red"][class*="-light"]:after {
+  mix-blend-mode: color-dodge !important;
+  -webkit-filter: saturate(400%) contrast(1.5);
+  filter: saturate(400%) contrast(1.5);
+}
+[class^="blend"][class*="-red"]:after {
+  background: #E50914;
+}
+[class^="blend"][class*="-red"]:after {
+  background: #282581;
+}
+[class^="blend"][class*="-orange"] {
+  background: #FCA300;
+}
+[class^="blend"][class*="-orange"][class*="-dark"]:after {
+  mix-blend-mode: darken !important;
+}
+[class^="blend"][class*="-orange"][class*="-light"]:after {
+  mix-blend-mode: hue !important;
+  -webkit-filter: saturate(400%) contrast(1.5);
+  filter: saturate(400%) contrast(1.5);
+}
+[class^="blend"][class*="-orange"]:after {
+  background: #FCA300;
+}
+[class^="blend"][class*="-blue"] {
+  background: #0066BF;
+}
+[class^="blend"][class*="-blue"]:not([class*="-dark"]):not([class*="-light"]):after {
+  mix-blend-mode: hard-light;
+  -webkit-filter: brightness(0.6);
+  filter: brightness(0.6);
+}
+[class^="blend"][class*="-blue"][class*="-dark"]:after {
+  mix-blend-mode: darken !important;
+}
+[class^="blend"][class*="-blue"]:after {
+  background: #0066BF;
+}
+[class^="blend"][class*="-blue"]:after {
+  background: #93EF90;
+}
+[class^="blend"][class*="-yellow"] {
+  background: #FEDD31;
+}
+[class^="blend"][class*="-yellow"]:not([class*="-dark"]):not([class*="-light"]):after {
+  -webkit-filter: brightness(3.5);
+  filter: brightness(3.5);
+  mix-blend-mode: soft-light;
+}
+[class^="blend"][class*="-yellow"][class*="-dark"]:after {
+  mix-blend-mode: color-dodge !important;
+  -webkit-filter: hue-rotate(70deg);
+  filter: hue-rotate(70deg);
+}
+[class^="blend"][class*="-yellow"][class*="-light"] {
+  background: #000000;
+}
+[class^="blend"][class*="-yellow"][class*="-light"]:after {
+  mix-blend-mode: color !important;
+  -webkit-filter: brightness(3) hue-rotate(93deg) contrast(2) saturate(150);
+  filter: brightness(3) hue-rotate(93deg) contrast(2) saturate(150);
+}
+[class^="blend"][class*="-yellow"]:after {
+  background: #FEDD31;
+}
+[class^="blend"][class*="-yellow"]:after {
+  background: #EF3CB4;
+}
+[class^="blend"][class*="-purple"] {
+  background: #BC6D14;
+}
+[class^="blend"][class*="-purple"]:not([class*="-dark"]):not([class*="-light"]) {
+  background: rebeccapurple;
+}
+[class^="blend"][class*="-purple"]:not([class*="-dark"]):not([class*="-light"]):after {
+  mix-blend-mode: darken !important;
+}
+[class^="blend"][class*="-purple"][class*="-dark"] {
+  background: #B10AFF;
+}
+[class^="blend"][class*="-purple"][class*="-dark"]:after {
+  mix-blend-mode: soft-light !important;
+  -webkit-filter: saturate(100);
+  filter: saturate(100);
+}
+[class^="blend"][class*="-purple"][class*="-light"]:after {
+  background: #A37FC7;
+  -webkit-filter: saturate(520%) brightness(10.5) contrast(350) !important;
+  filter: saturate(520%) brightness(10.5) contrast(350) !important;
+}
+[class^="blend"][class*="-purple"]:after {
+  background: #BC6D14;
+}
+[class^="blend"][class*="-purple"]:after {
+  background: #ACFCEE;
+}
+[class^="blend"][class*="-green"] {
+  background: #11C966;
+}
+[class^="blend"][class*="-green"]:not([class*="-dark"]):not([class*="-light"]):after {
+  mix-blend-mode: soft-light;
+}
+[class^="blend"][class*="-green"][class*="-light"]:after {
+  mix-blend-mode: color-dodge !important;
+  -webkit-filter: saturate(100%) brightness(0.8) contrast(160%);
+  filter: saturate(100%) brightness(0.8) contrast(160%);
+}
+[class^="blend"][class*="-green"]:after {
+  background: #11C966;
+}
+[class^="blend"][class*="-green"]:after {
+  background: #2D3181;
+}
+[class^="blend"][class*="-pink"] {
+  background: #EA4C89;
+}
+[class^="blend"][class*="-pink"][class*="-dark"]:after {
+  background: #1D0E14;
+}
+[class^="blend"][class*="-pink"][class*="-light"]:after {
+  background: #FF468D;
+  mix-blend-mode: lighten !important;
+  -webkit-filter: contrast(1) saturate(250%) !important;
+  filter: contrast(1) saturate(250%) !important;
+}
+[class^="blend"][class*="-pink"]:after {
+  background: #EA4C89;
+}
+[class^="blend"][class*="-pink"]:after {
+  background: #EA4C89;
+}
+[class^="blend"][class*="-blue-yellow"]:not([class*="-dark"]):not([class*="-light"]) {
+  background: linear-gradient(to top left, #55ACEE, #FEDD31);
+}
+[class^="blend"][class*="-blue-yellow"][class*="-dark"]:after {
+  mix-blend-mode: hard-light !important;
+}
+[class^="blend"][class*="-blue-yellow"][class*="-light"]:after {
+  mix-blend-mode: hard-light !important;
+  -webkit-filter: none;
+  filter: none;
+}
+[class^="blend"][class*="-blue-yellow"]:after {
+  background: linear-gradient(to top left, #55ACEE, #FEDD31) !important;
+}
+[class^="blend"][class*="-pink-yellow"]:not([class*="-dark"]):not([class*="-light"]) {
+  background: linear-gradient(to bottom right, #FAA6FB, #FBBC05) !important;
+}
+[class^="blend"][class*="-pink-yellow"][class*="-dark"]:after {
+  mix-blend-mode: hue !important;
+  -webkit-filter: none !important;
+  filter: none !important;
+}
+[class^="blend"][class*="-pink-yellow"][class*="-light"]:after {
+  mix-blend-mode: hard-light !important;
+  -webkit-filter: none !important;
+  filter: none !important;
+}
+[class^="blend"][class*="-pink-yellow"]:after {
+  background: linear-gradient(to top left, #FAA6FB, #FBBC05) !important;
+}
+[class^="blend"][class*="-red-blue"]:not([class*="-dark"]):not([class*="-light"]) {
+  background: linear-gradient(to bottom right, #3993E2, #E2544B);
+}
+[class^="blend"][class*="-red-blue"]:not([class*="-dark"]):not([class*="-light"]):after {
+  -webkit-filter: none;
+  filter: none;
+  mix-blend-mode: hard-light;
+}
+[class^="blend"][class*="-red-blue"][class*="-dark"]:after {
+  mix-blend-mode: hard-light !important;
+  -webkit-filter: none !important;
+  filter: none !important;
+}
+[class^="blend"][class*="-red-blue"][class*="-light"]:after {
+  mix-blend-mode: screen !important;
+  -webkit-filter: saturate(300%) brightness(1.2) !important;
+  filter: saturate(300%) brightness(1.2) !important;
+}
+[class^="blend"][class*="-red-blue"]:after {
+  background: linear-gradient(to bottom right, #3993E2, #E2544B);
+}

package/libs/fileicon-v0.1.1.css

@@ -0,0 +1,140 @@
+/* https://github.com/picturepan2/fileicon.css/blob/master/fileicon.css */
+@charset "utf-8";
+/*! fileicon.css v0.1.1 | MIT License | github.com/picturepan2/fileicon.css */
+/* fileicon.basic */
+.file-icon {
+  font-family: Arial, Tahoma, sans-serif;
+  font-weight: 300;
+  display: inline-block;
+  width: 24px;
+  height: 32px;
+  background: #018fef;
+  position: relative;
+  border-radius: 2px;
+  text-align: left;
+  -webkit-font-smoothing: antialiased;
+}
+.file-icon::before {
+  display: block;
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 0;
+  height: 0;
+  border-bottom-left-radius: 2px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: #fff #fff rgba(255,255,255,.35) rgba(255,255,255,.35);
+}
+.file-icon::after {
+  display: block;
+  content: attr(data-type);
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  font-size: 10px;
+  color: #fff;
+  text-transform: lowercase;
+  width: 100%;
+  padding: 2px;
+  white-space: nowrap;
+  overflow: hidden;
+}
+/* fileicons */
+.file-icon-xs {
+  width: 12px;
+  height: 16px;
+  border-radius: 2px;
+}
+.file-icon-xs::before {
+  border-bottom-left-radius: 1px;
+  border-width: 3px;
+}
+.file-icon-xs::after {
+  content: "";
+  border-bottom: 2px solid rgba(255,255,255,.45);
+  width: auto;
+  left: 2px;
+  right: 2px;
+  bottom: 3px;
+}
+.file-icon-sm {
+  width: 18px;
+  height: 24px;
+  border-radius: 2px;
+}
+.file-icon-sm::before {
+  border-bottom-left-radius: 2px;
+  border-width: 4px;
+}
+.file-icon-sm::after {
+  font-size: 7px;
+  padding: 2px;
+}
+.file-icon-lg {
+  width: 48px;
+  height: 64px;
+  border-radius: 3px;
+}
+.file-icon-lg::before {
+  border-bottom-left-radius: 2px;
+  border-width: 8px;
+}
+.file-icon-lg::after {
+  font-size: 16px;
+  padding: 4px 6px;
+}
+.file-icon-xl {
+  width: 96px;
+  height: 128px;
+  border-radius: 4px;
+}
+.file-icon-xl::before {
+  border-bottom-left-radius: 4px;
+  border-width: 16px;
+}
+.file-icon-xl::after {
+  font-size: 24px;
+  padding: 4px 10px;
+}
+/* fileicon.types */
+.file-icon[data-type=zip],
+.file-icon[data-type=rar] {
+  background: #acacac;
+}
+.file-icon[data-type^=doc] {
+  background: #307cf1;
+}
+.file-icon[data-type^=xls] {
+  background: #0f9d58;
+}
+.file-icon[data-type^=ppt] {
+  background: #d24726;
+}
+.file-icon[data-type=pdf] {
+  background: #e13d34;
+}
+.file-icon[data-type=txt] {
+  background: #5eb533;
+}
+.file-icon[data-type=mp3],
+.file-icon[data-type=wma],
+.file-icon[data-type=m4a],
+.file-icon[data-type=flac] {
+  background: #8e44ad;
+}
+.file-icon[data-type=mp4],
+.file-icon[data-type=wmv],
+.file-icon[data-type=mov],
+.file-icon[data-type=avi],
+.file-icon[data-type=mkv] {
+  background: #7a3ce7;
+}
+.file-icon[data-type=bmp],
+.file-icon[data-type=jpg],
+.file-icon[data-type=jpeg],
+.file-icon[data-type=gif],
+.file-icon[data-type=png] {
+  background: #f4b400;
+}

package/libs/gridism-v0.2.2.css

@@ -0,0 +1,133 @@
+/* https://github.com/cobyism/gridism/blob/master/gridism.css */
+/*
+ * Gridism
+ * A simple, responsive, and handy CSS grid by @cobyism
+ * https://github.com/cobyism/gridism
+ */
+
+/* Preserve some sanity */
+.grid,
+.unit {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+/* Set up some rules to govern the grid */
+.grid {
+  display: block;
+  clear: both;
+}
+.grid .unit {
+  float: left;
+  width: 100%;
+  padding: 10px;
+}
+
+/* This ensures the outer gutters are equal to the (doubled) inner gutters. */
+.grid .unit:first-child { padding-left: 20px; }
+.grid .unit:last-child { padding-right: 20px; }
+
+/* Nested grids already have padding though, so let's nuke it */
+.unit .unit:first-child { padding-left: 0; }
+.unit .unit:last-child { padding-right: 0; }
+.unit .grid:first-child > .unit { padding-top: 0; }
+.unit .grid:last-child > .unit { padding-bottom: 0; }
+
+/* Let people nuke the gutters/padding completely in a couple of ways */
+.no-gutters .unit,
+.unit.no-gutters {
+  padding: 0 !important;
+}
+
+/* Wrapping at a maximum width is optional */
+.wrap .grid,
+.grid.wrap {
+  max-width: 978px;
+  margin: 0 auto;
+}
+
+/* Width classes also have shorthand versions numbered as fractions
+ * For example: for a grid unit 1/3 (one third) of the parent width,
+ * simply apply class="w-1-3" to the element. */
+.grid .whole,          .grid .w-1-1 { width: 100%; }
+.grid .half,           .grid .w-1-2 { width: 50%; }
+.grid .one-third,      .grid .w-1-3 { width: 33.3332%; }
+.grid .two-thirds,     .grid .w-2-3 { width: 66.6665%; }
+.grid .one-quarter,
+.grid .one-fourth,     .grid .w-1-4 { width: 25%; }
+.grid .three-quarters,
+.grid .three-fourths,  .grid .w-3-4 { width: 75%; }
+.grid .one-fifth,      .grid .w-1-5 { width: 20%; }
+.grid .two-fifths,     .grid .w-2-5 { width: 40%; }
+.grid .three-fifths,   .grid .w-3-5 { width: 60%; }
+.grid .four-fifths,    .grid .w-4-5 { width: 80%; }
+.grid .golden-small,   .grid .w-g-s { width: 38.2716%; } /* Golden section: smaller piece */
+.grid .golden-large,   .grid .w-g-l { width: 61.7283%; } /* Golden section: larger piece */
+
+/* Clearfix after every .grid */
+.grid {
+  *zoom: 1;
+}
+.grid:before, .grid:after {
+  display: table;
+  content: "";
+  line-height: 0;
+}
+.grid:after {
+  clear: both;
+}
+
+/* Utility classes */
+.align-center { text-align: center; }
+.align-left   { text-align: left; }
+.align-right  { text-align: right; }
+.pull-left    { float: left; }
+.pull-right   { float: right; }
+
+/* A property for a better rendering of images in units: in
+   this way bigger pictures are just resized if the unit
+   becomes smaller */
+.unit img {
+  max-width: 100%;
+}
+
+/* Hide elements using this class by default */
+.only-on-mobiles {
+  display: none !important;
+}
+
+/* Responsive Stuff */
+@media screen and (max-width: 568px) {
+  /* Stack anything that isn't full-width on smaller screens 
+     and doesn't provide the no-stacking-on-mobiles class */
+  .grid:not(.no-stacking-on-mobiles) > .unit {
+    width: 100% !important;
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+  .unit .grid .unit {
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+
+  /* Sometimes, you just want to be different on small screens */
+  .center-on-mobiles {
+    text-align: center !important;
+  }
+  .hide-on-mobiles {
+    display: none !important;
+  }
+  .only-on-mobiles {
+    display: block !important;
+  }
+}
+
+/* Expand the wrap a bit further on larger screens */
+@media screen and (min-width: 1180px) {
+  .wider .grid,
+  .grid.wider {
+    max-width: 1180px;
+    margin: 0 auto;
+  }
+}