scratch

Subversion Repositories:
Compare Path: Rev
With Path: Rev
?path1? @ 83  →  ?path2? @ 84
/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/_main.scss
@@ -0,0 +1,43 @@
@import 'compass';
.drawing-board, .drawing-board * {
@include box-sizing(content-box);
}
 
.drawing-board-utils-hidden {
display: none !important;
}
 
.drawing-board {
position: relative;
display: block;
}
 
.drawing-board-canvas-wrapper {
position: relative;
margin: 0;
border: 1px solid #ddd;
}
 
.drawing-board-canvas {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: auto;
}
 
.drawing-board-canvas {
cursor: crosshair;
z-index: 20;
}
 
.drawing-board-cursor {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
border-radius: 50%;
background: #ccc;
background: rgba(#000, 0.2);
z-index: 30;
}
/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/_download.scss
@@ -0,0 +1,3 @@
.drawing-board-control-download-button {
@include image-replacement("download.png");
}
/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/_navigation.scss
@@ -0,0 +1,13 @@
.drawing-board-control-navigation {
 
}
 
.drawing-board-control-navigation > button {
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: bold;
margin-right: 2px;
&:last-child {
margin-right: 0;
}
}
/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;
}
}
/bower_components/drawingboard.js/scss/drawingboard.nocontrol.scss
@@ -0,0 +1,2 @@
@import "mixins";
@import "main";
/bower_components/drawingboard.js/scss/drawingboard.scss
@@ -0,0 +1,8 @@
@import "mixins";
@import "main";
@import "controls";
@import "controls/colors";
@import "controls/drawingmode";
@import "controls/navigation";
@import "controls/size";
@import "controls/download";