Skip to content

Commit

Permalink
Merge pull request #18 from hiltonjanfield/new-splitter-handles
Browse files Browse the repository at this point in the history 
New splitter handles
  • Loading branch information
Hilton Janfield committed Sep 14, 2015
2 parents 78b94f5 + baecd7d commit ce0fec3
Show file tree
Hide file tree
Showing 4 changed files with 230 additions and 28 deletions.
78 changes: 69 additions & 9 deletions css/jquery.enhsplitter.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,11 @@
*
* https://github.com/hiltonjanfield/jquery.enhsplitter
*
* All classes to begin with 'splitter'.
* Standard container/object classes use _ separator (.splitter_container, .splitter_panel, etc.)
* Modifier/option classes use - separator (.splitter-vertical, .splitter-handle-dots, etc.)
*
* Do not make changes to the CSS file; edit the LESS file and compile.
*/
.splitter_container {
position: relative;
Expand Down Expand Up @@ -76,9 +81,9 @@
border-color: #000000;
}
.splitter_bar.splitter-invisible {
background: none!important;
border: none!important;
box-shadow: none!important;
background: none !important;
border: none !important;
box-shadow: none !important;
}
.splitter_bar.splitter-invisible .splitter_handle,
.splitter_bar.splitter-handle-none .splitter_handle {
Expand All @@ -97,16 +102,19 @@
margin-top: -25px;
height: 50px;
}
.splitter-vertical > .splitter_bar.splitter-handle-default > .splitter_handle {
.splitter-vertical > .splitter_bar.splitter-handle-default > .splitter_handle,
.splitter-vertical > .splitter_bar.splitter-handle-stripes > .splitter_handle {
width: 3px;
border-left: 1px solid #999999;
border-right: 1px solid #999999;
background-color: transparent;
}
.splitter-vertical > .splitter_bar.splitter-handle-default > .splitter_handle:hover {
.splitter-vertical > .splitter_bar.splitter-handle-default > .splitter_handle:hover,
.splitter-vertical > .splitter_bar.splitter-handle-stripes > .splitter_handle:hover {
border-color: #666666;
}
.splitter-vertical > .splitter_bar.splitter-handle-default > .splitter_handle:active {
.splitter-vertical > .splitter_bar.splitter-handle-default > .splitter_handle:active,
.splitter-vertical > .splitter_bar.splitter-handle-stripes > .splitter_handle:active {
border-color: #000000;
}
.splitter-vertical > .splitter_bar.splitter-handle-bar > .splitter_handle {
Expand All @@ -115,6 +123,26 @@
.splitter-vertical > .splitter_bar.splitter-handle-block > .splitter_handle {
width: 5px;
}
.splitter-vertical > .splitter_bar.splitter-handle-dots > .splitter_handle {
margin-left: -1px;
background-color: transparent;
background-image: radial-gradient(circle 3px at 50% 10%, #666666 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 30%, #666666 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 50%, #666666 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 70%, #666666 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 90%, #666666 1.5px, transparent 2px);
}
.splitter-vertical > .splitter_bar.splitter-handle-dots > .splitter_handle:hover,
.splitter-vertical > .splitter_bar.splitter-handle-dots > .splitter_handle:active {
background-image: radial-gradient(circle 3px at 50% 10%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 30%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 50%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 70%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 90%, #000000 1.5px, transparent 2px);
}
.splitter-vertical > .splitter_bar.splitter-handle-lotsofdots > .splitter_handle {
height: 100px;
margin-top: -50px;
margin-left: -1px;
background-color: transparent;
background-image: radial-gradient(circle 1px at 50% 5%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 10%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 15%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 20%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 25%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 30%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 35%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 40%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 45%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 55%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 60%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 65%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 70%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 75%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 80%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 85%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 90%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 95%, #666666 1.5px, transparent 1.5px);
}
.splitter-vertical > .splitter_bar.splitter-handle-lotsofdots > .splitter_handle:hover,
.splitter-vertical > .splitter_bar.splitter-handle-lotsofdots > .splitter_handle:active {
background-color: #f0f0f0;
}
.splitter-horizontal > .splitter_bar {
border-top: 1px solid #eeeeee;
border-bottom: 1px solid #666666;
Expand All @@ -126,17 +154,20 @@
.splitter-horizontal > .splitter_bar > .splitter_handle {
width: 50px;
}
.splitter-horizontal > .splitter_bar.splitter-handle-default > .splitter_handle {
.splitter-horizontal > .splitter_bar.splitter-handle-default > .splitter_handle,
.splitter-horizontal > .splitter_bar.splitter-handle-stripes > .splitter_handle {
height: 3px;
margin-top: 1px;
border-top: 1px solid #999999;
border-bottom: 1px solid #999999;
background-color: transparent;
}
.splitter-horizontal > .splitter_bar.splitter-handle-default > .splitter_handle:hover {
.splitter-horizontal > .splitter_bar.splitter-handle-default > .splitter_handle:hover,
.splitter-horizontal > .splitter_bar.splitter-handle-stripes > .splitter_handle:hover {
border-color: #666666;
}
.splitter-horizontal > .splitter_bar.splitter-handle-default > .splitter_handle:active {
.splitter-horizontal > .splitter_bar.splitter-handle-default > .splitter_handle:active,
.splitter-horizontal > .splitter_bar.splitter-handle-stripes > .splitter_handle:active {
border-color: #000000;
}
.splitter-horizontal > .splitter_bar.splitter-handle-bar > .splitter_handle {
Expand All @@ -147,6 +178,26 @@
height: 5px;
margin-top: 1px;
}
.splitter-horizontal > .splitter_bar.splitter-handle-dots > .splitter_handle {
height: 100%;
margin-top: -1px;
background-color: transparent;
background-image: radial-gradient(circle 3px at 10% 50%, #666666 1.5px, transparent 2px), radial-gradient(circle 3px at 30% 50%, #666666 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 50%, #666666 1.5px, transparent 2px), radial-gradient(circle 3px at 70% 50%, #666666 1.5px, transparent 2px), radial-gradient(circle 3px at 90% 50%, #666666 1.5px, transparent 2px);
}
.splitter-horizontal > .splitter_bar.splitter-handle-dots > .splitter_handle:hover,
.splitter-horizontal > .splitter_bar.splitter-handle-dots > .splitter_handle:active {
background-image: radial-gradient(circle 3px at 10% 50%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 30% 50%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 50%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 70% 50%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 90% 50%, #000000 1.5px, transparent 2px);
}
.splitter-horizontal > .splitter_bar.splitter-handle-lotsofdots > .splitter_handle {
height: 100%;
width: 100px;
background-color: transparent;
background-image: radial-gradient(circle 1px at 5% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 10% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 15% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 20% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 25% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 30% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 35% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 40% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 45% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 55% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 60% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 65% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 70% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 75% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 80% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 85% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 90% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 95% 50%, #666666 1.5px, transparent 1.5px);
}
.splitter-horizontal > .splitter_bar.splitter-handle-lotsofdots > .splitter_handle:hover,
.splitter-horizontal > .splitter_bar.splitter-handle-lotsofdots > .splitter_handle:active {
background-color: #f0f0f0;
}
.splitter_container.splitter-active > .splitter_bar {
z-index: 1000;
/* Important to keep z-index of active splitter above .splitterMask. */
Expand All @@ -159,6 +210,15 @@
.splitter_container.splitter-active > .splitter_bar.splitter-handle-block > .splitter_handle {
background-color: #000000;
}
.splitter_container.splitter-active.splitter-vertical > .splitter_bar.splitter-handle-dots > .splitter_handle {
background-image: radial-gradient(circle 3px at 50% 10%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 30%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 50%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 70%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 90%, #000000 1.5px, transparent 2px);
}
.splitter_container.splitter-active.splitter-horizontal > .splitter_bar.splitter-handle-dots > .splitter_handle {
background-image: radial-gradient(circle 3px at 10% 50%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 30% 50%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 50%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 70% 50%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 90% 50%, #000000 1.5px, transparent 2px);
}
.splitter_container.splitter-active.splitter-vertical > .splitter_bar.splitter-handle-lotsofdots > .splitter_handle {
background-color: #f0f0f0;
}
.splitter_mask {
position: fixed;
left: 0;
Expand Down
163 changes: 150 additions & 13 deletions css/jquery.enhsplitter.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,11 @@
*
* https://github.com/hiltonjanfield/jquery.enhsplitter
*
* All classes to begin with 'splitter'.
* Standard container/object classes use _ separator (.splitter_container, .splitter_panel, etc.)
* Modifier/option classes use - separator (.splitter-vertical, .splitter-handle-dots, etc.)
*
* Do not make changes to the CSS file; edit the LESS file and compile.
*/

@splitter_color: silver;
Expand Down Expand Up @@ -106,9 +111,9 @@
}

&.splitter-invisible {
background: none!important;
border: none!important;
box-shadow: none!important;
background: none !important;
border: none !important;
box-shadow: none !important;
}

&.splitter-invisible,
Expand All @@ -134,7 +139,8 @@
height: @handle_size;
}

&.splitter-handle-default {
&.splitter-handle-default,
&.splitter-handle-stripes {
> .splitter_handle {
width: 3px;
border-left: 1px solid @handle_color;
Expand Down Expand Up @@ -162,6 +168,60 @@
width: @splitter_size - 2;
}
}

&.splitter-handle-dots {
> .splitter_handle {
margin-left: -1px;
background-color: transparent;
background-image: radial-gradient(circle 3px at 50% 10%, @splitter_shadow 1.5px, transparent 2px),
radial-gradient(circle 3px at 50% 30%, @splitter_shadow 1.5px, transparent 2px),
radial-gradient(circle 3px at 50% 50%, @splitter_shadow 1.5px, transparent 2px),
radial-gradient(circle 3px at 50% 70%, @splitter_shadow 1.5px, transparent 2px),
radial-gradient(circle 3px at 50% 90%, @splitter_shadow 1.5px, transparent 2px);

&:hover,
&:active {
background-image: radial-gradient(circle 3px at 50% 10%, @handle_active 1.5px, transparent 2px),
radial-gradient(circle 3px at 50% 30%, @handle_active 1.5px, transparent 2px),
radial-gradient(circle 3px at 50% 50%, @handle_active 1.5px, transparent 2px),
radial-gradient(circle 3px at 50% 70%, @handle_active 1.5px, transparent 2px),
radial-gradient(circle 3px at 50% 90%, @handle_active 1.5px, transparent 2px);
}
}
}

&.splitter-handle-lotsofdots {
> .splitter_handle {
height: 100px;
margin-top: -50px;
margin-left: -1px;
background-color: transparent;
background-image: radial-gradient(circle 1px at 50% 5%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 50% 10%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 50% 15%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 50% 20%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 50% 25%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 50% 30%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 50% 35%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 50% 40%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 50% 45%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 50% 50%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 50% 55%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 50% 60%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 50% 65%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 50% 70%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 50% 75%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 50% 80%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 50% 85%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 50% 90%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 50% 95%, @splitter_shadow 1.5px, transparent 1.5px);

&:hover,
&:active {
background-color: #f0f0f0;
}
}
}
}
}

Expand All @@ -178,7 +238,8 @@
width: @handle_size;
}

&.splitter-handle-default {
&.splitter-handle-default,
&.splitter-handle-stripes {
> .splitter_handle {
height: 3px;
margin-top: 1px;
Expand Down Expand Up @@ -209,20 +270,96 @@
margin-top: 1px;
}
}

&.splitter-handle-dots {
> .splitter_handle {
height: 100%;
margin-top: -1px;
background-color: transparent;
background-image: radial-gradient(circle 3px at 10% 50%, @splitter_shadow 1.5px, transparent 2px),
radial-gradient(circle 3px at 30% 50%, @splitter_shadow 1.5px, transparent 2px),
radial-gradient(circle 3px at 50% 50%, @splitter_shadow 1.5px, transparent 2px),
radial-gradient(circle 3px at 70% 50%, @splitter_shadow 1.5px, transparent 2px),
radial-gradient(circle 3px at 90% 50%, @splitter_shadow 1.5px, transparent 2px);

&:hover,
&:active {
background-image: radial-gradient(circle 3px at 10% 50%, @handle_active 1.5px, transparent 2px),
radial-gradient(circle 3px at 30% 50%, @handle_active 1.5px, transparent 2px),
radial-gradient(circle 3px at 50% 50%, @handle_active 1.5px, transparent 2px),
radial-gradient(circle 3px at 70% 50%, @handle_active 1.5px, transparent 2px),
radial-gradient(circle 3px at 90% 50%, @handle_active 1.5px, transparent 2px);
}
}
}

&.splitter-handle-lotsofdots {
> .splitter_handle {
height: 100%;
width: 100px;
background-color: transparent;
background-image: radial-gradient(circle 1px at 5% 50%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 10% 50%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 15% 50%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 20% 50%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 25% 50%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 30% 50%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 35% 50%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 40% 50%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 45% 50%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 50% 50%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 55% 50%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 60% 50%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 65% 50%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 70% 50%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 75% 50%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 80% 50%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 85% 50%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 90% 50%, @splitter_shadow 1.5px, transparent 1.5px),
radial-gradient(circle 1px at 95% 50%, @splitter_shadow 1.5px, transparent 1.5px);

&:hover,
&:active {
background-color: #f0f0f0;
}
}
}
}
}

.splitter_container.splitter-active > .splitter_bar {
z-index: 1000; /* Important to keep z-index of active splitter above .splitterMask. */
.splitter_container.splitter-active {
> .splitter_bar {
z-index: 1000; /* Important to keep z-index of active splitter above .splitterMask. */

> .splitter_handle {
border-color: @handle_active;
cursor: inherit;
> .splitter_handle {
border-color: @handle_active;
cursor: inherit;
}

&.splitter-handle-bar > .splitter_handle,
&.splitter-handle-block > .splitter_handle {
background-color: @handle_active;
}
}

&.splitter-vertical > .splitter_bar.splitter-handle-dots > .splitter_handle {
background-image: radial-gradient(circle 3px at 50% 10%, @handle_active 1.5px, transparent 2px),
radial-gradient(circle 3px at 50% 30%, @handle_active 1.5px, transparent 2px),
radial-gradient(circle 3px at 50% 50%, @handle_active 1.5px, transparent 2px),
radial-gradient(circle 3px at 50% 70%, @handle_active 1.5px, transparent 2px),
radial-gradient(circle 3px at 50% 90%, @handle_active 1.5px, transparent 2px);
}

&.splitter-horizontal > .splitter_bar.splitter-handle-dots > .splitter_handle {
background-image: radial-gradient(circle 3px at 10% 50%, @handle_active 1.5px, transparent 2px),
radial-gradient(circle 3px at 30% 50%, @handle_active 1.5px, transparent 2px),
radial-gradient(circle 3px at 50% 50%, @handle_active 1.5px, transparent 2px),
radial-gradient(circle 3px at 70% 50%, @handle_active 1.5px, transparent 2px),
radial-gradient(circle 3px at 90% 50%, @handle_active 1.5px, transparent 2px),
}

&.splitter-handle-bar > .splitter_handle,
&.splitter-handle-block > .splitter_handle {
background-color: @handle_active;
&.splitter-vertical > .splitter_bar.splitter-handle-lotsofdots > .splitter_handle {
background-color: #f0f0f0;
}
}

Expand Down
Loading

0 comments on commit ce0fec3

Please sign in to comment.