scratchfoundation/scratch-paint
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-paint.git synced 2024-12-26 07:22:43 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2
scratch-paint/src/components/paint-editor/paint-editor.css

95 lines
1.8 KiB
CSS
Raw Normal View History

update css paths
2017-10-19 16:40:00 -04:00
@import "../../css/colors.css";
@import "../../css/units.css";
css
2017-08-30 10:50:24 -04:00
.editor-container {
display: flex;
flex-direction: column;
Add basic eraser and brush size picker this implements the first version of #36 and #37, in which the brush size picker is a numeric input field rather than a slider.
2017-10-25 13:37:41 -04:00
padding: calc(4 * $grid-unit);
css
2017-08-30 10:50:24 -04:00
}
.row {
display: flex;
flex-direction: row;
align-items: center;
}
Add UI formatting for edit fields This adds formatting and icons to the edit field buttons at the top of the ui, as well as some additional components for abstraction – such as `InputGroup`, `ButtonGroup` and `EditFieldButton` (which is a subcomponent of the paint editor)
2017-10-23 10:35:30 -04:00
.editor-container-top {
border-bottom: 1px dashed $ui-pane-border;
Add basic eraser and brush size picker this implements the first version of #36 and #37, in which the brush size picker is a numeric input field rather than a slider.
2017-10-25 13:37:41 -04:00
padding-bottom: calc(2 * $grid-unit);
Add UI formatting for edit fields This adds formatting and icons to the edit field buttons at the top of the ui, as well as some additional components for abstraction – such as `InputGroup`, `ButtonGroup` and `EditFieldButton` (which is a subcomponent of the paint editor)
2017-10-23 10:35:30 -04:00
}
Bring in buffered input from GUI
2017-09-06 18:01:49 -04:00
.top-align-row {
Add UI formatting for edit fields This adds formatting and icons to the edit field buttons at the top of the ui, as well as some additional components for abstraction – such as `InputGroup`, `ButtonGroup` and `EditFieldButton` (which is a subcomponent of the paint editor)
2017-10-23 10:35:30 -04:00
display: flex;
Add basic eraser and brush size picker this implements the first version of #36 and #37, in which the brush size picker is a numeric input field rather than a slider.
2017-10-25 13:37:41 -04:00
padding-top: calc(5 * $grid-unit);
Bring in buffered input from GUI
2017-09-06 18:01:49 -04:00
flex-direction: row;
}
css
2017-08-30 10:50:24 -04:00
.row + .row {
Add basic eraser and brush size picker this implements the first version of #36 and #37, in which the brush size picker is a numeric input field rather than a slider.
2017-10-25 13:37:41 -04:00
margin-top: calc(2 * $grid-unit);
css
2017-08-30 10:50:24 -04:00
}
Add UI formatting for edit fields This adds formatting and icons to the edit field buttons at the top of the ui, as well as some additional components for abstraction – such as `InputGroup`, `ButtonGroup` and `EditFieldButton` (which is a subcomponent of the paint editor)
2017-10-23 10:35:30 -04:00
.mod-dashed-border {
border-right: 1px dashed $ui-pane-border;
Add basic eraser and brush size picker this implements the first version of #36 and #37, in which the brush size picker is a numeric input field rather than a slider.
2017-10-25 13:37:41 -04:00
padding-right: calc(3 * $grid-unit);
css
2017-08-30 10:50:24 -04:00
}
$border-radius: 0.25rem;
Add UI formatting for edit fields This adds formatting and icons to the edit field buttons at the top of the ui, as well as some additional components for abstraction – such as `InputGroup`, `ButtonGroup` and `EditFieldButton` (which is a subcomponent of the paint editor)
2017-10-23 10:35:30 -04:00
.button-group-button {
display: inline-block;
border: 1px solid $ui-pane-border;
css
2017-08-30 10:50:24 -04:00
border-radius: 0;
border-left: none;
Add basic eraser and brush size picker this implements the first version of #36 and #37, in which the brush size picker is a numeric input field rather than a slider.
2017-10-25 13:37:41 -04:00
padding: calc(2 * $grid-unit);
Add UI formatting for edit fields This adds formatting and icons to the edit field buttons at the top of the ui, as well as some additional components for abstraction – such as `InputGroup`, `ButtonGroup` and `EditFieldButton` (which is a subcomponent of the paint editor)
2017-10-23 10:35:30 -04:00
}
.button-group-button:last-of-type {
css
2017-08-30 10:50:24 -04:00
border-top-right-radius: $border-radius;
border-bottom-right-radius: $border-radius;
}
Add UI formatting for edit fields This adds formatting and icons to the edit field buttons at the top of the ui, as well as some additional components for abstraction – such as `InputGroup`, `ButtonGroup` and `EditFieldButton` (which is a subcomponent of the paint editor)
2017-10-23 10:35:30 -04:00
.button-group-button:first-of-type {
Change border on disabled undo/enabled redo thanks @fsih
2017-10-26 14:03:09 -04:00
border-left: 1px solid $ui-pane-border;
css
2017-08-30 10:50:24 -04:00
border-top-left-radius: $border-radius;
border-bottom-left-radius: $border-radius;
}
Change border on disabled undo/enabled redo thanks @fsih
2017-10-26 14:03:09 -04:00
.button-group-button.mod-left-border {
border-left: 1px solid $ui-pane-border;
}
.button-group-button.mod-no-right-border {
border-right: none;
}
Add UI formatting for edit fields This adds formatting and icons to the edit field buttons at the top of the ui, as well as some additional components for abstraction – such as `InputGroup`, `ButtonGroup` and `EditFieldButton` (which is a subcomponent of the paint editor)
2017-10-23 10:35:30 -04:00
.button-group-button-icon {
Add basic eraser and brush size picker this implements the first version of #36 and #37, in which the brush size picker is a numeric input field rather than a slider.
2017-10-25 13:37:41 -04:00
width: 1.25rem;
height: 1.25rem;
Add UI formatting for edit fields This adds formatting and icons to the edit field buttons at the top of the ui, as well as some additional components for abstraction – such as `InputGroup`, `ButtonGroup` and `EditFieldButton` (which is a subcomponent of the paint editor)
2017-10-23 10:35:30 -04:00
vertical-align: middle;
}
.mod-mode-tools {
Add basic eraser and brush size picker this implements the first version of #36 and #37, in which the brush size picker is a numeric input field rather than a slider.
2017-10-25 13:37:41 -04:00
margin-left: calc(3 * $grid-unit);
css
2017-08-30 10:50:24 -04:00
}
Bring in buffered input from GUI
2017-09-06 18:01:49 -04:00
.canvas-container {
Use content-box so that we dont have edges around the border
2017-10-25 16:47:56 -04:00
width: 500px;
height: 400px;
box-sizing: content-box;
Bring in buffered input from GUI
2017-09-06 18:01:49 -04:00
border: 1px solid #e8edf1;
Add UI formatting for edit fields This adds formatting and icons to the edit field buttons at the top of the ui, as well as some additional components for abstraction – such as `InputGroup`, `ButtonGroup` and `EditFieldButton` (which is a subcomponent of the paint editor)
2017-10-23 10:35:30 -04:00
border-radius: .25rem;
Bring in buffered input from GUI
2017-09-06 18:01:49 -04:00
position: relative;
overflow: visible;
}
.mode-selector {
display: flex;
Add basic eraser and brush size picker this implements the first version of #36 and #37, in which the brush size picker is a numeric input field rather than a slider.
2017-10-25 13:37:41 -04:00
margin-right: calc(2 * $grid-unit);
Add UI formatting for edit fields This adds formatting and icons to the edit field buttons at the top of the ui, as well as some additional components for abstraction – such as `InputGroup`, `ButtonGroup` and `EditFieldButton` (which is a subcomponent of the paint editor)
2017-10-23 10:35:30 -04:00
max-width: 5.5rem;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
align-content: flex-start;
justify-content: space-between;
newlines
2017-09-06 18:10:19 -04:00
}
Reference in a new issue Copy permalink