Version 0.3.39

freepiment · Oct 10, 2022 · 7693594 · 7693594
1 parent 34cc53d
commit 7693594
Show file tree

Hide file tree

Showing 9 changed files with 261 additions and 16 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,15 @@
 ## Change Log
 All changes to this project are documented in this file. This project is [Semantic Versioning](http://semver.org/) compliant.
 
+## [0.3.39] - 2022-10-09
+
+### Added
+- MINOR Add :selector class.
+- MINOR Add input[type="date"] class.
+- MINOR Add input[type="time"] class.
+- MINOR Add input[type="range"] class.
+- MINOR Add #rangevalue class.
+
 ## [0.3.38] - 2022-10-03
 
 ### Added

diff --git a/README.md b/README.md
@@ -12,20 +12,14 @@
 ## Change Log
 All changes to this project are documented in this file. This project is [Semantic Versioning](http://semver.org/) compliant.
 
-## [0.3.38] - 2022-10-03
+## [0.3.39] - 2022-10-09
 
 ### Added
-- MINOR Add font-weight class.
-- MINOR Add text-transform class.
-- MINOR Add text-align class.
-- MINOR Add underline class.
-- MINOR Add overline class.
-- MINOR Add line-through class.
-- MINOR Add no-underline class.
-- MINOR Add text-underline-offset class.
-- MINOR Add overflow-wrap class.
-- MINOR Add letter-spacing class.
-- MINOR Add font-variant-numeric class.
+- MINOR Add :selector class.
+- MINOR Add input[type="date"] class.
+- MINOR Add input[type="time"] class.
+- MINOR Add input[type="range"] class.
+- MINOR Add #rangevalue class.
 
 [Display changelog](CHANGELOG.md)
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pimentcss",
-  "version": "0.3.38",
+  "version": "0.3.39",
   "description": "CSS Framework",
   "homepage": "https://pimentcss.webmonster.tech/",
   "main": "public/assets/css/piment.min.css",

diff --git a/piment/_base.scss b/piment/_base.scss
@@ -87,3 +87,7 @@ sup {
   vertical-align: super;
   font-size: xx-large;
 }
+::selection {
+  color: white;
+  background: map-get($colors, "blue");
+}
diff --git a/piment/components/_form.scss b/piment/components/_form.scss
@@ -78,6 +78,75 @@ textarea:-ms-input-placeholder {color: #cccccc;}
       border: 2px solid  map-get($colors, "formcolor");
       border-radius: .4rem;
     }
+    input[type="date"].input,
+    input[type="time"].input {
+      display: block;
+      width: 100%;
+      height: 50px;
+      background: transparent;
+      font-size: 22px;
+      color: map-get($colors, "formcolor");
+      line-height: 1.2;
+      padding: 0 .5rem;
+      margin: .5rem 0;
+      border: 2px solid  map-get($colors, "formcolor");
+      border-radius: .4rem;
+      font-family: sans-serif;
+
+      &::-webkit-datetime-edit {
+        padding: 1em 0;
+      }
+      &::-webkit-datetime-edit-text {
+        color: map-get($colors, "formcolor");
+        padding: 0 0.3em;
+      }
+      &::-webkit-datetime-edit-month-field {
+        color: map-get($colors, "formcolor");
+      }
+      &::-webkit-datetime-edit-day-field {
+        color: map-get($colors, "formcolor");
+      }
+      &::-webkit-datetime-edit-year-field {
+        color: map-get($colors, "formcolor");
+      }
+      &::-webkit-inner-spin-button {
+        display: none;
+      }
+    }
+
+    input[type="range"].input {
+      display: block;
+      width: 100%;
+      height: 50px;
+      background: transparent;
+      font-size: 22px;
+      color: map-get($colors, "formcolor");
+      line-height: 1.2;
+      padding: 0 .5rem;
+      margin: .5rem 0;
+      border: 2px solid  map-get($colors, "formcolor");
+      border-radius: .4rem;
+      font-family: sans-serif;
+      -webkit-appearance: none;
+      background: map-get($colors, "blue");
+      outline: none;
+      opacity: 1;
+      transition: opacity 0.2s;
+
+      &:hover {
+        opacity: 0.7;
+      }
+
+      &::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        border: none;
+        height: 16px;
+        width: 16px;
+        border-radius: 50%;
+        background: map-get($colors, "info");
+        margin-top: 0;
+      }
+    }
 
     .right .input {
       padding-right: 3rem;
@@ -86,6 +155,10 @@ textarea:-ms-input-placeholder {color: #cccccc;}
     .left .input {
       padding-left: 3rem;
     }
+
+    #rangevalue:before {
+      content: "$";
+    }
   }
   .form-input-styled {
     position: relative;
@@ -367,3 +440,5 @@ textarea:-ms-input-placeholder {color: #cccccc;}
   transform: translateY(50%);
   right: 5px;
 }
+
+
diff --git a/public/assets/css/pimentcss.css b/public/assets/css/pimentcss.css
@@ -103,6 +103,16 @@ sup {
   font-size: xx-large;
 }
 
+::-moz-selection {
+  color: white;
+  background: hsl(240deg, 92%, 51%);
+}
+
+::selection {
+  color: white;
+  background: hsl(240deg, 92%, 51%);
+}
+
 @media (min-width: 0) {
   .responsive-test {
     color: red;
@@ -3565,12 +3575,86 @@ textarea:-ms-input-placeholder {
   border: 2px solid hsl(0deg, 0%, 18%);
   border-radius: 0.4rem;
 }
+.form .form-input input[type=date].input,
+.form .form-input input[type=time].input {
+  display: block;
+  width: 100%;
+  height: 50px;
+  background: transparent;
+  font-size: 22px;
+  color: hsl(0deg, 0%, 18%);
+  line-height: 1.2;
+  padding: 0 0.5rem;
+  margin: 0.5rem 0;
+  border: 2px solid hsl(0deg, 0%, 18%);
+  border-radius: 0.4rem;
+  font-family: sans-serif;
+}
+.form .form-input input[type=date].input::-webkit-datetime-edit,
+.form .form-input input[type=time].input::-webkit-datetime-edit {
+  padding: 1em 0;
+}
+.form .form-input input[type=date].input::-webkit-datetime-edit-text,
+.form .form-input input[type=time].input::-webkit-datetime-edit-text {
+  color: hsl(0deg, 0%, 18%);
+  padding: 0 0.3em;
+}
+.form .form-input input[type=date].input::-webkit-datetime-edit-month-field,
+.form .form-input input[type=time].input::-webkit-datetime-edit-month-field {
+  color: hsl(0deg, 0%, 18%);
+}
+.form .form-input input[type=date].input::-webkit-datetime-edit-day-field,
+.form .form-input input[type=time].input::-webkit-datetime-edit-day-field {
+  color: hsl(0deg, 0%, 18%);
+}
+.form .form-input input[type=date].input::-webkit-datetime-edit-year-field,
+.form .form-input input[type=time].input::-webkit-datetime-edit-year-field {
+  color: hsl(0deg, 0%, 18%);
+}
+.form .form-input input[type=date].input::-webkit-inner-spin-button,
+.form .form-input input[type=time].input::-webkit-inner-spin-button {
+  display: none;
+}
+.form .form-input input[type=range].input {
+  display: block;
+  width: 100%;
+  height: 50px;
+  background: transparent;
+  font-size: 22px;
+  color: hsl(0deg, 0%, 18%);
+  line-height: 1.2;
+  padding: 0 0.5rem;
+  margin: 0.5rem 0;
+  border: 2px solid hsl(0deg, 0%, 18%);
+  border-radius: 0.4rem;
+  font-family: sans-serif;
+  -webkit-appearance: none;
+  background: hsl(240deg, 92%, 51%);
+  outline: none;
+  opacity: 1;
+  transition: opacity 0.2s;
+}
+.form .form-input input[type=range].input:hover {
+  opacity: 0.7;
+}
+.form .form-input input[type=range].input::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  border: none;
+  height: 16px;
+  width: 16px;
+  border-radius: 50%;
+  background: hsl(41deg, 99%, 71%);
+  margin-top: 0;
+}
 .form .form-input .right .input {
   padding-right: 3rem;
 }
 .form .form-input .left .input {
   padding-left: 3rem;
 }
+.form .form-input #rangevalue:before {
+  content: "$";
+}
 .form .form-input-styled {
   position: relative;
   display: block;

diff --git a/public/assets/css/pimentcss.min.css b/public/assets/css/pimentcss.min.css
diff --git a/public/assets/css/pimentcss.min.css.map b/public/assets/css/pimentcss.min.css.map
diff --git a/public/index.html b/public/index.html
@@ -252,7 +252,83 @@ <h4 class="form-title">Select</h4>
                             </div>
                         </div>
                     </div>
+                    <h4 class="form-title">Input Datalist + Input Range</h4>
+                    <div class="row">
+                        <div class="col-xs-12">
+                            <div class="form-input">
+                                <label for="list--input">Search</label>
+                                <input type="text" id="list--input" name="list--input" list="list--data" class="input">
+                                <datalist id="list--data">
+                                    <option value="Choose 01">
+                                    <option value="Choose 02">
+                                    <option value="Choose 03">
+                                </datalist>
+                            </div>
 
+                            <div class="row">
+                                <div class="col-xs-12 col-md-6">
+                                    <div class="form-input">
+                                        <label for="list--days">Choose a date</label>
+                                        <input type="date" id="list--days" name="list--days" list="days" class="input">
+                                        <datalist id="days">
+                                            <option label="Chris' Birthday">1980-08-26</option>
+                                            <option label="Apollo 11 Moon Landing">1969-07-20</option>
+                                            <option label="DDay">1944-06-06</option>
+                                        </datalist>
+                                    </div>
+                                </div>
+                                <div class="col-xs-12 col-md-6">
+                                    <div class="form-input">
+                                        <label for="list--hours">Hours</label>
+                                        <input type="time" id="list--hours" name="list--hours" list="popularHours" class="input" />
+                                        <datalist id="popularHours">
+                                            <option value="08:00"></option>
+                                            <option value="09:00"></option>
+                                            <option value="10:00"></option>
+                                            <option value="11:00"></option>
+                                            <option value="12:00"></option>
+                                            <option value="13:00"></option>
+                                            <option value="14:00"></option>
+                                            <option value="15:00"></option>
+                                            <option value="16:00"></option>
+                                        </datalist>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="row">
+                                <div class="col-xs-12 col-md-6">
+                                    <div class="form-input">
+                                        <label id="pickcolors">Pick a color</label>
+                                        <input type="color" id="pickcolors" name="pickcolors" list="redColors" class="input" />
+                                        <datalist id="redColors">
+                                            <option value="#EA473E"></option>
+                                            <option value="#0F0FF5"></option>
+                                            <option value="#1EF671"></option>
+                                            <option value="#FB8618"></option>
+                                        </datalist>
+                                    </div>
+                                </div>
+                                <div class="col-xs-12 col-md-6">
+                                    <div class="form-input">
+                                        <label for="tick">Tip amount</label>
+                                        <input type="range" min="0" max="50" step="10" value="0" id="tick" name="tick" list="tickmarks" oninput="rangevalue.value=value" class="input" />
+                                        <datalist id="tickmarks">
+                                            <option value="0" label="0"></option>
+                                            <option value="10"></option>
+                                            <option value="20"></option>
+                                            <option value="25" label="25"></option>
+                                            <option value="30"></option>
+                                            <option value="40"></option>
+                                            <option value="50" label="50"></option>
+                                        </datalist>
+                                        <output id="rangevalue">0</output>
+                                    </div>
+                                </div>
+                            </div>
+
+                        </div>
+                    </div>
                 </form>
             </section>
             <section class="col-xs-12">
@@ -432,12 +508,15 @@ <h3 class="mt-2 text-blue">Accordion</h3>
                     </div>
                 </div>
             </section>
+
+
+
         </div>
     </main>
     <footer class="container mb-4 mt-4">
         <div class="row">
             <section class="col-sm-12 text-center">
-                <p class="font-xs">Version <span class="text-success">0.3.38</span><br>
+                <p class="font-xs">Version <span class="text-success">0.3.39</span><br>
                 Tous droits réservés &copy; 2022 Piment Css by <a class="font-xs text-red text-hover-blue" href="https://github.com/WebmonsterA" rel="noopener nofollow">Webmonster Community</a></p>
             </section>
         </div>