@widgetic/editor 3.11.4 → 4.0.2

package/css/controls/control-color.styl

@@ -1,423 +0,0 @@
-.input-color
-	@extends .control
-	input
-		text-transform uppercase
-		padding 0 40px 0 13px
-	.sp-replacer
-		width 24px
-		height 24px
-		position absolute
-		top 5px
-		right 5px
-		cursor pointer
-		border-radius 2px
-	.sp-dd
-		display none
-	.sp-preview
-		position absolute
-		left 0
-		right 0
-		bottom 0
-		top 0
-		.sp-preview-inner
-			box-shadow inset 0px 0px 3px rgba(0,0,0,0.20)
-	.color-preview
-		display none
-
-.sp-picker-container
-	width 198px
-	background #FFF
-	border 1px solid #cbcbcb
-	.input-spinner input
-		padding 0 10px
-	.sp-alpha-enabled &
-		width 226px
-.sp-input
-	@extends .control-input
-
-.sp-container
-	position static !important
-	display inline-block
-	overflow hidden
-	z-index 2
-	.fullscreen &
-		z-index 2147483647
-
-.sp-container.sp-flat
-	position relative
-
-.sp-top
-	position relative
-	width 100%
-	display inline-block
-
-.sp-top-inner
-	position relative
-	height 168px
-	font-size 0
-	text-align left
-	display inline-block
-
-.sp-color
-.sp-hue
-	display inline-block
-	position relative
-	height 100%
-	border-radius 2px
-.sp-color
-	width 168px
-	height 168px
-	overflow hidden
-.sp-hue
-	width 19px
-	margin-left 10px
-	box-shadow inset 0 0 5px rgba(0,0,0,0.3)
-.sp-fill
-	display none
-
-.sp-sat
-.sp-val
-	position absolute
-	top 0
-	left 0
-	bottom 0
-	right 0
-.sp-val
-	box-shadow inset 0 0 10px rgba(0,0,0,0.15)
-	border-radius 2px
-	overflow hidden
-
-.sp-alpha-enabled .sp-top
-	margin-bottom 10px
-.sp-alpha-enabled
-	.sp-alpha, .sp-alpha-step
-		display inline-block
-.sp-alpha-inner
-	box-shadow inset 0 0 5px rgba(0,0,0,0.3)
-.sp-alpha-handle
-	position absolute
-	top 0
-	cursor pointer
-	height 7px
-	left -2px
-	right -2px
-	&:after
-		content ""
-		position absolute
-		border 2px solid #fff
-		left 0
-		right 0
-		bottom 0
-		top 0
-		box-shadow 0 0 1px 1px rgba(0,0,0,0.2)
-		border-radius 4px
-.sp-slider
-	position absolute
-	top 0
-	cursor pointer
-	height 7px
-	left -2px
-	right -2px
-	&:after
-		content ""
-		position absolute
-		border 2px solid #fff
-		left 0
-		right 0
-		bottom 0
-		top 0
-		box-shadow 0 0 1px 1px rgba(0,0,0,0.2)
-		border-radius 4px
-
-.sp-alpha
-	display none
-	position relative
-	height 168px
-	vertical-align top
-	width 18px
-	margin-left 10px
-
-.sp-alpha-inner
-   border-radius 2px
-
-.sp-hue
-.sp-alpha-inner
-   box-shadow inset 0 0 3px 3px rgba(0,0,0,0.2)
-.sp-val
-	border-radius 2px
-	overflow hidden
-	box-shadow inset 0 0 5px 2px rgba(0,0,0,0.1)
-/* Don't allow text selection */
-.sp-container
-.sp-replacer
-.sp-preview
-.sp-dragger
-.sp-slider
-.sp-alpha
-.sp-alpha-handle
-.sp-container.sp-dragging .sp-input
-.sp-container button
-	user-select none
-
-.sp-container.sp-input-disabled .sp-input-container
-.sp-container.sp-buttons-disabled .sp-button-container
-.sp-palette-only .sp-picker-container
-.sp-palette-disabled .sp-palette-container 
-.sp-initial-disabled .sp-initial 
-	display none
-.sp-dragging
-	cursor pointer
-
-/* Gradients for hue, saturation and value instead of images.  Not pretty... but it works */
-@css{
-	.sp-sat {
-		background-image: -webkit-gradient(linear,  0 0, 100% 0, from(#FFF), to(rgba(204, 154, 129, 0)));
-		background-image: -webkit-linear-gradient(left, #FFF, rgba(204, 154, 129, 0));
-		background-image: -moz-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
-		background-image: -o-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
-		background-image: -ms-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
-		background-image: linear-gradient(to right, #fff, rgba(204, 154, 129, 0));
-		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr=#FFFFFFFF, endColorstr=#00CC9A81)";
-		filter : progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr='#FFFFFFFF', endColorstr='#00CC9A81');
-	}
-	.sp-val {
-		background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000000), to(rgba(204, 154, 129, 0)));
-		background-image: -webkit-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0));
-		background-image: -moz-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
-		background-image: -o-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
-		background-image: -ms-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
-		background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0));
-		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81, endColorstr=#FF000000)";
-		filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC9A81', endColorstr='#FF000000');
-	}
-
-	.sp-hue {
-		background: -moz-linear-gradient(bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
-		background: -ms-linear-gradient(bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
-		background: -o-linear-gradient(bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
-		background: -webkit-gradient(linear, left bottom, left top, from(#ff0000), color-stop(0.17, #ffff00), color-stop(0.33, #00ff00), color-stop(0.5, #00ffff), color-stop(0.67, #0000ff), color-stop(0.83, #ff00ff), to(#ff0000));
-		background: -webkit-linear-gradient(bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
-	}
-
-	/* IE filters do not support multiple color stops.
-	   Generate 6 divs, line them up, and do two color gradients for each.
-	   Yes, really.
-	 */
-
-	.sp-1 {
-		height:17%;
-		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffff00');
-	}
-	.sp-2 {
-		height:16%;
-		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#00ff00');
-	}
-	.sp-3 {
-		height:17%;
-		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#00ffff');
-	}
-	.sp-4 {
-		height:17%;
-		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffff', endColorstr='#0000ff');
-	}
-	.sp-5 {
-		height:16%;
-		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#ff00ff');
-	}
-	.sp-6 {
-		height:17%;
-		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff', endColorstr='#ff0000');
-	}
-
-	/* Clearfix hack */
-	.sp-cf:before, .sp-cf:after { content: ""; display: table; }
-	.sp-cf:after { clear: both; }
-	.sp-cf { *zoom: 1; }
-
-	/* Mobile devices, make hue slider bigger so it is easier to slide */
-	@media (max-device-width: 480px) {
-		.sp-color { right: 40%; }
-		.sp-hue { left: 63%; }
-	}
-}
-
-.sp-dragger
-	border-radius 5px
-	width 8px
-	height 8px
-	border 1px solid #fff
-	cursor pointer
-	position absolute
-	box-shadow 0 0 2px 2px rgba(0,0,0,0.2)
-	top 0
-	left 0
-
-/* Basic display options (colors, fonts, global widths) */
-.sp-container
-	border-radius 2px
-	overflow hidden
-	background-color #f0f0f0
-	padding 2px
-
-.sp-container
-.sp-container button
-.sp-color
-.sp-hue
-	box-sizing border-box
-.sp-top
-	margin-bottom 3px
-
-/* Input */
-.sp-alpha-step
-	display none
-	.spinner-button
-		display none
-
-.sp-input-container
-	float right
-	margin-bottom 4px
-.sp-input-container 
-	&.focus
-		box-shadow none !important
-	.sp-input
-		display inline-block
-	.sp-input
-	.sp-alpha-step
-		vertical-align top
-	.sp-input
-		width 88px
-		padding 0 10px
-		text-transform uppercase
-	.sp-alpha-step
-		margin-left 10px
-		width 58px    
-// .sp-initial-disabled  .sp-input-container
-//     width 100%
-/* Initial */
-.sp-initial
-	float left
-	border solid 1px #cbcbcb
-	border-radius 2px
-	overflow hidden
-	.sp-thumb-el 
-		cursor pointer
-		background-position -6px 0
-	.sp-thumb-el:first-child
-		background-position 0 0
-	span
-		width 29px
-		height 33px
-		border none
-		display block
-		float left
-		margin 0
-.sp-input.sp-validation-error
-	border 1px solid #fdb0b1 !important
-	&:focus
-		box-shadow 0 0 0 2px #f9e1e1 !important
-@css{
-.sp-picker-container , .sp-palette-container
-{
-	float:left;
-	position: relative;
-	padding: 10px;
-}
-.sp-thumb-el
-{
-	position:relative;
-
-}
-}
-/* Replacer (the little preview div that shows up instead of the <input>) */
-.sp-replacer
-	overflow hidden
-.sp-preview
-	z-index 0
-
-.sp-palette
-	*width 220px
-	max-width 220px
-.sp-palette .sp-thumb-el
-	width 16px
-	height 16px
-	margin 2px 1px
-	border solid 1px #d0d0d0
-
-@css{
-/* Buttons: http://hellohappy.org/css3-buttons/ */
-.sp-container button {
-  background-color: #eeeeee;
-  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
-  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
-  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
-  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
-  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
-  background-image: linear-gradient(to bottom, #eeeeee, #cccccc);
-  border: 1px solid #ccc;
-  border-bottom: 1px solid #bbb;
-  border-radius: 3px;
-  color: #333;
-  font-size: 14px;
-  line-height: 1;
-  padding: 5px 4px;
-  text-align: center;
-  text-shadow: 0 1px 0 #eee;
-  vertical-align: middle;
-}
-.sp-container button:hover {
-	background-color: #dddddd;
-	background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
-	background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
-	background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
-	background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
-	background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
-	background-image: linear-gradient(to bottom, #dddddd, #bbbbbb);
-	border: 1px solid #bbb;
-	border-bottom: 1px solid #999;
-	cursor: pointer;
-	text-shadow: 0 1px 0 #ddd;
-}
-.sp-container button:active {
-	border: 1px solid #aaa;
-	border-bottom: 1px solid #888;
-	-webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
-	-moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
-	-ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
-	-o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
-	box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
-}
-.sp-cancel
-{
-	font-size: 11px;
-	color: #d93f3f !important;
-	margin:0;
-	padding:2px;
-	margin-right: 5px;
-	vertical-align: middle;
-	text-decoration:none;
-
-}
-.sp-cancel:hover
-{
-	color: #d93f3f !important;
-	text-decoration: underline;
-}
-
-
-.sp-palette span:hover, .sp-palette span.sp-thumb-active
-{
-	border-color: #000;
-}
-
-.sp-preview, .sp-alpha, .sp-thumb-el
-{
-	position:relative;
-	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
-}
-.sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner
-{
-	display:block;
-	position:absolute;
-	top:0;left:0;bottom:0;right:0;
-}
-}

package/css/controls/control-date_time.styl

@@ -1,191 +0,0 @@
-.control-date-time
-	.input-with-icon + .input-icon
-		margin-left 15px
-
-.control-input.input-with-icon
-	display inline-block
-	vertical-align middle
-	width 310px
-	height 35px
-
-.input-icon
-	width 25px
-	height 25px
-	background url('../img/calendar-input-icons.png') -20px 2px no-repeat
-	position relative
-	cursor pointer
-	opacity .5
-	display inline-block
-	vertical-align middle
-	&:hover, &.active
-		opacity 1
-	.item-details-attributes .control:first-child &
-	.disabled &
-		opacity 0
-		visibility hidden
-		pointer-events none
-
-.date-time-popup
-	@extends .pixelPositionWrapper
-	width 348px
-	user-select none
-	min-height 242px
-	> .activateable
-		display none
-		&.active
-			display block
-	&.clock
-		width 214px
-
-.highlight
-	color litepurple
-
-.hidden
-	display none
-
-.date_time-content
-	min-height 240px
-
-.date_time-wrapper
-	color darkpurple
-	font 15px/18px 'ProximaNova-Semibold'
-	padding 0 26px 13px
-	background white
-	transition height 1ms
-	height 240px
-	box-sizing border-box
-	.clock &
-		padding-bottom 6px
-
-.date_time-header
-	text-align center
-	height 53px
-	line-height 58px
-	background #f5f5f5
-	border-bottom 1px solid litegray
-	margin 0 -26px 13px
-	.years-view &
-		margin-bottom 16px
-
-.date_time-footer
-	text-align center
-	height 50px
-	line-height 52px
-	background #fafafa
-	border-top 1px solid litegray
-	color darkpurple
-	transition background .2s ease
-	cursor pointer
-	&:hover
-		background #f5f5f5
-
-.date_time-current
-	display inline-block
-	height 53px
-	width 100%
-	cursor pointer
-	background #fafafa
-	transition background .2s ease
-	&:hover
-		background #f5f5f5
-
-.date_time-next
-.date_time-prev
-	absolute top left
-	display inline-block
-	width 64px
-	height 53px
-	cursor pointer
-	color transparent
-	background #fafafa
-	transition background .2s ease
-	text-align center
-	&:before
-		content ""
-		display inline-block
-		vertical-align middle
-		height 100%
-		width 0
-	&:after
-		content ""
-		display inline-block
-		background url('../img/calendar-input-icons.png') 0 0 no-repeat
-		width 10px
-		height 14px
-	&:hover
-		background #f5f5f5
-
-.date_time-prev
-	border-right 1px solid litegray
-
-.date_time-next
-	left auto
-	right 0
-	border-left 1px solid litegray
-	&:after
-		background-position -10px 0
-
-.date_time-cell
-	display inline-block
-	width 24px
-	height 20px
-	border-radius 2px
-	line-height 20px
-	cursor pointer
-	.months-view &, .years-view &
-		width 58px
-	&:hover
-		background-color rgba(darkpurple, 0.25)
-
-.date_time-header + table
-.datepickr-months + table
-	width 100%
-	height 160px
-	font-size 14px
-	table-layout fixed
-	thead th
-		padding-bottom 6px
-		color black
-	td
-		height 20px
-		&.prev-month .datepickr-day
-		&.next-month .datepickr-day
-			color mediumgray
-			&:hover
-				background litegray
-				color white
-		&.today .datepickr-day
-			color litepurple
-		&.selected .datepickr-day
-		&.selected .date_time-cell
-			background darkpurple
-			color white
-.hh, .mm
-	&.active
-		color litepurple
-
-// calendar css
-.datepickr-calendar
-	@extends .date_time-wrapper
-
-.datepickr-months
-	@extends .date_time-header
-
-.datepickr-current-month
-	@extends .date_time-current
-
-.datepickr-prev-month
-	@extends .date_time-prev
-
-.datepickr-next-month
-	@extends .date_time-next
-
-.datepickr-day
-	@extends .date_time-cell
-
-.input-group.clockpicker
-	display none
-
-.clockpicker-wrapper
-	display inline-block
-@import 'clock'

package/css/controls/control-dropdown.styl

@@ -1,79 +0,0 @@
-.input-dropdown
-	display block
-	width 100%
-	position relative
-	border-radius 2px
-	user-select none
-	outline none
-	cursor pointer
-	&:focus
-		box-shadow 0 0 0 2px #f0f0f0
-		.input-dropdown-list
-			display block
-			box-shadow 0 0 0 2px #f0f0f0
-			z-index 1
-		.input-dropdown-default
-			border-radius 2px 2px 0 0
-			border-bottom-color mediumgray
-			position relative
-			z-index 2
-		
-	&:hover,&:focus
-		.dropdown-arrow
-			background url('img/control-spinner-buttons-hover.png') no-repeat 0 -10px
-		.input-dropdown-default
-			color darkpurple	
-.control-dropdown.disabled
-	pointer-events none
-	opacity 0.75
-	.input-dropdown
-		cursor default
-	.dropdown-arrow
-		display none
-.input-dropdown-default
-	@extends .control-input
-	padding 0 35px 0 13px
-	line-height 35px
-	overflow hidden
-	text-overflow ellipsis
-	white-space nowrap
-
-.dropdown-arrow
-	position absolute
-	top 14px
-	right 14px
-	width 9px
-	height 10px
-	cursor pointer
-	background url('img/control-spinner-buttons.png') no-repeat 0 -10px
-
-.input-dropdown-list
-	position absolute
-	top 34px
-	left 0
-	right 0
-	margin 0
-	padding 0
-	border 1px solid mediumgray
-	border-radius 0 0 2px 2px
-	background #fff
-	display none
-	z-index 3000
-body.fullscreen
-	.input-dropdown-list
-		z-index 9998889990000
-
-.input-dropdown-list > li
-	padding 3px 13px 0 13px
-	font-size 14px
-	line-height 35px
-	color darkgray
-	font-smoothing antialiased
-	list-style-type none
-	cursor pointer
-	border-top 1px dashed mediumgray
-	background #fff
-	&:first-child
-		border-top none
-	&:hover,&.active
-		color darkpurple