mithril-materialized 0.19.6 → 1.0.0-beta.1

package/sass/components/forms/_select.scss

@@ -0,0 +1,193 @@
+@use "../variables";
+@use "input-fields";
+
+/* Select Field
+   ========================================================================== */
+
+select.browser-default { opacity: 1; }
+select {
+  opacity: 0;
+  background-color: variables.$select-background;
+  width: 100%;
+  padding: variables.$select-padding;
+  border: variables.$select-border;
+  border-radius: variables.$select-radius;
+  height: variables.$input-height;
+}
+
+.select-label {
+  position: absolute;
+}
+
+.select-wrapper {
+  &.valid .helper-text[data-success],
+  &.invalid ~ .helper-text[data-error] {
+    @extend %hidden-text !optional;
+  }
+
+  &.valid {
+    & > input.select-dropdown {
+      @extend %valid-input-style !optional;
+    }
+
+    & ~ .helper-text:after {
+      @extend %custom-success-message !optional;
+    }
+  }
+
+  &.invalid {
+    & > input.select-dropdown,
+    & > input.select-dropdown:focus {
+      @extend %invalid-input-style !optional;
+    }
+
+    & ~ .helper-text:after {
+      @extend %custom-error-message !optional;
+    }
+  }
+
+  &.valid + label,
+  &.invalid + label {
+    width: 100%;
+    pointer-events: none;
+  }
+
+  & + label:after {
+    @extend %input-after-style !optional;
+  }
+
+  position: relative;
+
+  input.select-dropdown {
+    &:focus {
+      border-bottom: 1px solid variables.$input-focus-color;
+    }
+    position: relative;
+    cursor: pointer;
+    background-color: transparent;
+    border: none;
+    border-bottom: variables.$input-border;
+    outline: none;
+    height: variables.$input-height;
+    line-height: variables.$input-height;
+    width: 100%;
+    font-size: variables.$input-font-size;
+    margin: variables.$input-margin;
+    padding: 0;
+    display: block;
+    user-select:none;
+    z-index: 1;
+  }
+
+  .caret {
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    margin: auto 0;
+    z-index: 0;
+    fill: rgba(0,0,0,.87);
+  }
+
+  & + label {
+    position: absolute;
+    top: -26px;
+    font-size: variables.$label-font-size;
+  }
+
+  // Hide select with overflow hidden instead of using display none
+  // (this prevents form validation errors with hidden form elements)
+  .hide-select {
+    width: 0;
+    height: 0;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    z-index: -1;
+  }
+}
+
+// Disabled styles
+select:disabled {
+  color: variables.$input-disabled-color;
+}
+
+.select-wrapper.disabled {
+  + label {
+    color: variables.$input-disabled-color;
+  }
+  .caret {
+    fill: variables.$input-disabled-color;
+  }
+}
+
+.select-wrapper input.select-dropdown:disabled {
+  color: variables.$input-disabled-color;
+  cursor: default;
+  user-select: none;
+}
+
+.select-wrapper i {
+  color: variables.$select-disabled-color;
+}
+
+.select-dropdown li.disabled,
+.select-dropdown li.disabled > span,
+.select-dropdown li.optgroup {
+  color: variables.$select-disabled-color;
+  background-color: transparent;
+}
+
+body.keyboard-focused {
+  .select-dropdown.dropdown-content li:focus {
+    background-color: variables.$select-option-focus;
+  }
+}
+
+.select-dropdown.dropdown-content {
+  li {
+    &:hover {
+      background-color: variables.$select-option-hover;
+    }
+
+    &.selected {
+      background-color: variables.$select-option-selected;
+    }
+  }
+}
+
+// Prefix Icons
+.prefix ~ .select-wrapper {
+  margin-left: 3rem;
+  width: 92%;
+  width: calc(100% - 3rem);
+}
+
+.prefix ~ label { margin-left: 3rem; }
+
+// Icons
+.select-dropdown li {
+  img {
+    height: variables.$dropdown-item-height - 10;
+    width: variables.$dropdown-item-height - 10;
+    margin: 5px 15px;
+    float: right;
+  }
+}
+
+// Optgroup styles
+.select-dropdown li.optgroup {
+  border-top: 1px solid variables.$dropdown-hover-bg-color;
+
+  &.selected > span {
+    color: rgba(0, 0, 0, .7);
+  }
+
+  & > span {
+    color: rgba(0, 0, 0, .4);
+  }
+
+  & ~ li.optgroup-option {
+    padding-left: 1rem;
+  }
+}

