123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846 |
- @import "table";
-
- $v-grid-row-background-color: valo-table-background-color() !default;
- $v-grid-row-stripe-background-color: scale-color($v-grid-row-background-color, $lightness: if(color-luminance($v-grid-row-background-color) < 10, 4%, -4%)) !default;
-
- $v-grid-border-color-source: $v-grid-row-background-color !default;
- $v-grid-border: flatten-list(valo-border($color: $v-grid-border-color-source, $strength: 0.8)) !default;
- $v-grid-cell-focused-border: max(2px, first-number($v-border)) solid $v-selection-color !default;
-
- $v-grid-row-height: $v-table-row-height !default;
- $v-grid-row-selected-background-color: $v-selection-color !default;
-
- $v-grid-header-font-size: $v-table-header-font-size !default;
- $v-grid-header-background-color: $v-background-color !default;
-
- $v-grid-cell-padding-horizontal: 1.5 * $v-table-cell-padding-horizontal !default;
-
- $v-grid-animations-enabled: $v-animations-enabled !default;
-
- $v-grid-details-marker-width: first-number($v-grid-border) * 2 !default;
- $v-grid-details-marker-color: $v-selection-color !default;
- $v-grid-details-border-top: valo-border($color: $v-grid-border-color-source, $strength: 0.3) !default;
- $v-grid-details-border-top-stripe: valo-border($color: $v-grid-row-stripe-background-color, $strength: 0.3) !default;
-
- $v-grid-border-size: 1px !default;
- $v-grid-border: $v-grid-border-size solid #ddd !default;
- $v-grid-cell-vertical-border: $v-grid-border !default;
- $v-grid-cell-horizontal-border: $v-grid-cell-vertical-border !default;
- $v-grid-details-border-bottom: $v-grid-cell-horizontal-border !default;
- $v-grid-details-border-bottom-stripe: $v-grid-cell-horizontal-border !default;
-
- $v-grid-border-size: 1px !default;
- $v-grid-border: $v-grid-border-size solid #ddd !default;
- $v-grid-cell-vertical-border: $v-grid-border !default;
- $v-grid-cell-horizontal-border: $v-grid-cell-vertical-border !default;
- $v-grid-cell-focused-border: 1px solid !default;
- $v-grid-header-border: $v-grid-border !default;
- $v-grid-footer-border: $v-grid-header-border !default;
-
- $v-grid-row-height: round($v-font-size * 1.5) !default;
- $v-grid-row-background-color: #fff !default;
- $v-grid-row-stripe-background-color: darken($v-grid-row-background-color, 5%) !default;
- $v-grid-row-selected-background-color: darken($v-grid-row-background-color, 25%) !default;
- $v-grid-row-focused-background-color: null !default;
-
- $v-grid-header-row-height: null !default;
- $v-grid-header-font-size: $v-font-size !default;
- $v-grid-header-background-color: $v-grid-row-background-color !default;
- $v-grid-header-drag-marked-color: $v-grid-row-selected-background-color !default;
-
- $v-grid-footer-row-height: $v-grid-header-row-height !default;
- $v-grid-footer-font-size: $v-grid-header-font-size !default;
- $v-grid-footer-background-color: $v-grid-header-background-color !default;
-
- $v-grid-cell-padding-horizontal: 10px !default;
-
- $v-grid-editor-background-color: $v-grid-row-background-color !default;
-
- $v-grid-details-marker-width: 2px !default;
- $v-grid-details-marker-color: $v-grid-row-selected-background-color !default;
- $v-grid-details-border-top: $v-grid-cell-horizontal-border !default;
- $v-grid-details-border-top-stripe: $v-grid-cell-horizontal-border !default;
- $v-grid-details-border-bottom: 1px solid darken($v-grid-row-stripe-background-color, 10%) !default;
- $v-grid-details-border-bottom-stripe: 1px solid darken($v-grid-row-background-color, 10%) !default;
-
- @import "_escalator";
-
- @mixin base-grid($primaryStyleName: v-grid) {
-
- @include base-escalator($primaryStyleName: $primaryStyleName, $background-color: $v-grid-row-background-color);
-
- .#{$primaryStyleName} {
- outline: none;
- }
-
- .#{$primaryStyleName}-scroller-vertical,
- .#{$primaryStyleName}-scroller-horizontal {
- border: $v-grid-border;
- }
-
- .#{$primaryStyleName}-scroller-vertical {
- border-left: none;
- }
-
- .#{$primaryStyleName}-scroller-horizontal {
- border-top: none;
- }
-
- .#{$primaryStyleName}-tablewrapper {
- border: $v-grid-border;
- }
-
- // Column drag and drop elements
-
- .#{$primaryStyleName} .header-drag-table {
- border-spacing: 0;
- position: relative;
- table-layout: fixed;
- width: inherit; // a decent default fallback
-
- .#{$primaryStyleName}-header {
- position: absolute;
- > .#{$primaryStyleName}-cell {
- border: $v-grid-border;
- margin-top: -10px;
- opacity: 0.9;
- filter: alpha(opacity=90); // IE8
- z-index: 30000;
- }
-
- > .#{$primaryStyleName}-drop-marker {
- background-color: $v-grid-header-drag-marked-color;
- position: absolute;
- width: 3px;
- }
- }
- }
-
- // Sidebar
-
- .#{$primaryStyleName}-sidebar.v-contextmenu {
- @include box-shadow(none);
- border-radius: 0;
- position: absolute;
- top: 0;
- right: 0;
-
- background-color: $v-grid-header-background-color;
- border: $v-grid-header-border;
- padding: 0;
- z-index: 5;
-
- &.#{$primaryStyleName}-sidebar-popup {
- right: auto;
- }
-
- .#{$primaryStyleName}-sidebar-button {
- background: transparent;
- border: none;
- color: inherit;
- cursor: pointer;
- outline: none;
- padding: 0 4px;
- text-align: right;
- line-height: 1;
-
- &[disabled] {
- cursor: default;
- }
-
- &::-moz-focus-inner {
- border: 0;
- }
-
- &:after {
- content: "\f0c9";
- display: block;
- font-family: ThemeIcons, sans-serif;
- font-size: $v-grid-header-font-size;
- }
- }
-
- &.closed {
- border-radius: 0;
- }
-
- &.open {
- .#{$primaryStyleName}-sidebar-button {
- width: 100%;
-
- &:after {
- content: "\f0c9";
- font-size: $v-grid-header-font-size;
- line-height: 1;
- }
- }
- }
-
- .v-ie &.open .#{$primaryStyleName}-sidebar-button {
- vertical-align: middle;
- }
-
- .#{$primaryStyleName}-sidebar-content {
- padding: 4px 0;
- overflow-y: auto;
- overflow-x: hidden;
-
- .gwt-MenuBar {
- .gwt-MenuItem .column-hiding-toggle {
- text-shadow: none;
- }
- }
- }
- }
-
- // Common cell styles
-
- .#{$primaryStyleName}-cell {
- background-color: $v-grid-row-background-color;
- padding: 0 $v-grid-cell-padding-horizontal;
- line-height: $v-grid-row-height;
- text-overflow: ellipsis;
-
- > * {
- line-height: $v-line-height;
- vertical-align: middle;
- }
-
- // Force div elements to inline-blocks by default to enable vertical centering
- > div {
- display: inline-block;
- }
-
- &.frozen {
- @include box-shadow(1px 0 2px rgba(0,0,0,.1));
- border-right: $v-grid-cell-vertical-border;
-
- @if $v-grid-cell-vertical-border and $v-grid-cell-vertical-border != none {
- + th,
- + td {
- border-left: none;
- }
- }
- }
- }
-
- // Rows
-
- .#{$primaryStyleName}-row > td,
- .#{$primaryStyleName}-editor-cells > div {
- border-left: $v-grid-cell-vertical-border;
- border-bottom: $v-grid-cell-horizontal-border;
-
- &:first-child {
- border-left: none;
- }
- }
-
- .#{$primaryStyleName}-editor-cells.frozen > div {
- @include box-shadow(1px 0 2px rgba(0,0,0,.1));
- border-right: $v-grid-cell-vertical-border;
- border-left: none;
- }
-
- .#{$primaryStyleName}-row-stripe > td {
- background-color: $v-grid-row-stripe-background-color;
- }
-
- .#{$primaryStyleName}-row-selected > td {
- background: $v-grid-row-selected-background-color;
- }
-
- .#{$primaryStyleName}-row-focused > td {
- background-color: $v-grid-row-focused-background-color;
- }
-
- // Header
-
- .#{$primaryStyleName}-header {
- th {
- position: relative;
- background-color: $v-grid-header-background-color;
- font-size: $v-grid-header-font-size;
- font-weight: inherit;
- border-left: $v-grid-header-border;
- border-bottom: $v-grid-header-border;
- line-height: $v-grid-header-row-height;
- text-align: left;
-
- &:first-child {
- border-left: none;
- }
- }
-
- .sort-asc,
- .sort-desc {
- padding-right: round($v-grid-header-font-size * 1.2) + $v-grid-cell-padding-horizontal;
-
- &:after {
- font-family: ThemeIcons, sans-serif;
- content: "\f0de" " " attr(sort-order);
- position: absolute;
- right: $v-grid-cell-padding-horizontal;
- font-size: round($v-grid-header-font-size * 0.85);
- }
- }
-
- .sort-desc:after {
- content: "\f0dd" " " attr(sort-order);
- }
- }
-
- .#{$primaryStyleName}-column-resize-handle {
- position: absolute;
- width: 2 * $v-grid-cell-padding-horizontal;
- right: -$v-grid-cell-padding-horizontal;
- top: 0px;
- bottom: 0px;
- cursor: col-resize;
- z-index: 10;
-
- // TODO should refactor into a mixin
- -webkit-user-select: none;
- -khtml-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- }
-
- .#{$primaryStyleName}-column-resize-simple-indicator {
- position: absolute;
- width: 3px;
- top: 0px;
- left: $v-grid-cell-padding-horizontal;
- z-index: 9001;
- background: #fff;
- box-shadow: 0px 0px 5px #000;
-
- -webkit-user-select: none;
- -khtml-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- }
-
- // Footer
-
- .#{$primaryStyleName}-footer {
- td {
- background-color: $v-grid-footer-background-color;
- font-size: $v-grid-footer-font-size;
- font-weight: inherit;
- border-left: $v-grid-footer-border;
- border-top: $v-grid-footer-border;
- border-bottom: none;
- line-height: $v-grid-footer-row-height;
-
- &:first-child {
- border-left: none;
- }
- }
- }
-
- // Header and footer
-
- .#{$primaryStyleName}-header,
- .#{$primaryStyleName}-footer {
- .#{$primaryStyleName}-cell {
- overflow: visible;
- }
- }
-
- .#{$primaryStyleName}-column-header-content,
- .#{$primaryStyleName}-column-footer-content {
- width: 100%;
- overflow: hidden;
- text-overflow: ellipsis;
- // Hackish, needed to override the "v-grid-cell > *" rule above
- line-height: $v-grid-row-height;
- vertical-align: baseline;
- }
-
- // Decorative elements
-
- .#{$primaryStyleName}-header-deco {
- border-top: $v-grid-header-border;
- border-right: $v-grid-header-border;
- background-color: $v-grid-header-background-color;
- }
-
- .#{$primaryStyleName}-footer-deco {
- border-bottom: $v-grid-footer-border;
- border-right: $v-grid-footer-border;
- background-color: $v-grid-footer-background-color;
- }
-
- .#{$primaryStyleName}-horizontal-scrollbar-deco {
- background-color: $v-grid-footer-background-color;
- border: $v-grid-footer-border;
- border-top: none;
- }
-
- // Focused cell style (common for all cells)
-
- .#{$primaryStyleName}-cell-focused {
- position: relative;
-
- &:before {
- content: "";
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- border: $v-grid-cell-focused-border;
- display: none;
- pointer-events: none;
- }
- }
-
- .#{$primaryStyleName}:focus .#{$primaryStyleName}-cell-focused:before {
- display: block;
- }
-
- .#{$primaryStyleName}.v-disabled:focus .#{$primaryStyleName}-cell-focused:before {
- // Disabled Grid should not show cell focus outline
- display: none;
- }
-
- // Editor
-
- .#{$primaryStyleName}-editor {
- position: absolute;
- z-index: 20;
- overflow: hidden;
- left: 0;
- right: 0;
- border: $v-grid-border;
- box-sizing: border-box;
- -moz-box-sizing: border-box;
- margin-top: nth($v-grid-border, 1) * -1;
- @include box-shadow(0 0 9px rgba(0,0,0,.2));
-
- // Unbuffered footer needs to be 100% width to display correctly
- &.unbuffered {
- .#{$primaryStyleName}-editor-footer {
- width: 100%;
- }
- }
- }
-
- .#{$primaryStyleName}-editor-cells {
- position: relative;
- white-space: nowrap;
-
- &.frozen {
- z-index: 2;
- }
-
- > div {
- display: inline-block;
- box-sizing: border-box;
- vertical-align: middle;
- background: $v-grid-editor-background-color;
-
- &:first-child {
- border-left: none;
- }
-
- > * {
- vertical-align: middle;
- display: inline-block;
- }
-
- .v-filterselect {
- padding-left: 0;
- }
-
- input[type="text"],
- input[type="text"].v-filterselect-input,
- input[type="password"] {
- padding-left: $v-grid-cell-padding-horizontal;
- }
-
- input[type="text"]:not(.v-filterselect-input),
- input[type="password"] {
- padding-right: $v-grid-cell-padding-horizontal / 2;
- }
-
- input[type="checkbox"] {
- margin-left: $v-grid-cell-padding-horizontal;
- }
-
- .v-textfield,
- .v-datefield,
- .v-filterselect {
- min-width: 100%;
- max-width: 100%;
- min-height: 100%;
- max-height: 100%;
- }
-
- .v-select,
- .v-select-select {
- min-width: 100%;
- max-width: 100%;
- }
-
- &.not-editable.#{$primaryStyleName}-cell {
- float: none;
- }
- }
-
- .error::before {
- position: absolute;
- display: block;
- height: 0;
- width: 0;
- content: "";
- border-top: 5px solid red;
- border-right: 5px solid transparent;
- }
-
- .error,
- .error > input {
- background-color: #fee;
- }
- }
-
- .#{$primaryStyleName}-editor-footer {
- display: table;
- height: $v-grid-row-height;
- border-top: $v-grid-cell-horizontal-border;
- margin-top: nth($v-grid-cell-horizontal-border, 1) * -1;
- background: $v-grid-row-background-color;
- padding: 0 5px;
-
- + .#{$primaryStyleName}-editor-cells > div {
- border-bottom: none;
- border-top: $v-grid-cell-horizontal-border;
- }
-
- &:first-child {
- border-top: none;
- margin-top: 0;
- border-bottom: $v-grid-cell-horizontal-border;
- margin-bottom: nth($v-grid-cell-horizontal-border, 1) * -1;
- }
- }
-
- .#{$primaryStyleName}-editor-message,
- .#{$primaryStyleName}-editor-buttons {
- display: table-cell;
- white-space: nowrap;
- vertical-align: middle;
- }
-
- .#{$primaryStyleName}-editor-message {
- width: 100%;
- position: relative;
-
- > div {
- position: absolute;
- width: 100%;
- overflow: hidden;
- text-overflow: ellipsis;
- line-height: $v-grid-row-height;
- top: 0;
- }
- }
-
- .#{$primaryStyleName}-editor-save {
- margin-right: 4px;
- }
-
- .#{$primaryStyleName}-spacer {
- // using padding since left is used with some position functions in escalator
- padding-left: $v-grid-details-marker-width - $v-grid-border-size;
- }
-
- .#{$primaryStyleName}-spacer > td {
- display: block;
- padding: 0;
-
- background-color: $v-grid-row-background-color;
- border-top: $v-grid-details-border-top;
- border-bottom: $v-grid-details-border-bottom;
- }
-
- .#{$primaryStyleName}-spacer.stripe > td {
- background-color: $v-grid-row-stripe-background-color;
- border-top: $v-grid-details-border-top-stripe;
- border-bottom: $v-grid-details-border-bottom-stripe;
- }
-
- .#{$primaryStyleName}-spacer-deco-container {
- border-top: $v-grid-border-size solid transparent; // same size as table wrapper border
- position: relative;
- top: 0; // escalator will override top for scrolling and margin-top for header offset.
- z-index: 5;
- }
-
- .#{$primaryStyleName}-spacer-deco {
- top: 0; // this will be overridden by code, but it's a good default.
- left: 0;
- width: $v-grid-details-marker-width;
- background-color: $v-grid-details-marker-color;
- position: absolute;
- height: 100%; // this will be overridden by code, but it's a good default.
- pointer-events: none;
- }
-
- // Renderers
-
- .#{$primaryStyleName}-cell > .v-progressbar {
- width: 100%;
- }
- }
-
- /**
- *
- *
- * @param {string} $primary-stylename (v-grid) -
- *
- * @group grid
- */
- @mixin valo-grid ($primary-stylename: v-grid) {
-
- @include base-grid($primary-stylename);
-
- .#{$primary-stylename} {
- @include user-select(text);
- background-color: $v-background-color;
-
- &.v-disabled {
- @include opacity($v-disabled-opacity);
- }
- }
-
- .#{$primary-stylename}-header .#{$primary-stylename}-cell {
- @include valo-gradient($v-grid-header-background-color);
- text-shadow: valo-text-shadow($font-color: valo-font-color($v-grid-header-background-color), $background-color: $v-grid-header-background-color);
- }
-
- .#{$primary-stylename}-header .#{$primary-stylename}-cell.dragged {
- @include opacity(0.5, false);
- @include transition (opacity .3s ease-in-out);
- }
-
- .#{$primary-stylename}-header .#{$primary-stylename}-cell.dragged-column-header {
- margin-top: round($v-grid-row-height/-2);
- }
-
- .#{$primary-stylename}-footer .#{$primary-stylename}-cell {
- @include valo-gradient($v-grid-footer-background-color);
- text-shadow: valo-text-shadow($font-color: valo-font-color($v-grid-footer-background-color), $background-color: $v-grid-footer-background-color);
- }
-
- .#{$primary-stylename}-header-deco {
- @include valo-gradient($v-grid-header-background-color);
- }
-
- .#{$primary-stylename}-footer-deco,
- .#{$primary-stylename}-horizontal-scrollbar-deco {
- @include valo-gradient($v-grid-footer-background-color);
- }
-
- // Selected
- .#{$primary-stylename}-row-selected {
- $grid-sel-bg: $v-grid-row-selected-background-color;
-
- > .#{$primary-stylename}-cell {
- @include valo-gradient($grid-sel-bg);
- color: valo-font-color($grid-sel-bg);
- text-shadow: valo-text-shadow($font-color: valo-font-color($grid-sel-bg), $background-color: $grid-sel-bg);
- border-color: adjust-color($grid-sel-bg, $lightness: -8%, $saturation: -8%);
- }
-
- > .#{$primary-stylename}-cell-focused:before {
- border-color: adjust-color($grid-sel-bg, $lightness: 20%);
- }
- }
-
- .#{$primary-stylename}-editor {
- @include valo-focus-style;
- border-color: $v-focus-color;
- }
-
- .#{$primary-stylename}-editor-footer {
- font-size: $v-font-size--small;
- padding: 0 round($v-layout-spacing-horizontal / 2);
- background: $v-app-background-color;
- @if $v-grid-animations-enabled {
- @include animation(valo-grid-editor-footer-animate-in 200ms 120ms backwards);
- }
- }
-
- @if $v-grid-animations-enabled {
- .#{$primary-stylename}-editor-footer:first-child {
- @include animation(valo-grid-editor-footer-animate-in-alt 200ms 120ms backwards);
- }
- }
-
- .#{$primary-stylename}-editor-cells {
- z-index: 1;
- }
-
- .#{$primary-stylename}-editor-cells > div {
- // Vertical centering for widgets
- &:before {
- content: "";
- display: inline-block;
- height: 100%;
- vertical-align: middle;
- }
-
- &.not-editable.#{$primary-stylename}-cell {
- float: none;
- }
-
- .error::before {
- border-top: round($v-unit-size / 4) solid $v-error-indicator-color;
- border-right: round($v-unit-size / 4) solid transparent;
- }
-
- .error,
- .error > input {
- // taken from @mixin valo-textfield-error-style()
- background-color: scale-color($v-error-indicator-color, $lightness: 98%);
- }
-
- .v-textfield,
- .v-textfield-focus,
- .v-datefield,
- .v-datefield .v-textfield-focus,
- .v-filterselect-input,
- .v-filterselect-input:focus {
- border: none;
- border-radius: 0;
- background: transparent;
-
- @if $v-textfield-bevel {
- @include box-shadow(valo-bevel-and-shadow($bevel: $v-textfield-bevel));
- } @else {
- @include box-shadow(none);
- }
- }
-
- input[type="text"].v-datefield-textfield {
- padding-left: $v-unit-size * 1.2;
- }
-
- .v-textfield-focus,
- .v-datefield .v-textfield-focus,
- .v-filterselect-input:focus {
- position: relative;
- }
-
- .v-select {
- padding-left: round($v-grid-cell-padding-horizontal / 2);
- padding-right: round($v-grid-cell-padding-horizontal / 2);
- }
-
- .v-checkbox {
- margin: 0 round($v-grid-cell-padding-horizontal / 2) 0 $v-grid-cell-padding-horizontal;
-
- > input[type="checkbox"] {
- margin-left: 0;
- }
-
- > label {
- white-space: nowrap;
- }
- }
- }
-
- .#{$primary-stylename}-editor-message > div:before {
- display: inline-block;
- @include valo-error-indicator-style($is-pseudo-element: true);
- }
-
- .#{$primary-stylename}-editor-save,
- .#{$primary-stylename}-editor-cancel {
- @include valo-link-style;
- font-weight: $v-font-weight + 100;
- text-decoration: none;
- border: none;
- background: transparent;
- padding: round($v-layout-spacing-vertical / 2) round($v-layout-spacing-horizontal / 2);
- margin: 0;
- outline: none;
- }
-
- .#{$primary-stylename}-spacer {
- margin-top: first-number($v-grid-border) * -1;
- }
-
- // Sidebar
- .#{$primary-stylename}-sidebar.v-contextmenu {
- &.open {
-
- .#{$primary-stylename}-sidebar-content {
- margin: 0 0 2px;
- padding: 4px 4px 2px;
- overflow-y: auto;
- overflow-x: hidden;
- }
- }
-
- &.closed {
- @include valo-gradient($v-grid-header-background-color);
- }
- }
-
- // Customize scrollbars
- .#{$primary-stylename}-scroller {
- &::-webkit-scrollbar {
- border: none;
- }
-
- &::-webkit-scrollbar-thumb {
- border-radius: 10px;
- border: 4px solid transparent;
- background: if(is-dark-color($v-grid-header-background-color), rgba(255,255,255,.3), rgba(0,0,0,.3));
- -webkit-background-clip: content-box;
- background-clip: content-box;
- }
- }
-
- .#{$primary-stylename}-scroller-vertical::-webkit-scrollbar-thumb {
- min-height: 30px;
- }
-
- .#{$primary-stylename}-scroller-horizontal::-webkit-scrollbar-thumb {
- min-width: 30px;
- }
-
- // Drag and drop badge
- .#{$primary-stylename}-row-drag-badge {
- background-color: red;
- color: white;
- display: block;
- width: 30px;
- height: 30px;
- border-radius: 10px;
- line-height: 30px;
- text-align: center;
- float: left;
- }
- }
-
-
- @include keyframes(valo-grid-editor-footer-animate-in) {
- 0% {
- margin-top: -$v-grid-row-height;
- }
- }
-
- @include keyframes(valo-grid-editor-footer-animate-in-alt) {
- 0% {
- margin-bottom: -$v-grid-row-height - first-number($v-grid-cell-horizontal-border);
- }
- 100% {
- margin-bottom: first-number($v-grid-cell-horizontal-border) * -1;
- }
- }
|