| /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; |
| } |
