feat: Material UI theme (#21)

* Add material-ui folder and files * Add confirm button style * Add cancel button style * Replace "none" with 0 opacity color To override buttons background color * Use new flex justify variable The variable have been introduced in sweetalert version 8.11.1 * Set color for disabled buttons * Upgrade sweetalert2 dependency version * Add hover for close button * Add style for select * Implement hover background for close Using CSS background property, the circle on hover is slightly misaligned. To workaround that, an SVG circle is used as background image. The circle is then moved slightly down to be centered around the X. * Add error icon for text box * Add radio input styling There are a lot of "magic number" so we need to review this * Adjust poisition of swal2-label stylying for radio Previous code was adding the radio control also for checkboxes * Add style for range / slider Added using engine pseudo-elements * Apply material UI style to checkbox Apply material UI style to checkbox * Fix merge issue * Fix label padding merge issue Commit 7f14f5c (PR) was created without taking into consideration commit 76aacc2 * Implement focus for action buttons * Darken active action button background Need to be same color as `focus` * Set font-family for the close button The serif font-family is not vertically aligned on macOS. Arial font-family is better vertically aligned * Merge conflicts with master * Fix label padding merge issue Commit 7f14f5c (PR) was created without taking into consideration commit 76aacc2 * Implement focus for action buttons * Darken active action button background Need to be same color as `focus` * Set font-family for the close button The serif font-family is not vertically aligned on macOS. Arial font-family is better vertically aligned * fix lint errors * remove .sass-lint.yml
sweetalert2 · Oct 17, 2019 · 9a7b7cc · 9a7b7cc
1 parent d43260d
commit 9a7b7cc
Show file tree

Hide file tree

Showing 5 changed files with 363 additions and 3 deletions.
diff --git a/.npmignore b/.npmignore
@@ -1,8 +1,9 @@
 .editorconfig
-.sass-lint.yml
 gulpfile.js
 index.html
 release.config.js
 app.js
-yarn.lock
+.stylelintrc.json
 tools
+.travis.yml
+yarn.lock
diff --git a/material-ui/README.md b/material-ui/README.md
@@ -0,0 +1,34 @@
+# @sweetalert2/theme-material-ui - Material Ui Theme for [SweetAlert2](https://github.com/sweetalert2/sweetalert2)
+
+[![npm version](https://img.shields.io/npm/v/@sweetalert2/theme-material-ui.svg)](https://www.npmjs.com/package/@sweetalert2/theme-material-ui)
+
+Installation
+------------
+
+```sh
+npm install --save sweetalert2 @sweetalert2/theme-material-ui
+```
+
+Usage
+-----
+
+With CSS:
+
+```html
+<!-- Include the Material Ui theme -->
+<link rel="stylesheet" href="@sweetalert2/theme-material-ui/material-ui.css">
+
+<script src="sweetalert2/dist/sweetalert2.min.js"></script>
+```
+
+With SASS:
+
+`your-app.js`:
+```js
+import Swal from 'sweetalert2/src/sweetalert2.js'
+```
+
+`your-app.scss`:
+```scss
+@import '~@sweetalert2/theme-material-ui/material-ui.scss';
+```
diff --git a/material-ui/material-ui.scss b/material-ui/material-ui.scss
@@ -0,0 +1,302 @@
+@import '~sweetalert2/src/variables';
+
+// Theme variables
+$material-ui-blue: #2196f3;
+$material-ui-disabled: #808080;
+$material-ui-white: #fff;
+$material-ui-slider-track-height: 2px;
+$material-ui-slider-thumb-size: 16px;
+// Variables to be added to Sweetalert2
+$swal2-button-focus-background: rgba($material-ui-blue, .3);
+$swal2-close-button-font-family: arial;
+
+// override SASS variables here
+// CONFIRM BUTTON
+$swal2-confirm-button-border: 0;
+$swal2-confirm-button-border-radius: 0;
+$swal2-confirm-button-background-color: rgba(43, 21, 21, 0);
+$swal2-confirm-button-color: $material-ui-blue;
+
+// CANCEL BUTTON
+$swal2-cancel-button-border: 0;
+$swal2-cancel-button-border-radius: 0;
+$swal2-cancel-button-background-color: rgba(255, 255, 255, 0);
+$swal2-cancel-button-color: $material-ui-blue;
+
+// BUTTONS
+$swal2-button-darken-hover: rgba($material-ui-blue, .1);
+$swal2-button-darken-active: rgba($material-ui-blue, .3);
+$swal2-button-focus-outline: #fff;
+
+// ACTIONS
+$swal2-actions-justify-content: flex-end;
+
+// CLOSE BUTTON
+$swal2-close-button-border-radius: 50%;
+$swal2-close-button-hover-background: rgb(242, 242, 242);
+$swal2-close-button-hover-color: $swal2-close-button-color;
+
+// CHECKBOX
+$checkbox-size-px: 18;
+$checkbox-left-px: -2;
+
+@import '~sweetalert2/src/sweetalert2';
+
+// Temporary / Permanent workarounds
+// Input validation error
+.swal2-input {
+  &.swal2-inputerror {
+    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20height%3D%2232%22%20style%3D%22overflow%3Avisible%3Benable-background%3Anew%200%200%2032%2032%22%20viewBox%3D%220%200%2032%2032%22%20width%3D%2232%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cg%3E%3Cg%20id%3D%22Error_1_%22%3E%3Cg%20id%3D%22Error%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20id%3D%22BG%22%20r%3D%2216%22%20style%3D%22fill%3A%23D72828%3B%22%2F%3E%3Cpath%20d%3D%22M14.5%2C25h3v-3h-3V25z%20M14.5%2C6v13h3V6H14.5z%22%20id%3D%22Exclamatory_x5F_Sign%22%20style%3D%22fill%3A%23E6E6E6%3B%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E');
+    background-repeat: no-repeat;
+    background-position: right 3% top 50%;
+    background-size: 1em auto, 100%;
+  }
+}
+
+// Disabled (actions) buttons
+.swal2-styled {
+  &[disabled] {
+    opacity: 1;
+    color: $material-ui-disabled;
+  }
+
+  &:focus {
+    background-color: $swal2-button-focus-background;
+  }
+}
+
+// Close button additional style
+.swal2-close {
+  font-family: $swal2-close-button-font-family;
+}
+
+// Select element arrow
+.swal2-select {
+  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
+  background-repeat: no-repeat, repeat;
+  background-position: right .7em top 50%, 0 0;
+  background-size: .65em auto, 100%;
+  appearance: none;
+}
+
+// Radio button
+.swal2-radio {
+  input {
+    &[type='radio'] {
+      opacity: 0; // hiding the radio input
+    }
+  }
+
+  label {
+    position: relative; // Create a new containing block
+  }
+
+  .swal2-label {
+    padding-left: .2em;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 18px;
+      height: 18px;
+      border: 2px solid $material-ui-disabled;
+      border-radius: 100%;
+    }
+  }
+}
+
+[type='radio'] {
+  &:hover + .swal2-label {
+    &::before {
+      border: 2px solid $material-ui-blue;
+    }
+  }
+
+  &:checked + .swal2-label {
+    &::before {
+      border: 2px solid $material-ui-blue;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 5px;
+      left: 5px;
+      width: 12px;
+      height: 12px;
+      border-radius: 100%;
+      background: $material-ui-blue;
+    }
+  }
+}
+
+// Checkbox
+.swal2-checkbox {
+  input {
+    position: relative;
+    left: 30px;
+    width: 40px;
+    height: 40px;
+    transition: opacity .3s, transform .2s;
+    border-radius: 50%;
+    outline: none;
+    opacity: 0;
+    background-color: $material-ui-blue;
+    box-shadow: none;
+    appearance: none;
+    pointer-events: none;
+
+    &:checked,
+    &:indeterminate {
+      background-color: $material-ui-blue;
+    }
+
+    &:checked + span {
+      &::before {
+        border-color: $material-ui-blue;
+        background-color: $material-ui-blue;
+      }
+
+      &::after {
+        border-color: $material-ui-white;
+      }
+    }
+
+    &:indeterminate + span {
+      &::before {
+        border-color: $material-ui-blue;
+        background-color: $material-ui-blue;
+      }
+
+      &::after {
+        transform: translate($checkbox-left-px *2px, ($checkbox-size-px/6) * 1px);
+        border-left: 0;
+        border-color: $material-ui-blue;
+      }
+    }
+
+    &:active {
+      transform: scale(0);
+      transition: transform 0s, opacity 0s;
+      opacity: 1;
+
+      + span {
+        &::before {
+          border-color: $material-ui-blue;
+        }
+      }
+    }
+
+    &:checked {
+      &:active + span {
+        &::before {
+          border-color: transparent;
+          background-color: $material-ui-blue;
+        }
+      }
+    }
+
+    &:focus {
+      opacity: .12;
+    }
+  }
+
+  span {
+    &::before {
+      content: '';
+      position: relative;
+      top: 1px;
+      left: $checkbox-left-px * 1px;
+      box-sizing: border-box;
+      width: $checkbox-size-px * 1px;
+      height: $checkbox-size-px * 1px;
+      float: left;
+      transition: border-color .2s, background-color .2s;
+      border: solid 2px;
+      border-radius: 2px;
+      border-color: $material-ui-disabled;
+      vertical-align: top;
+    }
+
+    &::after {
+      content: '';
+      position: relative;
+      left: (-$checkbox-size-px + $checkbox-left-px) * 1px;
+      width: 10px;
+      height: -$checkbox-left-px * 2px;
+      float: left;
+      transform: translate(($checkbox-size-px/6) * 1px, -$checkbox-left-px *2px) rotate(-45deg);
+      border: solid 2px transparent;
+      border-top: 0;
+      border-right: 0;
+    }
+  }
+
+  &:hover {
+    > input {
+      opacity: .04;
+
+      &:focus {
+        opacity: .16;
+      }
+    }
+  }
+}
+
+// Mixin for range / slider styling
+@mixin slider-track {
+  height: $material-ui-slider-track-height;
+  background: lighten($material-ui-blue, 30%);
+}
+
+@mixin slider-thumb {
+  width: $material-ui-slider-thumb-size;
+  height: $material-ui-slider-thumb-size;
+  margin-top: - 1 * ($material-ui-slider-thumb-size / 2) + 1;
+  border: 0;
+  border-radius: 50%;
+  background: $material-ui-blue;
+  appearance: none;
+}
+
+[type='range'] {
+  appearance: none;
+
+  &:focus {
+    outline: none;
+  }
+
+  // Chrome does not support browser's pseudo elements comma-separated
+  // We need to write all styles for each browser engine
+  // sass-lint:disable no-vendor-prefixes
+  &::-webkit-slider-runnable-track {
+    @include slider-track;
+  }
+
+  &::-moz-range-track {
+    @include slider-track;
+  }
+
+  &::-ms-track {
+    @include slider-track;
+  }
+
+  &::-webkit-slider-thumb {
+    @include slider-thumb;
+  }
+
+  &::-moz-range-thumb {
+    @include slider-thumb;
+  }
+
+  &::-ms-thumb {
+    @include slider-thumb;
+  }
+
+  // There's no equivalent pseudo element for webkit
+  &::-moz-range-progress {
+    background: $material-ui-blue;
+  }
+}
diff --git a/material-ui/package.json b/material-ui/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "@sweetalert2/theme-material-ui",
+  "version": "2.0.3",
+  "repository": "sweetalert2/sweetalert2-themes",
+  "homepage": "https://sweetalert2.github.io/",
+  "description": "Material Ui theme for SweetAlert2",
+  "author": "",
+  "files": [
+    "*.css",
+    "*.scss"
+  ],
+  "main": "material-ui.css",
+  "keywords": [
+    "sweetalert2",
+    "material-ui",
+    "theme",
+    "themes",
+    "theming",
+    "sass"
+  ],
+  "bugs": "https://github.com/sweetalert2/sweetalert2-themes/issues",
+  "license": "MIT"
+}
diff --git a/yarn.lock b/yarn.lock
@@ -483,7 +483,7 @@ atob@^2.1.1:
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
-autoprefixer@^9.5.1:
+autoprefixer@^9.5.1, autoprefixer@^9.6.1:
   version "9.6.1"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.6.1.tgz#51967a02d2d2300bb01866c1611ec8348d355a47"
   integrity sha512-aVo5WxR3VyvyJxcJC3h4FKfwCQvQWb1tSI5VHNibddCVWrcD1NvlxEweg3TSgiPztMnWfjpy2FURKA2kvDE+Tw==