package/sass/components/forms/_switches.scss

@@ -0,0 +1,92 @@
+@use "sass:color";
+@use "../variables";
+
+/* Switch
+   ========================================================================== */
+
+.switch,
+.switch * {
+  -webkit-tap-highlight-color: transparent;
+  user-select: none;
+}
+
+.switch label {
+  cursor: pointer;
+}
+
+.switch label input[type=checkbox] {
+  opacity: 0;
+  width: 0;
+  height: 0;
+
+  &:checked + .lever {
+    background-color: variables.$switch-checked-lever-bg;
+
+    &:before, &:after {
+      left: 18px;
+    }
+
+    &:after {
+      background-color: variables.$switch-bg-color;
+    }
+  }
+}
+
+.switch label .lever {
+  content: "";
+  display: inline-block;
+  position: relative;
+  width: 36px;
+  height: 14px;
+  background-color: variables.$switch-unchecked-lever-bg;
+  border-radius: variables.$switch-radius;
+  margin-right: 10px;
+  transition: background 0.3s ease;
+  vertical-align: middle;
+  margin: 0 16px;
+
+  &:before, &:after {
+    content: "";
+    position: absolute;
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    left: 0;
+    top: -3px;
+    transition: left 0.3s ease, background .3s ease, box-shadow 0.1s ease, transform .1s ease;
+  }
+
+  &:before {
+    background-color: color.adjust(variables.$switch-bg-color, $alpha: -.85);
+  }
+
+  &:after {
+    background-color: variables.$switch-unchecked-bg;
+    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+  }
+}
+
+// Switch active style
+input[type=checkbox]:checked:not(:disabled) ~ .lever:active::before,
+input[type=checkbox]:checked:not(:disabled).tabbed:focus ~ .lever::before {
+  transform: scale(2.4);
+  background-color: color.adjust(variables.$switch-bg-color, $alpha: -.85);
+}
+
+input[type=checkbox]:not(:disabled) ~ .lever:active:before,
+input[type=checkbox]:not(:disabled).tabbed:focus ~ .lever::before {
+  transform: scale(2.4);
+  background-color: rgba(0,0,0,.08);
+}
+
+// Disabled Styles
+.switch input[type=checkbox][disabled] + .lever {
+  cursor: default;
+  background-color: rgba(0,0,0,.12);
+}
+
+.switch label input[type=checkbox][disabled] + .lever:after,
+.switch label input[type=checkbox][disabled]:checked + .lever:after {
+  background-color: variables.$input-disabled-solid-color;
+}

package/sass/materialize.scss

@@ -0,0 +1,41 @@
+@charset "UTF-8";
+
+// Color
+@use "components/color-variables";
+@use "components/color-classes";
+
+// Variables;
+@use "components/variables";
+
+// Reset
+@use "components/normalize";
+
+// components
+@use "components/global";
+@use "components/badges";
+@use "components/icons-material-design";
+@use "components/grid";
+@use "components/navbar";
+@use "components/typography";
+@use "components/transitions";
+@use "components/cards";
+@use "components/toast";
+@use "components/tabs";
+@use "components/tooltip";
+@use "components/buttons";
+@use "components/dropdown";
+@use "components/waves";
+@use "components/modal";
+@use "components/collapsible";
+@use "components/chips";
+@use "components/materialbox";
+@use "components/forms/forms";
+@use "components/table_of_contents";
+@use "components/sidenav";
+@use "components/preloader";
+@use "components/slider";
+@use "components/carousel";
+@use "components/tapTarget";
+@use "components/pulse";
+@use "components/datepicker";
+@use "components/timepicker";

