@flourish/controls - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

controls.js

@@ -27,3 +27,3 @@ (function (global, factory) {
 
-__$styleInject("@charset \"UTF-8\";\n.btn {\n    display: inline-block;\n    cursor: pointer;\n}\n.btn:hover {\n    opacity: 0.5;\n}\n.btn.selected,\n.btn.selected:hover {\n    color: white;\n    cursor: default;\n    opacity: 1;\n    background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1));\n}\n.btn-group {\n    background: white;\n    border-radius: 3px;\n    display: table;\n    border: 1px solid rgba(0, 0, 0, 0.5);\n    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);\n    pointer-events: all;\n    width: 100%;\n    table-layout: fixed;\n}\n.btn-group .btn {\n    font-size: 0.9em;\n    border-left: 1px solid rgba(0, 0, 0, 0.5);\n    padding: 2px 8px;\n    height: 100%;\n    color: black;\n    font-weight: 400;\n    display: table-cell;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    text-align: center\n}\n.btn-group .btn:hover {\n    background: rgb(15, 163, 217);\n    opacity: 0.8;\n    background-color: #dedede;\n}\n.btn-group .btn:first-child {\n    border: none;\n}\n.btn-group .btn.selected,\n.btn-group .btn.selected:hover {\n    opacity: 1;\n    background: #888;\n    color: white;\n}\n.dropdown {\n    pointer-events: all;\n    display: inline-table;\n    color: black;\n    font-weight: 400;\n    font-size: 16px;\n    position: relative;\n}\n.dropdown .heading {\n    margin-bottom: 0.4em;\n    font-weight: 300;\n}\n.dropdown .main {\n    background: white;\n    padding: 4px 40px 4px 8px;\n    cursor: pointer;\n    position: relative;\n    border: 1px solid black;\n}\n.dropdown .current {\n    height: 100%;\n    flex: 1 1 auto;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    width: 100%;\n    display: inline-block\n}\n.dropdown .symbol {\n    width: 30px;\n    height: 100%;\n    position: absolute;\n    right: 0px;\n    top: 0px;\n    border: 1px solid black;\n    background: black;\n    background-image: url(./chevron.svg);\n    background-repeat: no-repeat;\n    background-size: 80%;\n    background-position: 50% 40%;\n    display: inline-block;\n}\n.dropdown .list {\n    position: absolute;\n    top: 100%;\n    left: -1px;\n    min-width: calc(100% + 2px);\n    background: rgba(255, 255, 255, 1);\n    padding: 0.2em 0.4em;\n    text-align: left;\n    display: none;\n    border: 1px solid black;\n    line-height: 1.4em;\n    max-height: 160px;\n    overflow-y: scroll;\n    color: black;\n}\n.dropdown .list .list-item {\n    white-space: nowrap;\n}\n.dropdown .list .list-item:hover {\n    opacity: 0.5;\n    cursor: pointer;\n}\n.dropdown.open .list {\n    display: block;\n    z-index: 1;\n}\n.dropdown .list .list-item.selected,\n.dropdown .list .list-item.selected:hover {\n    color: rgb(87, 193, 252);\n    cursor: default;\n    opacity: 1;\n}\n.dropdown .list .list-item.header,\n.dropdown .list .list-item.header:hover {\n    font-size: 0.66em;\n    letter-spacing: 1px;\n    font-weight: bold;\n    text-transform: uppercase;\n    color: #888;\n    opacity: 1;\n    cursor: default;\n    font-weight: 300;\n    margin-top: 0.5em;\n}\n.dropdown .list .list-item.header:first-child {\n    margin-top: 0;\n}\n.filter-menu .dropdown {\n    margin: 0 0 1.5em;\n}\n.filter-menu .dropdown .heading {\n    color: white;\n}\n.slider-holder {\n    margin-bottom: 25px;\n}\n.slider-play {\n    width: 2em;\n    height: 2em;\n    background-image: url(./play.svg);\n    background-repeat: no-repeat;\n    background-size: 100% 100%;\n    pointer-events: all;\n    vertical-align: bottom;\n    cursor: pointer;\n\t\tdisplay: none;\n}\n.slider-holder.playing .slider-play {\n    background-image: url(./pause.svg);\n}\n.slider-play:hover {\n    opacity: 0.7;\n}\n.slider {\n    height: 64px;\n    width: 100%;\n    bottom: 0px;\n    pointer-events: all;\n    display: inline-block;\n    vertical-align: bottom;\n}\n.slider-holder.animatable .slider-play{\n\tdisplay: inline-block;\n}\n.slider-holder.animatable .slider {\n\twidth: calc(100% - 37px);\n}\n.slider-holder.playing .slider {\n\tpointer-events: none;\n}\n.slider circle {\n    fill: rgb(87, 193, 252);\n}\n.slider .tick line {\n    stroke: white;\n}\n.slider text {\n    fill: white;\n}\n.slider .slider-label {\n    font-size: 17px;\n}\n.slider .slider-end-labels {\n    font-size: 14px;\n}\n.nav-buttons {\n    margin-bottom: 20px;\n}",undefined);
+__$styleInject(".btn {\n    display: inline-block;\n    cursor: pointer;\n}\n.btn:hover {\n    opacity: 0.5;\n}\n.btn.selected,\n.btn.selected:hover {\n    color: white;\n    cursor: default;\n    opacity: 1;\n    background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1));\n}\n.btn-group {\n    background: white;\n    border-radius: 3px;\n    display: table;\n    border: 1px solid rgba(0, 0, 0, 0.5);\n    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);\n    pointer-events: all;\n    width: 100%;\n    table-layout: fixed;\n}\n.btn-group .btn {\n    font-size: 0.9em;\n    border-left: 1px solid rgba(0, 0, 0, 0.5);\n    padding: 2px 8px;\n    height: 100%;\n    color: black;\n    font-weight: 400;\n    display: table-cell;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    text-align: center\n}\n.btn-group .btn:hover {\n    background: rgb(15, 163, 217);\n    opacity: 0.8;\n    background-color: #dedede;\n}\n.btn-group .btn:first-child {\n    border: none;\n}\n.btn-group .btn.selected,\n.btn-group .btn.selected:hover {\n    opacity: 1;\n    background: #888;\n    color: white;\n}\n.dropdown {\n    pointer-events: all;\n    display: inline-table;\n    color: black;\n    font-weight: 400;\n    font-size: 16px;\n    position: relative;\n}\n.dropdown .heading {\n    margin-bottom: 0.4em;\n    font-weight: 300;\n}\n.dropdown .main {\n    background: white;\n    padding: 4px 40px 4px 8px;\n    cursor: pointer;\n    position: relative;\n    border: 1px solid black;\n}\n.dropdown .current {\n    height: 100%;\n    flex: 1 1 auto;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    width: 100%;\n    display: inline-block\n}\n.dropdown .symbol {\n    width: 30px;\n    height: 100%;\n    position: absolute;\n    right: 0px;\n    top: 0px;\n    border: 1px solid black;\n    background: black;\n    background-image: url(./chevron.svg);\n    background-repeat: no-repeat;\n    background-size: 80%;\n    background-position: 50% 40%;\n    display: inline-block;\n}\n.dropdown .list {\n    position: absolute;\n    top: 100%;\n    left: -1px;\n    min-width: calc(100% + 2px);\n    background: rgba(255, 255, 255, 1);\n    padding: 0.2em 0.4em;\n    text-align: left;\n    display: none;\n    border: 1px solid black;\n    line-height: 1.4em;\n    max-height: 160px;\n    overflow-y: scroll;\n    color: black;\n}\n.dropdown .list .list-item {\n    white-space: nowrap;\n}\n.dropdown .list .list-item:hover {\n    opacity: 0.5;\n    cursor: pointer;\n}\n.dropdown.open .list {\n    display: block;\n    z-index: 1;\n}\n.dropdown .list .list-item.selected,\n.dropdown .list .list-item.selected:hover {\n    color: rgb(87, 193, 252);\n    cursor: default;\n    opacity: 1;\n}\n.dropdown .list .list-item.header,\n.dropdown .list .list-item.header:hover {\n    font-size: 0.66em;\n    letter-spacing: 1px;\n    font-weight: bold;\n    text-transform: uppercase;\n    color: #888;\n    opacity: 1;\n    cursor: default;\n    font-weight: 300;\n    margin-top: 0.5em;\n}\n.dropdown .list .list-item.header:first-child {\n    margin-top: 0;\n}\n.filter-menu .dropdown {\n    margin: 0 0 1.5em;\n}\n.filter-menu .dropdown .heading {\n    color: white;\n}\n.slider-holder {\n    margin-bottom: 25px;\n}\n.slider-play {\n    width: 2em;\n    height: 2em;\n    background-image: url(./play.svg);\n    background-repeat: no-repeat;\n    background-size: 100% 100%;\n    pointer-events: all;\n    vertical-align: bottom;\n    cursor: pointer;\n\t\tdisplay: none;\n}\n.slider-holder.playing .slider-play {\n    background-image: url(./pause.svg);\n}\n.slider-play:hover {\n    opacity: 0.7;\n}\n.slider {\n    height: 64px;\n    width: 100%;\n    bottom: 0px;\n    pointer-events: all;\n    display: inline-block;\n    vertical-align: bottom;\n}\n.slider-holder.animatable .slider-play{\n\tdisplay: inline-block;\n}\n.slider-holder.animatable .slider {\n\twidth: calc(100% - 37px);\n}\n.slider-holder.playing .slider {\n\tpointer-events: none;\n}\n.slider circle {\n    fill: rgb(87, 193, 252);\n}\n.slider .tick line {\n    stroke: white;\n}\n.slider text {\n    fill: white;\n}\n.slider .slider-label {\n    font-size: 17px;\n}\n.slider .slider-end-labels {\n    font-size: 14px;\n}\n.nav-buttons {\n    margin-bottom: 20px;\n}",undefined);
 
@@ -30,0 +30,0 @@ function createControlsGroup(container_selector, props, update) {

package.json

 {
   "name": "@flourish/controls",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Switchable Dropdown/buttons/slider control",
@@ -5,0 +5,0 @@ "main": "controls.js",

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

27611

decreased by-0.14%

Lines of code

739

decreased by-0.14%

No dependency changes