Don’t close the modal when click on the scrollbar. fix #33

.csscomb.json

@@ -0,0 +1,245 @@
+{
+ "remove-empty-rulesets": true,
+ "always-semicolon": true,
+ "color-case": "lower",
+ "block-indent": " ",
+ "color-shorthand": true,
+ "element-case": "lower",
+ "eof-newline": true,
+ "leading-zero": false,
+ "quotes": "double",
+ "space-after-colon": " ",
+ "space-before-combinator": " ",
+ "space-after-combinator": " ",
+ "space-between-declarations": "\n",
+ "space-before-opening-brace": " ",
+ "space-after-opening-brace": "\n",
+ "space-after-selector-delimiter": "\n",
+ "space-before-selector-delimiter": "",
+ "space-before-closing-brace": "\n",
+ "strip-spaces": true,
+ "sort-order": [
+ [
+ "position",
+ "top",
+ "right",
+ "bottom",
+ "left",
+ "z-index",
+ "display",
+ "visibility",
+ "flex-direction",
+ "flex-wrap",
+ "flex-flow",
+ "justify-content",
+ "align-items",
+ "align-content",
+ "flex-grow",
+ "flex-shrink",
+ "flex-basis",
+ "flex",
+ "order",
+ "align-self",
+ "flex-pack",
+ "flex-align",
+ "flex-item-align",
+ "float",
+ "clear",
+ "overflow",
+ "overflow-x",
+ "overflow-y",
+ "-webkit-overflow-scrolling",
+ "clip",
+ "box-sizing",
+ "margin",
+ "margin-top",
+ "margin-right",
+ "margin-bottom",
+ "margin-left",
+ "padding",
+ "padding-top",
+ "padding-right",
+ "padding-bottom",
+ "padding-left",
+ "min-width",
+ "min-height",
+ "max-width",
+ "max-height",
+ "width",
+ "height",
+ "outline",
+ "outline-width",
+ "outline-style",
+ "outline-color",
+ "outline-offset",
+ "border",
+ "border-spacing",
+ "border-collapse",
+ "border-width",
+ "border-style",
+ "border-color",
+ "border-top",
+ "border-top-width",
+ "border-top-style",
+ "border-top-color",
+ "border-right",
+ "border-right-width",
+ "border-right-style",
+ "border-right-color",
+ "border-bottom",
+ "border-bottom-width",
+ "border-bottom-style",
+ "border-bottom-color",
+ "border-left",
+ "border-left-width",
+ "border-left-style",
+ "border-left-color",
+ "border-radius",
+ "border-top-left-radius",
+ "border-top-right-radius",
+ "border-bottom-right-radius",
+ "border-bottom-left-radius",
+ "border-image",
+ "border-image-source",
+ "border-image-slice",
+ "border-image-width",
+ "border-image-outset",
+ "border-image-repeat",
+ "border-top-image",
+ "border-right-image",
+ "border-bottom-image",
+ "border-left-image",
+ "border-corner-image",
+ "border-top-left-image",
+ "border-top-right-image",
+ "border-bottom-right-image",
+ "border-bottom-left-image",
+ "background",
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
+ "background-color",
+ "background-image",
+ "background-attachment",
+ "background-position",
+ "background-position-x",
+ "background-position-y",
+ "background-clip",
+ "background-origin",
+ "background-size",
+ "background-repeat",
+ "box-decoration-break",
+ "box-shadow",
+ "color",
+ "table-layout",
+ "caption-side",
+ "empty-cells",
+ "list-style",
+ "list-style-position",
+ "list-style-type",
+ "list-style-image",
+ "quotes",
+ "content",
+ "counter-increment",
+ "counter-reset",
+ "-ms-writing-mode",
+ "vertical-align",
+ "text-align",
+ "text-align-last",
+ "text-decoration",
+ "text-emphasis",
+ "text-emphasis-position",
+ "text-emphasis-style",
+ "text-emphasis-color",
+ "text-indent",
+ "-ms-text-justify",
+ "text-justify",
+ "text-outline",
+ "text-transform",
+ "text-wrap",
+ "-ms-text-overflow",
+ "text-overflow",
+ "text-overflow-ellipsis",
+ "text-overflow-mode",
+ "text-shadow",
+ "white-space",
+ "word-spacing",
+ "-ms-word-wrap",
+ "word-wrap",
+ "-ms-word-break",
+ "word-break",
+ "-moz-tab-size",
+ "-o-tab-size",
+ "tab-size",
+ "-webkit-hyphens",
+ "-moz-hyphens",
+ "hyphens",
+ "letter-spacing",
+ "font",
+ "font-weight",
+ "font-style",
+ "font-variant",
+ "font-size-adjust",
+ "font-stretch",
+ "font-size",
+ "font-family",
+ "src",
+ "line-height",
+ "opacity",
+ "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
+ "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
+ "-ms-interpolation-mode",
+ "-webkit-filter",
+ "-ms-filter",
+ "filter",
+ "resize",
+ "cursor",
+ "nav-index",
+ "nav-up",
+ "nav-right",
+ "nav-down",
+ "nav-left",
+ "transition",
+ "transition-delay",
+ "transition-timing-function",
+ "transition-duration",
+ "transition-property",
+ "transform",
+ "transform-origin",
+ "animation",
+ "animation-name",
+ "animation-duration",
+ "animation-play-state",
+ "animation-timing-function",
+
+ "animation-delay",
+ "animation-iteration-count",
+ "animation-direction",
+ "pointer-events",
+ "unicode-bidi",
+ "direction",
+ "columns",
+ "column-span",
+ "column-width",
+ "column-count",
+ "column-fill",
+ "column-gap",
+ "column-rule",
+ "column-rule-width",
+ "column-rule-style",
+ "column-rule-color",
+ "break-before",
+ "break-inside",
+ "break-after",
+ "page-break-before",
+ "page-break-inside",
+ "page-break-after",
+ "orphans",
+ "widows",
+ "-ms-zoom",
+ "zoom",
+ "max-zoom",
+ "min-zoom",
+ "user-zoom",
+ "orientation"
+ ]
+ ]
+}

