Merge pull request #675 from jhamrick/ui-prototype

Marked cells styling
This commit is contained in:
Matthias Bussonnier 2015-10-29 11:30:17 -07:00
commit 5288203a5f
2 changed files with 35 additions and 13 deletions

View File

@ -1,13 +1,37 @@
@_cell_padding_minus_border: @cell_padding - @cell_border_width;
._marked_style(@n) {
border-left-width: @n;
padding-left: @cell_padding - @n;
}
div.cell {
border: 1px solid transparent;
border: @cell_border_width solid transparent;
.vbox();
.corner-all();
.border-box-sizing();
border-width: thin;
border-width: @cell_border_width;
border-style: solid;
&.marked {
._marked_style(3px);
border-left-color: @marked_border_color_light;
/* Don't border the cells when printing */
@media print {
border-color: transparent;
}
}
&.selected {
border-color: @border_color;
border-left-color: @marked_border_color;
._marked_style(2px);
&.marked {
._marked_style(4px);
}
/* Don't border the cells when printing */
@media print {
border-color: transparent;
@ -15,22 +39,16 @@ div.cell {
}
.edit_mode &.selected {
border-color: green;
border-color: @edit_mode_border_color;
/* Don't border the cells when printing */
@media print {
border-color: transparent;
}
}
&.marked {
border-left-color: @marked_border_color;
border-left-width: 3px;
padding-left: 3px;
}
width: 100%;
padding: 5px;
padding: @_cell_padding_minus_border;
/* This acts as a spacer between cells, that is outside the border */
margin: 0px;
outline: none;
@ -87,15 +105,15 @@ div.prompt:empty {
div.unrecognized_cell {
// from text_cell
padding: 5px 5px 5px 0px;
padding: 5px @_cell_padding_minus_border 5px 0px;
.hbox();
.inner_cell {
.border-radius(@border-radius-base);
padding: 5px;
padding: @_cell_padding_minus_border;
font-weight: bold;
color: red;
border: 1px solid @light_border_color;
border: @cell_border_width solid @light_border_color;
background: darken(@cell_background, 5%);
// remove decoration from link
a {

View File

@ -16,3 +16,7 @@
@output_pre_color: black;
@notification_widget_bg: rgba(240, 240, 240, 0.5);
@marked_border_color: #009AF5;
@marked_border_color_light: #7AC7F5;
@edit_mode_border_color: green;
@cell_padding: 6px;
@cell_border_width: 1px;