Version 1.0.0-beta1

XmlmXmlmX · Jan 19, 2018 · 2a122ce · 2a122ce
1 parent be80da0
commit 2a122ce
Show file tree

Hide file tree

Showing 8 changed files with 205 additions and 192 deletions.
diff --git a/.gitignore b/.gitignore
@@ -286,3 +286,7 @@ __pycache__/
 *.btm.cs
 *.odx.cs
 *.xsd.cs
+
+
+*.css
+*.map
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,5 @@
+.npmignore
+.gitignore
+node_modules/
+test/
+build.js
diff --git a/build.js b/build.js
@@ -1,6 +1,12 @@
-var postscss = require('postscss');
+const postscss = require('postscss');
 
-postscss([postcss plugins]).process({
-  from: 'src/main.scss',
-  to: 'dist/simple-tooltips.css'
-});
+postscss([
+    require('autoprefixer')({ browsers: 'last 2 versions' }),
+    require('cssnano')()
+]).processMany([{
+    from: 'src/main.scss',
+    to: 'dist/simple-tooltips.css'
+}, {
+    from: 'test/preview.scss',
+    to: 'test/preview.css'
+}]);
diff --git a/package.json b/package.json
@@ -1,19 +1,25 @@
 {
-  "name": "simple-tooltips",
-  "description": "Create pure CSS tooltips without a single line of JavaScript code!",
-  "version": "1.0.0",
-  "scripts": {
-    "build": "node build.js",
-    "prepublishOnly": "npm run build"
-  },
-  "author":
-  {
-    "name" : "Sebastian Hösl",
-    "email" : "sebastian.codes@gmail.com"
-  },
-  "license": "MIT",
-  "devDependencies": {
-    "postscss": "^1.6.0",
-    "autoprefixer": "^7.2.5"
-  }
-}
+    "name": "simple-tooltips",
+    "description": "Create pure CSS tooltips without a single line of JavaScript code!",
+    "version": "1.0.0-beta1",
+    "scripts": {
+        "start": "npm run serve",
+        "build": "node build.js",
+        "prepublishOnly": "npm run build",
+        "serve": "serve | start http://localhost:5000/test/index.html"
+    },
+    "author": {
+        "name": "Sebastian Hösl",
+        "email": "sebastian.codes@gmail.com"
+    },
+    "license": "MIT",
+    "devDependencies": {
+        "postscss": "^1.6.0",
+        "autoprefixer": "^7.2.5",
+        "cssnano": "^3.10.0",
+        "serve": "^6.4.8"
+    },
+    "keywords": [
+        "tooltip", "css"
+    ]
+}
diff --git a/src/_keyframes.scss b/src/_keyframes.scss
@@ -0,0 +1,8 @@
+@keyframes #{$simple-tooltip-prefix}-fade {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
diff --git a/src/_settings.scss b/src/_settings.scss
@@ -0,0 +1,10 @@
+$simple-tooltip-prefix: stt !default;
+$simple-tooltip-color: #ecf0f1 !default;
+$simple-tooltip-bg-color: #34495e !default;
+$simple-tooltip-zindex: 999 !default;
+$simple-tooltip-size: 14rem !default;
+$simple-tooltip-border-radius: .25rem !default;
+$simple-tooltip-fade-delay: 500ms !default;
+$simple-tooltip-angle-size: .5rem !default;
+$simple-tooltip-box-shadow: 0 0 2rem .25rem lighten($simple-tooltip-bg-color, 50%);
+$simple-tooltip-font-size: .8em;
diff --git a/src/main.scss b/src/main.scss
@@ -1,184 +1,121 @@
-// ### Variables ###
-$simple-tooltip-prefix: stt;
-$simple-tooltip-color: #ecf0f1;
-$simple-tooltip-bg-color: #34495e;
-$simple-tooltip-zindex: 999;
-$simple-tooltip-size: 14rem;
-$simple-tooltip-border-radius: .25rem;
-$simple-tooltip-fade-delay: 500ms;
-$simple-tooltip-angle-size: .5rem;
-
-// ### Keyframes ###
-@keyframes #{$simple-tooltip-prefix}-fade {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
+@import "settings";
+@import "keyframes";
 [data-#{$simple-tooltip-prefix}-text] {
-  position: relative;
-  box-sizing: border-box;
-
-  &::after, &::before {
-    display: none;
-    position: absolute;
-    top: calc(100% + .5rem);
-    left: 50%;
+    position: relative;
     box-sizing: border-box;
-  }
-
-  &::after {
-    float: left;
-    content: attr(data-#{$simple-tooltip-prefix}-text);
-    position: absolute;
-    padding: 1em;
-    height: auto;
-    background-color: $simple-tooltip-bg-color;
-    color: $simple-tooltip-color;
-    box-shadow: 0 0 2rem .25rem lighten($simple-tooltip-bg-color, 50%);
-    z-index: $simple-tooltip-zindex - 1;
-    font-size: .8em;
-    width: $simple-tooltip-size;
-    margin: 0 0 0 calc(#{$simple-tooltip-size} / -2);
-    border-radius: $simple-tooltip-border-radius;
-  }
-
-  &::before {
-    content: '';
-    border: solid $simple-tooltip-angle-size;
-    border-color: transparent transparent $simple-tooltip-bg-color transparent;
-    height: 0;
-    width: 0;
-    margin: -($simple-tooltip-angle-size * 2) 0 0 -#{$simple-tooltip-angle-size};
-    z-index: $simple-tooltip-zindex;
-  }
-
-  &:hover, &:focus, &:active {
-    &::after, &::before {
-      display: block;
+    &::after,
+    &::before {
+        display: none;
+        position: absolute;
+        top: calc(100% + .5rem);
+        left: 50%;
+        box-sizing: border-box;
+    }
+    &::after {
+        float: left;
+        content: attr(data-#{$simple-tooltip-prefix}-text);
+        position: absolute;
+        padding: 1em;
+        height: auto;
+        background-color: $simple-tooltip-bg-color;
+        color: $simple-tooltip-color;
+        box-shadow: $simple-tooltip-box-shadow;
+        z-index: $simple-tooltip-zindex - 1;
+        font-size: $simple-tooltip-font-size;
+        width: $simple-tooltip-size;
+        margin: 0 0 0 calc(#{$simple-tooltip-size} / -2);
+        border-radius: $simple-tooltip-border-radius;
+    }
+    &::before {
+        content: '';
+        border: solid $simple-tooltip-angle-size;
+        border-color: transparent transparent $simple-tooltip-bg-color transparent;
+        height: 0;
+        width: 0;
+        margin: -($simple-tooltip-angle-size * 2) 0 0 -#{$simple-tooltip-angle-size};
+        z-index: $simple-tooltip-zindex;
+    }
+    &:hover,
+    &:focus,
+    &:active {
+        &::after,
+        &::before {
+            display: block;
+        }
     }
-  }
 }
 
 [data-#{$simple-tooltip-prefix}-fade] {
-  &::before, &::after {
-    opacity: 0;
-    animation: #{$simple-tooltip-prefix}-fade $simple-tooltip-fade-delay ease-in-out;
-  }
-
-  &:hover, &:focus, &:active {
-    &::before, &::after {
-      opacity: 1;
+    &::before,
+    &::after {
+        opacity: 0;
+        animation: #{$simple-tooltip-prefix}-fade $simple-tooltip-fade-delay ease-in-out;
+    }
+    &:hover,
+    &:focus,
+    &:active {
+        &::before,
+        &::after {
+            opacity: 1;
+        }
     }
-  }
 }
 
 [data-#{$simple-tooltip-prefix}-position=top] {
-  &::after, &::before {
-    left: 50%;
-  }
-
-  &::after {
-    top: -100%;
-    height: auto;
-    width: $simple-tooltip-size;
-    margin: 0 0 0 calc(#{$simple-tooltip-size} / -2);
-  }
-
-  &::before {
-    top: 0;
-    border-color: $simple-tooltip-bg-color transparent transparent transparent;
-    height: 0;
-    width: 0;
-    margin: -($simple-tooltip-angle-size + .1) 0 0 -($simple-tooltip-angle-size);
-  }
+    &::after,
+    &::before {
+        left: 50%;
+    }
+    &::after {
+        top: -100%;
+        height: auto;
+        width: $simple-tooltip-size;
+        margin: 0 0 0 calc(#{$simple-tooltip-size} / -2);
+    }
+    &::before {
+        top: 0;
+        border-color: $simple-tooltip-bg-color transparent transparent transparent;
+        height: 0;
+        width: 0;
+        margin: -($simple-tooltip-angle-size + .1) 0 0 -($simple-tooltip-angle-size);
+    }
 }
 
-[data-#{$simple-tooltip-prefix}-position=right] {  
-  &::after, &::before {
-    top: .25rem;
-    left: 100%;
-    right: auto;
-  }
-
-  &::after {
-    margin: 0 0 0 .5rem;
-    height: auto;
-    line-height: 1rem;
-  }
-
-  &::before {
-    border-color: transparent $simple-tooltip-bg-color transparent transparent;
-    top: calc(50% - #{$simple-tooltip-angle-size});
-    margin: 0 0 0 (-$simple-tooltip-angle-size);
-  }
+[data-#{$simple-tooltip-prefix}-position=right] {
+    &::after,
+    &::before {
+        top: .25rem;
+        left: 100%;
+        right: auto;
+    }
+    &::after {
+        margin: 0 0 0 .5rem;
+        height: auto;
+        line-height: 1rem;
+    }
+    &::before {
+        border-color: transparent $simple-tooltip-bg-color transparent transparent;
+        top: calc(50% - #{$simple-tooltip-angle-size});
+        margin: 0 0 0 (-$simple-tooltip-angle-size);
+    }
 }
 
 [data-#{$simple-tooltip-prefix}-position=left] {
-  &::after, &::before {
-    top: .25rem;
-    right: 100%;
-    left: auto;
-  }
-
-  &::after {
-    margin: 0 $simple-tooltip-angle-size 0 0;
-    height: auto;
-    line-height: 1rem;
-  }
-
-  &::before {
-    border-color: transparent transparent transparent $simple-tooltip-bg-color;
-    top: calc(50% - #{$simple-tooltip-angle-size});
-    margin: 0;
-    left: -($simple-tooltip-angle-size);
-  }
-}
-
-.buttons {
-  padding: 2rem;
-}
-
-button {
-  color: white;
-  padding: 1em;
-  border: 0;
-  margin: .5rem;
-  border-radius: .125em;
-  outline: none;
-
-  &.btn-type-a, & {
-    background-color: #3498db;
-  }
-
-  &.btn-type-b {
-    background-color: #1abc9c;
-  }
-
-  &.btn-type-c {
-    background-color: #f39c12;
-  }
-
-  &.btn-type-d {
-    background-color: #9b59b6;
-  }
-
-  &.btn-type-e {
-    background-color: #e74c3c;
-  }
-
-  &.btn-type-f {
-    background-color: #95a5a6;
-  }
-
-  &.btn-type-g {
-    background-color: #2ecc71;
-  }
-
-  &.btn-type-h {
-    background-color: #f1c40f;
-  }
-}
+    &::after,
+    &::before {
+        top: .25rem;
+        right: 100%;
+        left: auto;
+    }
+    &::after {
+        margin: 0 $simple-tooltip-angle-size 0 0;
+        height: auto;
+        line-height: 1rem;
+    }
+    &::before {
+        border-color: transparent transparent transparent $simple-tooltip-bg-color;
+        top: calc(50% - #{$simple-tooltip-angle-size});
+        margin: 0;
+        left: -($simple-tooltip-angle-size);
+    }
+}