/bower_components/drawingboard.js/scss/_controls.scss |
@@ -0,0 +1,89 @@ |
$controls-height: 28px; |
$controls-margin: 5px; |
$controls-dropdown-top: $controls-height + $controls-margin; |
|
%box { |
@include box-sizing(border-box); |
overflow: hidden; |
border: none; |
background-color:#eee; |
padding: 2px 4px; |
border: 1px solid #ccc; |
box-shadow: 0 1px 3px -2px hsl(0, 0%, 7%), inset 0 2px 5px 0 hsla(0, 100%, 100%, 0.3); |
-webkit-box-shadow: 0 1px 3px -2px hsl(0, 0%, 7%), inset 0 2px 5px 0 hsla(0, 100%, 100%, 0.3); |
height: $controls-height; |
} |
|
%btn { |
@extend %box; |
cursor: pointer; |
&:hover, &:focus { |
background-color: #ddd; |
} |
&:active, &.active { |
box-shadow: inset 0 1px 2px 0 hsla(0, 0%, 0%, 0.2); |
-webkit-box-shadow: inset 0 1px 2px 0 hsla(0, 0%, 0%, 0.2); |
background-color: #ddd; |
} |
&[disabled] { |
color: gray; |
&:hover, &:focus, &:active, &.active { |
background-color:#eee; |
box-shadow: 0 1px 3px -2px hsl(0, 0%, 7%), inset 0 2px 5px 0 hsla(0, 100%, 100%, 0.3); |
-webkit-box-shadow: 0 1px 3px -2px hsl(0, 0%, 7%), inset 0 2px 5px 0 hsla(0, 100%, 100%, 0.3); |
cursor: default; |
} |
} |
min-width: $controls-height; |
line-height: $controls-height/2; |
} |
|
.drawing-board-controls { |
margin: 0 auto; |
text-align: center; |
font-size: 0; |
display: table; |
border-spacing: $controls-height/3 0; |
position: relative; |
&[data-align="left"] { |
margin: 0; |
left: -$controls-height/3; |
} |
&[data-align="right"] { |
margin: 0 0 0 auto; |
right: -$controls-height/3; |
} |
.drawing-board-canvas-wrapper + &, & + .drawing-board-canvas-wrapper { |
margin-top: $controls-margin; |
} |
min-height: $controls-height; |
} |
|
.drawing-board-controls-hidden { |
@extend .drawing-board-utils-hidden; |
height: 0; |
min-height: 0; |
padding: 0; |
margin: 0; |
border: 0; |
} |
|
.drawing-board-control { |
display: table-cell; |
border-collapse: separate; |
vertical-align: middle; |
font-size: 16px; |
height: 100%; |
} |
|
.drawing-board-control-inner { |
position: relative; |
height: 100%; |
@include box-sizing(border-box); |
} |
|
.drawing-board-control > button { |
@extend %btn; |
margin: 0; |
vertical-align: middle; |
} |
/bower_components/drawingboard.js/scss/_mixins.scss |
@@ -0,0 +1,67 @@ |
@mixin display-ib { |
display: inline-block; |
*display: inline; |
*zoom: 1; |
} |
|
@mixin image-replacement($img: none, $x: 50%, $y: 50%) { |
overflow: hidden; |
*text-indent: -9999px; |
&:before { |
content: ""; |
display: block; |
width: 0; |
height: 100%; |
} |
@if $img != none { |
background-image: inline-image($img); |
background-position: $x $y; |
background-repeat: no-repeat; |
} |
} |
|
@mixin sized-image-replacement($img, $x: 50%, $y: 50%) { |
@include image-replacement($img, $x, $y); |
width: image-width($img); |
height: image-height($img); |
} |
|
// Hide from both screenreaders and browsers: h5bp.com/u |
@mixin hidden { |
display: none !important; |
visibility: hidden; |
} |
|
// Hide only visually, but have it available for screenreaders: h5bp.com/v |
@mixin visually-hidden { |
border: 0; |
clip: rect(0 0 0 0); |
height: 1px; |
margin: -1px; |
overflow: hidden; |
padding: 0; |
position: absolute; |
width: 1px; |
&.focusable:active, &.focusable:focus { |
clip: auto; |
height: auto; |
margin: 0; |
overflow: visible; |
position: static; |
width: auto; |
} |
} |
|
// Hide visually and from screenreaders, but maintain layout |
@mixin invisible { |
visibility: hidden; |
} |
|
@mixin micro-clearfix { |
&:before, &:after { |
content: " "; // 1 |
display: table; // 2 |
} |
&:after { clear: both; } |
& { *zoom: 1; } |
} |
/bower_components/drawingboard.js/scss/controls/_colors.scss |
@@ -0,0 +1,55 @@ |
.drawing-board-control-colors { |
font-size: 0; |
line-height: 0; |
} |
|
.drawing-board-control-colors-current { |
border: 1px solid #ccc; |
cursor: pointer; |
display: inline-block; |
width: $controls-height - 2px; |
height: $controls-height - 2px; |
} |
|
|
.drawing-board-control-colors-rainbows { |
display: inline-block; |
margin-left: 5px; |
position: absolute; |
left: 0; |
top: $controls-dropdown-top; |
@extend %box; |
margin-left: 0; |
z-index: 100; |
width: 250px; |
height: auto; |
padding: 4px; |
} |
|
.drawing-board-control-colors-rainbow { |
height: 18px; |
} |
|
.drawing-board-control-colors-picker:first-child { |
margin-right: 5px; |
} |
|
.drawing-board-control-colors-picker { |
display: inline-block; |
width: 18px; |
height: 18px; |
cursor: pointer; |
} |
|
.drawing-board-control-colors-picker[data-color="rgba(255, 255, 255, 1)"] { |
width: 16px; |
height: 17px; |
border: 1px solid #ccc; |
border-bottom: none; |
} |
|
.drawing-board-control-colors-picker:hover { |
width: 16px; |
height: 16px; |
border: 1px solid #555; |
} |
/bower_components/drawingboard.js/scss/controls/_size.scss |
@@ -0,0 +1,78 @@ |
.drawing-board-control-size { |
.drawing-board-control-inner { |
@extend %box; |
} |
|
&[data-drawing-board-type="range"] .drawing-board-control-inner { |
width: 75px; |
} |
|
&[data-drawing-board-type="dropdown"] .drawing-board-control-inner { |
overflow: visible; |
} |
} |
|
.drawing-board-control-size-range-input { |
position: relative; |
width: 100%; |
z-index: 100; |
margin: 0; |
padding: 0; |
border: 0; |
} |
|
%dot { |
display: block; |
background: #333; |
opacity: .8; |
} |
|
.drawing-board-control-size-range-current { |
@extend %dot; |
display: inline-block; |
opacity: .15; |
position: absolute; |
pointer-events: none; |
left: 50%; |
top: 50%; |
z-index: 50; |
} |
|
.drawing-board-control-size-dropdown-current { |
display: block; |
height: 100%; |
width: 40px; |
overflow: hidden; |
position: relative; |
span { |
@extend %dot; |
position: absolute; |
left: 50%; |
top: 50%; |
} |
} |
|
.drawing-board-control-size-dropdown { |
position: absolute; |
left: -6px; |
top: $controls-dropdown-top; |
@extend %box; |
height: auto; |
list-style-type: none; |
margin: 0; |
padding: 0; |
z-index: 100; |
li { |
display: block; |
padding: 4px; |
margin: 3px 0; |
min-height: 16px; |
&:hover { |
background: #ccc; |
} |
} |
span { |
@extend %dot; |
margin: 0 auto; |
} |
} |