spuit 0.1.1 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e2f86481e69b6a9ec1ba2fa042ffa9dfc56035a88efee3050b1315a1e34d44d3
-  data.tar.gz: 1735e0ffd0986f9b608ad0bebe5055fb3bcb1e0398fde5e40cd302f3008e174c
+  metadata.gz: 7d5d0ae0eb74464233d67d5e50880957780f3c5152ca1ea22169d9584b657e6a
+  data.tar.gz: 4875ecdea8fa1c5397ecea9af959e0d5c2c26fdf01d2384ba934c223e59c2549
 SHA512:
-  metadata.gz: 163a5b6b550b119a70cf3e5c389d25413959189c42c4d6904222816b9d9c8fd996bda95df8a5f51312263222045f31e54779e6f8e5ad5e501da0b19d2e0beacd
-  data.tar.gz: 485c6d5ef19467d7e9157c3cc601f759129120b6e6437e533b6a4fa67966fa139f410a67816271b5f71699914158137e3f91ae31329dce5e76e23c35ffa53bff
+  metadata.gz: 0c276fb77296b3e8b03accca9acab129185c15cad883528043fcd7d2e51523243c4839788ef59f2ec10e522bcd85c88c450ef3a694f1918352c048e6b7fb05fa
+  data.tar.gz: 477eb76eb340839eb03136a776f671ccb31547c34e4f559f6e8cab8ee99c4306d22c069b30e0813354649b3dde692d703cfc2365cc385d109e8dedda920358ff

data/assets/html/index.ejs

@@ -66,6 +66,9 @@
             <i class="icon-twitter"></i>
             <i class="icon-facebook"></i>
             <i class="icon-hatena"></i>
+            <i class="icon-svg"></i>
+
+            <span class="triangle-container"></span>
           </section>
 
         </div>

data/assets/stylesheets/styles.scss

@@ -2,6 +2,7 @@
 @import '../../scss/includes/grid';
 @import '../../scss/components/wrap';
 @import '../../scss/components/wordwrap-fadeout';
+@import '../../scss/components/triangle';
 
 @import 'styles/config/variables';
 @import 'styles/config/mixins';