dist/tingle.css

@@ -21,18 +21,15 @@
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
  overflow-y: auto;
  background: rgba(0, 0, 0, .8);
  opacity: 0;
- cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAANpJREFUOBGNkz0KAjEQhYPYWXgCKws7LcXWyt7WG4i9jegBvIJ4AvEyXsRCsBDiN0sGkiE/O/A2O9n3viS7rPPeb9ETrVzPwrtHDzR1XF5I6oPWLQaeq5hDXQRw0I6xCuF5HH7Tz7oFuTkhrSyEhza8THaLoQhphpWUg/QOFyA/AFpy5nTbGrIjxvg4AiiGBzYc+rGZH9KPzFy+ZbX4bX9l+VDZr5NQMMbhbtvMxccpQ3JhpTchtXATQviItIpvW0CY7HHm8c9UDRd2chbABt3RQk2tEe8O3dDkD4JQ4iOR7BMpAAAAAElFTkSuQmCC"), pointer;
+ cursor: pointer;
  -webkit-transition: opacity .2s ease;
  transition: opacity .2s ease;
-
- -webkit-box-align: center;
-
- -ms-flex-align: center;
-
- align-items: center;
 }
 
 /* confirm and alerts
@@ -55,41 +52,46 @@
 
 .tingle-modal__close {
  position: fixed;
- top: 1vw;
- right: 1vw;
+ top: 10px;
+ right: 28px;
  z-index: 1000;
  padding: 0;
- width: 40px;
- height: 40px;
+ width: 5rem;
+ height: 5rem;
  border: none;
- border-radius: 50%;
- background: transparent;
- color: #fff;
- font-size: 40px;
+ background-color: transparent;
+ color: #f0f0f0;
+ font-size: 6rem;
+ font-family: monospace;
  line-height: normal;
+ line-height: 1;
  cursor: pointer;
+ -webkit-transition: color .3s ease;
+ transition: color .3s ease;
+}
+
+.tingle-modal__close:hover {
+ color: #fff;
 }
 
 .tingle-modal-box {
  position: relative;
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
  margin-top: auto;
  margin-bottom: auto;
  width: 60%;
  border-radius: 4px;
  background: #fff;
  opacity: 1;
  cursor: auto;
- -webkit-transition: -webkit-transform .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
- transition: -webkit-transform .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
- transition: transform .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
- transition: transform .3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+ -webkit-transition: -webkit-transform .3s cubic-bezier(.175, .885, .32, 1.275);
+ transition: -webkit-transform .3s cubic-bezier(.175, .885, .32, 1.275);
+ transition: transform .3s cubic-bezier(.175, .885, .32, 1.275);
+ transition: transform .3s cubic-bezier(.175, .885, .32, 1.275), -webkit-transform .3s cubic-bezier(.175, .885, .32, 1.275);
  -webkit-transform: scale(.8);
  -ms-transform: scale(.8);
  transform: scale(.8);
-
- -ms-flex-negative: 0;
-
- flex-shrink: 0;
 }
 
 .tingle-modal-box__content {
@@ -150,7 +152,7 @@
 }
 
 .tingle-modal--overflow {
- padding-top: 5vh;
+ padding-top: 8vh;
 }
 
 /* btn

dist/tingle.js

@@ -298,13 +298,13 @@
 
  function _bindEvents() {
  bind(this.modalCloseBtn, 'click', this.close.bind(this));
- bind(this.modal, 'mousedown', _handleClickProcedure.bind(this));
+ bind(this.modal, 'mousedown', _handleClickOutside.bind(this));
  window.addEventListener('resize', _checkOverflow.bind(this));
  };
 
- function _handleClickProcedure(event) {
+ function _handleClickOutside(event) {
  // if click is outside the modal
- if (!_findAncestor(event.target, 'tingle-modal')) {
+ if (!_findAncestor(event.target, 'tingle-modal') && event.clientX < this.modal.clientWidth) {
  this.close();
  }
  }