scratch
/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/_drawingmode.scss |
@@ -0,0 +1,20 @@ |
.drawing-board-control-drawingmode { |
> button { |
margin-right: 2px; |
&:last-child { |
margin-right: 0; |
} |
} |
} |
|
.drawing-board-control-drawingmode-pencil-button { |
@include image-replacement("pencil.png"); |
} |
|
.drawing-board-control-drawingmode-eraser-button { |
@include image-replacement("eraser.png"); |
} |
|
.drawing-board-control-drawingmode-filler-button { |
@include image-replacement("paint-can.png"); |
} |
/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; |
} |
} |