package/dist/index.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["input.css","codeblock.css","kanban.css","map-editor.css","switch.css","timeline.css"],"names":[],"mappings":"AAAA,OACE,oBACF,CAEA,wCAGE,4BAA6B,CAE7B,WAAgC,CAAhC,+BAAgC,CAChC,eAAgB,CAOhB,eAAgB,CAEhB,sBAAuB,CALvB,cAAe,CAFf,WAAY,CAPZ,cAAmB,CAMnB,YAAa,CAIb,SAAU,CAOV,oCAAwC,CATxC,UAWF,CAEA,2BACE,WACF,CC5BA,WACE,sBACF,CACA,eACE,kBACF,CACA,iBACE,oBACF,CCRA,2BACE,WAAY,CACZ,WAAY,CAEZ,mBACF,CAGA,kCACE,eAAgB,CAEhB,uBACF,CAEA,uBAQE,yEAIC,CACD,mHACF,CAEA,uBAQE,yEAIC,CACD,mHACF,CAEA,cACE,mBACF,CACA,uBACE,mBACF,CACA,2BACE,eAAgB,CAChB,gBACF,CCvDA,6CACE,gBAAiB,CACjB,SAAU,CACV,uBACF,CAEA,2FAcE,kCAAmC,CANnC,8CAA8B,CAA9B,kBAA8B,CAA9B,gBAA8B,CAJ9B,WAAY,CAFZ,SAAU,CADV,QAAS,CAYT,uBAAwB,CAMxB,0BAA2B,CAhB3B,UAiBF,CC1BA,2BAGE,UAEF,CACA,UACE,kBACF,CACA,UACE,kBACF,CACA,eAEE,SAAU,CADV,eAEF,CACA,cACE,eACF,CClBA,aAGE,eAAgB,CAFhB,eAAkB,CAClB,SAAU,CAEV,iBACF,CAGA,oBAME,kBAAmB,CAFnB,QAAS,CAHT,UAAW,CAMX,QAAS,CACT,iBAAkB,CANlB,iBAAkB,CAClB,KAAM,CAEN,UAIF,CAGA,yBACE,aAAc,CAEd,mBAAoB,CACpB,iBAAkB,CAFlB,SAGF,CAEA,8BACE,aAAc,CACd,gBACF,CAEA,0CAEE,aAAc,CADd,cAEF,CAEA,yCAEE,aAAc,CADd,eAEF,CAEA,wDACE,aACF,CAGA,6HAEE,aACF,CAGA,0BAEE,kBAAmB,CAOnB,iBAAkB,CANlB,UAAW,CAEX,eAAgB,CAChB,eAAgB,CAChB,eAAgB,CANhB,mBAAoB,CAGpB,gBAAkB,CAIlB,iBAEF,CAGA,iCACE,wBACF,CAEA,yCACE,kBACF,CAEA,6BAGE,0CAAiD,CAFjD,YAAe,CACf,gBAEF,CAGA,gCASE,6BAAkB,CAAlB,0BAAkB,CANlB,WAAY,CACZ,QAAS,CAGT,mBAAoB,CADpB,iBAAkB,CALlB,UAAW,CASX,QAAS,CALT,OAMF,CAGA,2GAEE,0BACF,CAEA,+CACE,0BACF,CAGA,yBASE,kCAAmC,CAGnC,kBAAmB,CACnB,iBAAkB,CAClB,4BAA6B,CAH7B,UAAW,CAJX,eAAgB,CAJhB,iBAAkB,CAElB,mBAAoB,CADpB,eAAmB,CAFnB,WAAY,CAcZ,QAAS,CART,gBAAiB,CAUjB,kBAAmB,CARnB,iBAAkB,CAKlB,iBAAkB,CATlB,mBAAoB,CALpB,UAkBF,CAGA,gCACC,kBACD,CAEA,yBACE,gBACF,CAGA,uCACE,yCACE,eACF,CACF,CAEA,qCACE,oBACE,YACF,CAEA,yBAGE,gBAAmB,CADnB,iBAAkB,CADlB,UAGF,CAEA,8BACE,eACF,CAEA,0BAIE,aAAc,CADd,eAAgB,CAFhB,eAAkB,CAClB,WAGF,CAEA,gCAIE,2BAA4B,CAD5B,8BAA+B,CAD/B,SAAU,CADV,UAAW,CAIX,SACF,CAEA,+CAEE,2BAA4B,CAD5B,8BAEF,CAEA,yBAEE,WAAY,CACZ,SAAU,CACV,oBAAuB,CAHvB,iBAIF,CACF","file":"index.css","sourcesContent":[".twist {\n  transform: scaleY(-1);\n}\n\ninput[type='color']:not(.browser-default) {\n  margin: 0px 0 8px 0;\n  /** Copied from input[type=number] */\n  background-color: transparent;\n  border: none;\n  border-bottom: 1px solid #9e9e9e;\n  border-radius: 0;\n  outline: none;\n  height: 3rem;\n  width: 100%;\n  font-size: 16px;\n  padding: 0;\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  -webkit-box-sizing: content-box;\n  box-sizing: content-box;\n  -webkit-transition: border 0.3s, -webkit-box-shadow 0.3s;\n  transition: border 0.3s, -webkit-box-shadow 0.3s;\n  transition: box-shadow 0.3s, border 0.3s;\n  transition: box-shadow 0.3s, border 0.3s, -webkit-box-shadow 0.3s;\n}\n\n.input-field.options > label {\n  top: -2.5rem;\n}",".codeblock {\n  margin: 1.5rem 0 2.5rem 0;\n}\n.codeblock > div {\n  margin-bottom: 1rem;\n}\n.codeblock > label {\n  display: inline-block;\n}\n",".kanban .kanban__draggable {\n  cursor: move; /* fallback if grab cursor is unsupported */\n  cursor: grab;\n  cursor: -moz-grab;\n  cursor: -webkit-grab;\n}\n\n/* (Optional) Apply a \"closed-hand\" cursor during drag operation. */\n.kanban .kanban__draggable:active {\n  cursor: grabbing;\n  cursor: -moz-grabbing;\n  cursor: -webkit-grabbing;\n}\n\n.kanban .kanban__below {\n  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1e5799+100,1e5799+100,1e5799+100&0+0,0.7+100 */\n  background: -moz-linear-gradient(top, rgba(30, 87, 153, 0) 0%, rgba(30, 87, 153, 0.7) 100%); /* FF3.6-15 */\n  background: -webkit-linear-gradient(\n    top,\n    rgba(30, 87, 153, 0) 0%,\n    rgba(30, 87, 153, 0.7) 100%\n  ); /* Chrome10-25,Safari5.1-6 */\n  background: linear-gradient(\n    to bottom,\n    rgba(30, 87, 153, 0) 0%,\n    rgba(30, 87, 153, 0.7) 100%\n  ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */\n  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001e5799', endColorstr='#b31e5799',GradientType=0 ); /* IE6-9 */\n}\n\n.kanban .kanban__above {\n  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1e5799+0,1e5799+0,1e5799+0&0.7+0,0+100 */\n  background: -moz-linear-gradient(top, rgba(30, 87, 153, 0.7) 0%, rgba(30, 87, 153, 0) 100%); /* FF3.6-15 */\n  background: -webkit-linear-gradient(\n    top,\n    rgba(30, 87, 153, 0.7) 0%,\n    rgba(30, 87, 153, 0) 100%\n  ); /* Chrome10-25,Safari5.1-6 */\n  background: linear-gradient(\n    to bottom,\n    rgba(30, 87, 153, 0.7) 0%,\n    rgba(30, 87, 153, 0) 100%\n  ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */\n  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b31e5799', endColorstr='#001e5799',GradientType=0 ); /* IE6-9 */\n}\n\n.kanban__item {\n  padding-bottom: 12px;\n}\n.kanban__item.disabled {\n  padding-bottom: 24px;\n}\n.kanban__item > .card-action {\n  margin-bottom: 0;\n  text-align: right;\n}",".map-editor .input-field .prefix ~ .collection {\n  margin-left: 3rem;\n  width: 92%;\n  width: calc(100% - 3rem);\n}\n/* For truthy values, the checkbox is not visible when the item is selected, so make it white */\n.map-editor .active .checkbox-in-collection label > input[type='checkbox']:checked + span:before {\n  top: -4px;\n  left: -3px;\n  width: 12px;\n  height: 22px;\n  border-top: 2px solid transparent;\n  border-left: 2px solid transparent;\n  border-right: 2px solid white; /* You need to change the colour here */\n  border-bottom: 2px solid white; /* And here */\n  -webkit-transform: rotate(40deg);\n  -moz-transform: rotate(40deg);\n  -ms-transform: rotate(40deg);\n  -o-transform: rotate(40deg);\n  transform: rotate(40deg);\n  -webkit-backface-visibility: hidden;\n  -webkit-transform-origin: 100% 100%;\n  -moz-transform-origin: 100% 100%;\n  -ms-transform-origin: 100% 100%;\n  -o-transform-origin: 100% 100%;\n  transform-origin: 100% 100%;\n}\n",".clear,\n.clear-10,\n.clear-15 {\n  clear: both;\n  /* overflow: hidden; Précaution pour IE 7 */\n}\n.clear-10 {\n  margin-bottom: 10px;\n}\n.clear-15 {\n  margin-bottom: 15px;\n}\nspan.mandatory {\n  margin-left: 5px;\n  color: red;\n}\nlabel+.switch {\n  margin-top: 1rem;\n}\n",".mm_timeline {\n  margin: 30px 0 0 0;\n  padding: 0;\n  list-style: none;\n  position: relative;\n}\n\n/* The line */\n.mm_timeline:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 10px;\n  background: #afdcf8;\n  left: 20%;\n  margin-left: -10px;\n}\n\n/* The date/time */\n.mm_timeline > li .mm_time {\n  display: block;\n  width: 25%;\n  padding-right: 100px;\n  position: absolute;\n}\n\n.mm_timeline > li .mm_time span {\n  display: block;\n  text-align: right;\n}\n\n.mm_timeline > li .mm_time span:first-child {\n  font-size: 0.9em;\n  color: #bdd0db;\n}\n\n.mm_timeline > li .mm_time span:last-child {\n  font-size: 1.4em;\n  color: #3594cb;\n}\n\n.mm_timeline > li:nth-child(odd) .mm_time span:last-child {\n  color: #6cbfee;\n}\n\n/* Active time */\n.mm_timeline > li.active:nth-child(even) .mm_time span:last-child,\n.mm_timeline > li.active:nth-child(odd) .mm_time span:last-child {\n  color: rgb(6, 5, 88);\n}\n\n/* Right content */\n.mm_timeline > li .mm_label {\n  margin: 0 0 15px 28%;\n  background: #3594cb;\n  color: #fff;\n  padding: 0.6em 1em;\n  font-size: 1.2em;\n  font-weight: 300;\n  line-height: 1.4;\n  position: relative;\n  border-radius: 5px;\n}\n\n/* Active label */\n.mm_timeline > li.active .mm_label {\n  border: 4px solid rgb(6, 5, 88);\n}\n\n.mm_timeline > li:nth-child(odd) .mm_label {\n  background: #6cbfee;\n}\n\n.mm_timeline > li .mm_label h5 {\n  margin-top: 0px;\n  padding: 0 0 10px 0;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.4);\n}\n\n/* The triangle */\n.mm_timeline > li .mm_label:after {\n  right: 100%;\n  border: solid transparent;\n  content: ' ';\n  height: 0;\n  width: 0;\n  position: absolute;\n  pointer-events: none;\n  border-right-color: #3594cb;\n  border-width: 10px;\n  top: 10px;\n}\n\n/* Active triangle */\n.mm_timeline > li:nth-child(even).active .mm_label:after,\n.mm_timeline > li:nth-child(odd).active .mm_label:after {\n  border-right-color: rgb(6, 5, 88);\n}\n\n.mm_timeline > li:nth-child(odd) .mm_label:after {\n  border-right-color: #6cbfee;\n}\n\n/* The icons */\n.mm_timeline > li .mm_icon {\n  width: 40px;\n  height: 40px;\n  font-style: normal;\n  font-weight: normal;\n  font-variant: normal;\n  text-transform: none;\n  font-size: 1.4em;\n  line-height: 40px;\n  -webkit-font-smoothing: antialiased;\n  position: absolute;\n  color: #fff;\n  background: #46a4da;\n  border-radius: 50%;\n  box-shadow: 0 0 0 8px #afdcf8;\n  text-align: center;\n  left: 20%;\n  /* top: 0; */\n  margin: 0 0 0 -25px;\n}\n\n/* Active icon */\n.mm_timeline > li.active .mm_icon {\n\tbackground: rgb(6, 5, 88);\n}\n\n.mm_icon > .material-icons {\n  line-height: 3rem;\n}\n\n/* Example Media Queries */\n@media screen and (max-width: 65.375em) {\n  .mm_timeline > li .mm_time span:last-child {\n    font-size: 1.5em;\n  }\n}\n\n@media screen and (max-width: 47.2em) {\n  .mm_timeline:before {\n    display: none;\n  }\n\n  .mm_timeline > li .mm_time {\n    width: 100%;\n    position: relative;\n    padding: 0 0 20px 0;\n  }\n\n  .mm_timeline > li .mm_time span {\n    text-align: left;\n  }\n\n  .mm_timeline > li .mm_label {\n    margin: 0 0 30px 0;\n    padding: 1em;\n    font-weight: 400;\n    font-size: 95%;\n  }\n\n  .mm_timeline > li .mm_label:after {\n    right: auto;\n    left: 20px;\n    border-right-color: transparent;\n    border-bottom-color: #3594cb;\n    top: -20px;\n  }\n\n  .mm_timeline > li:nth-child(odd) .mm_label:after {\n    border-right-color: transparent;\n    border-bottom-color: #6cbfee;\n  }\n\n  .mm_timeline > li .mm_icon {\n    position: relative;\n    float: right;\n    left: auto;\n    margin: -55px 5px 0 0px;\n  }\n}\n"]}