added slider.css to gijgo.css

atatanasov · Jul 29, 2018 · 3977182 · 3977182
1 parent 801c764
commit 3977182
Show file tree

Hide file tree

Showing 7 changed files with 158 additions and 6 deletions.
diff --git a/Gijgo.GitHub.csproj b/Gijgo.GitHub.csproj
@@ -73,6 +73,19 @@
     <Content Include="examples\checkbox\Checkbox.Base.uiLibrary.Bootstrap.4.html" />
     <Content Include="examples\checkbox\Checkbox.Base.uiLibrary.Material.Design.html" />
     <Content Include="examples\checkbox\index.html" />
+    <Content Include="examples\colorpicker\ColorPicker.Base.change.sample.html" />
+    <Content Include="examples\colorpicker\ColorPicker.Base.close.sample.html" />
+    <Content Include="examples\colorpicker\ColorPicker.Base.destroy.sample.html" />
+    <Content Include="examples\colorpicker\ColorPicker.Base.open.sample.html" />
+    <Content Include="examples\colorpicker\ColorPicker.Base.select.sample.html" />
+    <Content Include="examples\colorpicker\ColorPicker.Base.uiLibrary.Bootstrap.3.html" />
+    <Content Include="examples\colorpicker\ColorPicker.Base.uiLibrary.Bootstrap.4.html" />
+    <Content Include="examples\colorpicker\ColorPicker.Base.uiLibrary.MaterialDesign.html" />
+    <Content Include="examples\colorpicker\ColorPicker.Base.value.Get.html" />
+    <Content Include="examples\colorpicker\ColorPicker.Base.value.HTML.html" />
+    <Content Include="examples\colorpicker\ColorPicker.Base.value.Javascript.html" />
+    <Content Include="examples\colorpicker\ColorPicker.Base.value.Set.html" />
+    <Content Include="examples\colorpicker\index.html" />
     <Content Include="examples\core\Core.Base.formatDate.1.html" />
     <Content Include="examples\core\Core.Base.formatDate.2.html" />
     <Content Include="examples\core\Core.Base.formatDate.3.html" />
@@ -475,8 +488,6 @@
     <Content Include="examples\slider\Slider.Base.destroy.sample.html" />
     <Content Include="examples\slider\Slider.Base.max.JS.Config.html" />
     <Content Include="examples\slider\Slider.Base.min.JS.Config.html" />
-    <Content Include="examples\slider\Slider.Base.orientation.horizontal.html" />
-    <Content Include="examples\slider\Slider.Base.orientation.vertical.html" />
     <Content Include="examples\slider\Slider.Base.slide.sample.html" />
     <Content Include="examples\slider\Slider.Base.uiLibrary.Bootstrap.3.html" />
     <Content Include="examples\slider\Slider.Base.uiLibrary.Bootstrap.4.html" />
@@ -485,6 +496,8 @@
     <Content Include="examples\slider\Slider.Base.value.HTML.html" />
     <Content Include="examples\slider\Slider.Base.value.Javascript.html" />
     <Content Include="examples\slider\Slider.Base.value.Set.html" />
+    <Content Include="examples\slider\Slider.Base.width.HTML.Config.html" />
+    <Content Include="examples\slider\Slider.Base.width.JS.Config.html" />
     <Content Include="examples\tests\ajax-sourced-data.html" />
     <Content Include="examples\tests\tempdatepicker.html" />
     <Content Include="examples\tests\tempdialog.html" />
@@ -493,6 +506,7 @@
     <Content Include="examples\tests\positions-datepicker.html" />
     <Content Include="examples\tests\positions-dropdown.html" />
     <Content Include="examples\tests\tempgrid.html" />
+    <Content Include="examples\tests\tempslider.html" />
     <Content Include="examples\tests\temptree.html" />
     <Content Include="examples\timepicker\index.html" />
     <Content Include="examples\timepicker\TimePicker.Base.change.sample.html" />

diff --git a/Gruntfile.js b/Gruntfile.js
@@ -147,7 +147,7 @@
                     'dist/modular/css/colorpicker.css': ['dist/modular/css/colorpicker.code.css'],
 
                     'dist/combined/js/gijgo.js': ['src/header.txt', 'src/core/js/core.js', 'src/picker/js/picker.base.js', 'dist/modular/js/dialog.code.js', 'dist/modular/js/draggable.code.js', 'dist/modular/js/droppable.code.js', 'dist/modular/js/grid.code.js', 'dist/modular/js/tree.code.js', 'dist/modular/js/checkbox.code.js', 'dist/modular/js/editor.code.js', 'dist/modular/js/dropdown.code.js', 'dist/modular/js/datepicker.code.js', 'dist/modular/js/timepicker.code.js', 'dist/modular/js/datetimepicker.code.js', 'dist/modular/js/slider.code.js', 'dist/modular/js/colorpicker.code.js'],