@@ -166,8 +167,25 @@ body {
   .icon-hatena {
     @include icon-hatena;
   }
+  
+  .icon-svg {
+    &::before {
+      content: '';
+      @include background-map-svg($map-svg-star);
+    }
+  }
 
   .wordwrap-fadeout {
     @include wordwrap-fadeout;
   }
+
+  .triangle-container {
+    @include triangle(#2dd, 10px, 15px, 0, 50%, "left", "after");
+    // @include triangle(#2dd, 15px, 10px, 50%, 0, "down", "after");
+
+    display: inline-block;
+    width: 30px;
+    height: 30px;
+    background-color: #ddd;
+  }
 }

data/lib/spuit/version.rb

@@ -1,3 +1,3 @@
 module Spuit
-  VERSION = "0.1.1"
+  VERSION = "0.1.2"
 end

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spuit",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "JS + Sass Mixin Library",
   "main": "spuit.scss",
   "repository": {

data/scss/components/_triangle.scss

@@ -1,46 +1,45 @@
 // Example:
-// +triangle(#222, 12px, $w/2, 0, 'left')
+// @include triangle(#2dd, 15px, 10px, 50%, 0, "down", "after");
 
-@mixin triangle($c: #2dd, $w: 20px, $l: 0, $t: 0, $direction: "right", $element: "after") {
+@mixin triangle($c: #2dd, $w: 15px, $h: 10px, $l: 50%, $t: 0, $direction: "down", $element: "after") {
   position: relative;
+
   &:#{$element} {
     content: "";
     position: absolute;
-    width: 0;
+    border-style: solid;
+    display: inline-block;
     height: 0;
-    border: $w solid transparent;
-    border-top-color: $c;
+    width: 0;
   }
-  @if ($direction == "left") {
+
+  @if $direction == "up" {
     &:#{$element} {
-      transform: translateX(-$w * 2) translateY(-$w) rotate(90deg);
-      left: $l;
-      right: auto;
-      top: $t;
+      border-color: transparent transparent $c;
+      border-width: 0 ($w / 2) $h;
+      left: calc(#{$l} - #{$w/2});
+      top: $t - $h;
     }
-  }
-  @if ($direction == "right") {
+  } @else if $direction == "right" {
     &:#{$element} {
-      transform: translateX($w * 2) translateY(-$w) rotate(-90deg);
-      left: auto;
-      right: $l;
-      top: $t;
+      border-color: transparent transparent transparent $c;
+      border-width: ($h / 2) 0 ($h / 2) $w;
+      right: $l - $w;
+      top: calc(#{$t} - #{$h/2});
     }
-  }
-  @if ($direction == "top") {
+  } @else if $direction == "down" {
     &:#{$element} {
-      transform: translateX(-$w) translateY(-$w * 2) rotate(180deg);
-      right: auto;
-      left: $l;
-      top: $t;
+      border-color: $c transparent transparent;
+      border-width: $h ($w / 2) 0;
+      left: calc(#{$l} - #{$w/2});
+      bottom: $t - $h;
     }
-  }
-  @if ($direction == "bottom") {
+  } @else if $direction == "left" {
     &:#{$element} {
-      transform: translateX(-$w) translateY($w * 2) rotate(0);
-      right: auto;
-      left: $l;
-      bottom: $t;
+      border-color: transparent $c transparent transparent;
+      border-width: ($h / 2) $w ($h / 2) 0;
+      left: $l - $w;
+      top: calc(#{$t} - #{$h/2});
     }
   }
 }

data/scss/modules/_background-image.scss

@@ -42,6 +42,16 @@
   line-height: $h;
 }
 
+@mixin background-map-svg($map-svg) {
+  display: inline-block;
+  background-image: url("data:image/png;base64, #{map-get($map-svg, base64)}");
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: cover;
+  width: map-get($map-svg, width);
+  height: map-get($map-svg, height);
+}
+
 //for rails
 @mixin background-image-url($w: 50px, $h: 50px, $path: '/images/xxx', $extension: 'png') {
   display: inline-block;

data/scss/variables/_svgs.scss

@@ -5,3 +5,8 @@ $svg-twitter:  '%3Csvg%20width%3D%2226px%22%20height%3D%2222px%22%20viewBox%3D%2
 $svg-hatena: '%0A%3Csvg%20width%3D%2222px%22%20height%3D%2220px%22%20viewBox%3D%229%2010%2022%2020%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M17.91544%2C25.36632%20C17.43128%2C25.66368%2016.59696%2C25.80976%2015.42632%2C25.80976%20L13.69448%2C25.80976%20L13.69448%2C21.83744%20L15.50112%2C21.83744%20C16.70336%2C21.83744%2017.53432%2C21.98864%2017.97632%2C22.29072%20C18.42552%2C22.59296%2018.64648%2C23.12664%2018.64648%2C23.89272%20C18.64648%2C24.57832%2018.40432%2C25.07072%2017.91544%2C25.36632%20Z%20M13.69448%2C14.93992%20L14.75864%2C14.93992%20C15.98848%2C14.93992%2016.81472%2C15.0788%2017.24112%2C15.35504%20C17.66192%2C15.63296%2017.8764%2C16.11224%2017.8764%2C16.79536%20C17.8764%2C17.45248%2017.64808%2C17.91544%2017.1964%2C18.18688%20C16.73904%2C18.45328%2015.9048%2C18.58816%2014.68384%2C18.58816%20L13.69448%2C18.58816%20L13.69448%2C14.93992%20Z%20M22.25328%2C20.64824%20C21.52864%2C19.8384%2020.52144%2C19.38336%2019.22888%2C19.28504%20C20.37848%2C18.9716%2021.21344%2C18.51336%2021.74152%2C17.90088%20C22.26712%2C17.29656%2022.52784%2C16.47616%2022.52784%2C15.44368%20C22.52784%2C14.6264%2022.3492%2C13.90328%2022.00304%2C13.27872%20C21.64816%2C12.658%2021.13792%2C12.16088%2020.46776%2C11.78896%20C19.8812%2C11.4664%2019.18432%2C11.23896%2018.37192%2C11.1048%20C17.55552%2C10.9748%2016.12656%2C10.90912%2014.07624%2C10.90912%20L9.09088%2C10.90912%20L9.09088%2C29.09088%20L14.22736%2C29.09088%20C16.29064%2C29.09088%2017.77888%2C29.01864%2018.68872%2C28.8804%20C19.59768%2C28.73752%2020.36048%2C28.49704%2020.97792%2C28.16736%20C21.74152%2C27.76432%2022.32392%2C27.19088%2022.73096%2C26.45408%20C23.1404%2C25.71488%2023.34344%2C24.86256%2023.34344%2C23.88776%20C23.34344%2C22.53944%2022.98024%2C21.45576%2022.25328%2C20.64824%20L22.25328%2C20.64824%20Z%22%20id%3D%22Fill-4%22%20stroke%3D%22none%22%20fill%3D%22%23FFFFFF%22%20fill-rule%3D%22evenodd%22%3E%3C/path%3E%0A%20%20%20%20%3Cpath%20d%3D%22M28.60648%2C24.48488%20C27.33392%2C24.48488%2026.30304%2C25.51504%2026.30304%2C26.78752%20C26.30304%2C28.06%2027.33392%2C29.09088%2028.60648%2C29.09088%20C29.87736%2C29.09088%2030.90912%2C28.06%2030.90912%2C26.78752%20C30.90912%2C25.51504%2029.87736%2C24.48488%2028.60648%2C24.48488%22%20id%3D%22Fill-5%22%20stroke%3D%22none%22%20fill%3D%22%23FFFFFF%22%20fill-rule%3D%22evenodd%22%3E%3C/path%3E%0A%20%20%20%20%3Cpolygon%20id%3D%22Fill-6%22%20stroke%3D%22none%22%20fill%3D%22%23FFFFFF%22%20fill-rule%3D%22evenodd%22%20points%3D%2226.60608%2023.0311998%2030.60608%2023.0311998%2030.60608%2010.9099998%2026.60608%2010.9099998%22%3E%3C/polygon%3E%0A%3C/svg%3E';
 
 $svg-facebook: '%0A%3Csvg%20width%3D%2218px%22%20height%3D%2234px%22%20viewBox%3D%2216%206%2018%2034%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M27.4852836%2C39.9843284%20L27.4852836%2C24.558209%20L32.6633433%2C24.558209%20L33.4385672%2C18.5462687%20L27.4852836%2C18.5462687%20L27.4852836%2C14.7079104%20C27.4852836%2C12.9673134%2027.9685672%2C11.781194%2030.4646866%2C11.781194%20L33.6482687%2C11.7797015%20L33.6482687%2C6.40268657%20C33.0975224%2C6.32955224%2031.2078209%2C6.1658209%2029.0093134%2C6.1658209%20C24.4193134%2C6.1658209%2021.2770746%2C8.96746269%2021.2770746%2C14.1126866%20L21.2770746%2C18.5462687%20L16.0858806%2C18.5462687%20L16.0858806%2C24.558209%20L21.2770746%2C24.558209%20L21.2770746%2C39.9843284%20L27.4852836%2C39.9843284%20Z%22%20id%3D%22Fill-4%22%20stroke%3D%22none%22%20fill%3D%22%23FEFEFE%22%20fill-rule%3D%22evenodd%22%3E%3C/path%3E%0A%3C/svg%3E';
+
+$map-svg-star: (
+  width: 30px,
+  height: 30px,
+  base64: 'iVBORw0KGgoAAAANSUhEUgAAAB4AAAAcCAYAAAB2+A+pAAAAAXNSR0IArs4c6QAAAm9JREFUSA21V01rFEEQfTUbg4iePAgLggFXjZt4EIyJn2CO/gFP3vwD/gA95G948uYf8KYn0agXEeNHEoggLHjwpATRNeWrTrozM9szsz2rDU1XV9V7r2u6Z3oXaNn0La5bbwnHVFsgcff2sMsTcKRB9R0us1p1nXYaejc7awOC4n7A5e3gbDakOaWYoe+xiCFeFLxTWJKzWC34GibpFQ9z1XryYdhv72kckyrm3l7ADl5FWTMsyBxeR2MRZ1rFWlNZXSwiPHbFuoYF/MHLCMe+q4OL0q94IvtZzioI6wCH8A0nIejx5J5iRi90xbESNj4VfGVgI3TBOrk2cBSb0sW2B8me2EMGFynY5VhYjE+ceBQyKwZkX+UibmduFYIVEk//N1Fb9W5B0xReMc1QHfewzxP7hAnjPdLUR2BbkGGZZ2DNoEHYJvoRp/ELT2l2bf4P24DP84acwSfPWXidXEBwjcv54hMmHo2LnHlR4yxU7EX0A07gt6t8xvtajls4wEpn8bmML1Tsgy5ReNcKNr0veTQsOWKixhWt2Ivw2lui/dzPE8dLcq50meQIohWHuOB4sFONBmyT8FyqXsgX1GLrhbUeHERiRgO2Sbgf4xzLp/wg1bTKw6VbOIjv+EFsJ4oXPHN+xZVoHLzLjuCwzOBnLF5d8TZmCRgVFbyh/6bM46p1s/lumK/cOryLjCPaqoV3RvZ3nQK36D3P1+SxZ3M2fS4GXoH5NsoRotXC/nDYJy/DHcyjzwofiV1vpWY+i1mOy/WfXM9RyrdptTB4S2W4y53u8bfUA5IPI/iCy3Is1zAOaxypTXWifxlOro7jL4uUj5CGbnNHAAAAAElFTkSuQmCC');

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: spuit
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.1.2
 platform: ruby
 authors:
 - is8r
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-07-27 00:00:00.000000000 Z
+date: 2019-08-20 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: aruba