-                    'dist/combined/css/gijgo.css': ['src/core/css/core.css', 'src/icons/icons.css', 'dist/modular/css/dialog.code.css', 'dist/modular/css/grid.code.css', 'dist/modular/css/tree.code.css', 'dist/modular/css/checkbox.code.css', 'dist/modular/css/editor.code.css', 'dist/modular/css/dropdown.code.css', 'dist/modular/css/datepicker.code.css', 'dist/modular/css/timepicker.code.css', 'dist/modular/css/datetimepicker.code.css', 'dist/modular/css/colorpicker.code.css'],
+                    'dist/combined/css/gijgo.css': ['src/core/css/core.css', 'src/icons/icons.css', 'dist/modular/css/dialog.code.css', 'dist/modular/css/grid.code.css', 'dist/modular/css/tree.code.css', 'dist/modular/css/checkbox.code.css', 'dist/modular/css/editor.code.css', 'dist/modular/css/dropdown.code.css', 'dist/modular/css/datepicker.code.css', 'dist/modular/css/timepicker.code.css', 'dist/modular/css/datetimepicker.code.css', 'dist/modular/css/slider.code.css', 'dist/modular/css/colorpicker.code.css'],
                     'dist/combined/js/messages/messages.bg-bg.js': ['src/dialog/js/messages/messages.bg-bg.js', 'src/grid/js/messages/messages.bg-bg.js', 'src/editor/js/messages/messages.bg-bg.js', 'src/core/js/messages/messages.bg-bg.js'],
                     'dist/combined/js/messages/messages.fr-fr.js': ['src/dialog/js/messages/messages.fr-fr.js', 'src/grid/js/messages/messages.fr-fr.js', 'src/editor/js/messages/messages.fr-fr.js', 'src/core/js/messages/messages.fr-fr.js'],
                     'dist/combined/js/messages/messages.de-de.js': ['src/dialog/js/messages/messages.de-de.js', 'src/grid/js/messages/messages.de-de.js', 'src/editor/js/messages/messages.de-de.js', 'src/core/js/messages/messages.de-de.js'],

diff --git a/dist/combined/css/gijgo.css b/dist/combined/css/gijgo.css
@@ -2548,6 +2548,121 @@ ul.gj-list-md li.disabled > [data-role="wrapper"] > [data-role="expander"] {
     font-size: 22px;
 }
 
+.gj-slider {
+    position: relative;
+    padding: 8px 6px;
+}
+
+.gj-slider [role="track"] {
+    width: 100%;
+}
+
+.gj-slider [role="progress"] {
+    position: absolute;
+    z-index: 1203;
+}
+
+.gj-slider [role="handle"] {
+    position: absolute;
+}
+
+.gj-slider-md [role="track"] {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    color: #fff;
+    text-align: center;
+    background-color: #e9ecef;
+    height: 2px;
+    background-color: rgba(0,0,0,.26);
+}
+
+.gj-slider-md [role="progress"] {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    color: #fff;
+    text-align: center;
+    height: 2px;
+    background-color: #536DFE; /* Indigo A200 */
+    top: 8px;
+    left: 6px;
+}
+
+.gj-slider-md [role="handle"] {
+    top: 3px;
+    left: 0px;
+    width: 12px;
+    height: 12px;
+    background-color: #536DFE; /* Indigo A200 */
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);
+    filter: none;
+    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
+    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
+    border: 0px solid transparent;
+    border-radius: 50%;
+    cursor: pointer;
+    z-index: 1204;
+}
+
+/* Bootstrap */
+.gj-slider-bootstrap [role="track"] {
+    border-radius: 4px;
+    height: 10px;
+}
+
+.gj-slider-bootstrap [role="progress"] {
+    height: 10px;
+    border-radius: 4px;
+    top: 8px;
+    left: 6px;
+    transition: none;
+}
+
+.gj-slider-bootstrap [role="handle"] {
+    top: 2px;
+    left: 0px;
+    width: 20px;
+    height: 20px;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);
+    filter: none;
+    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
+    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
+    border: 0px solid transparent;
+    border-radius: 50%;
+    cursor: pointer;
+    z-index: 1204;
+}
+
+.gj-slider-bootstrap-3 [role="handle"] {
+    background-color: #337ab7;
+    background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
+    background-image: -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
+    background-image: linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%);
+    background-repeat: repeat-x;
+}
+
+.gj-slider-bootstrap-4 [role="handle"] {
+    background-color: #007bff;
+    background-image: -webkit-linear-gradient(top, #007bff 0%, #2e6da4 100%);
+    background-image: -o-linear-gradient(top, #007bff 0%, #2e6da4 100%);
+    background-image: linear-gradient(to bottom, #007bff 0%, #2e6da4 100%);
+    background-repeat: repeat-x;
+}
 
 
 .gj-colorpicker [role="right-icon"] {

diff --git a/dist/combined/css/gijgo.min.css b/dist/combined/css/gijgo.min.css
diff --git a/dist/modular/js/draggable.js b/dist/modular/js/draggable.js
@@ -1,5 +1,5 @@
 /*
- * Gijgo Draggable v1.9.7
+ * Gijgo Draggable v1.9.9
  * http://gijgo.com/draggable
  *
  * Copyright 2014, 2018 gijgo.com

diff --git a/dist/modular/js/slider.js b/dist/modular/js/slider.js
@@ -1,5 +1,5 @@
 /*
- * Gijgo Slider v1.9.7
+ * Gijgo Slider v1.9.9
  * http://gijgo.com/slider
  *
  * Copyright 2014, 2018 gijgo.com

diff --git a/examples/tests/tempslider.html b/examples/tests/tempslider.html
@@ -0,0 +1,23 @@
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Bootstrap Slider</title>
+    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/js/gijgo.min.js" type="text/javascript"></script>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/css/gijgo.min.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+    <input id="slider" width="300" />
+    Value: <span id="value"></span>
+    <script>
+        $('#slider').slider({
+            uiLibrary: 'bootstrap',
+            slide: function (e, value) {
+                document.getElementById('value').innerText = value;
+            }
+        });
+    </script>
+</body>
+</html>