| //// |
| /// @group addons |
| //// |
| |
| /// Style definitions for OSBP design mode. |
| /// @todo Definitions aren't properly derivated from the main style. |
| @mixin os-designer { |
| $font-size: 16px; |
| $unit-size: 30px; |
| $gen-margins: $unit-size * 0.1; |
| $main-color: $os-dark-contrast; |
| |
| .osbee-designer-active-selection { |
| border-radius: 3px !important; |
| border: 2px solid blue !important; |
| } |
| |
| .o-designer-active .l-control { |
| border: $v-border; |
| border-color: lightblue; |
| } |
| |
| .o-designer-active .l-control .v-gridlayout-slot { |
| border: $v-border; |
| border-color: lightpink; |
| } |
| .o-designer-overlay .popupContent { |
| height: $unit-size + $gen-margins + $gen-margins; |
| width: 100%; |
| display: block; |
| background-color: $main-color; |
| border-radius: 3px; |
| border: 2px solid $main-color; |
| /*padding: $gen-margins; */ |
| >div { |
| height: 100%; |
| } |
| } |
| |
| .o-designer-overlayed { |
| border-radius: 3px !important; |
| border: 2px solid blue !important; |
| } |
| |
| .o-designer-overlay .o-alignment-widget { |
| position: relative; |
| width: $unit-size; |
| height: $unit-size; |
| background-color: valo-font-color($main-color); |
| float: left; |
| padding: $gen-margins; |
| margin-right: $gen-margins; |
| /*margin: $unit-size * 0.1 $unit-size * 0.2 $unit-size * 0.1 $unit-size * 0.2; //o r u l*/ |
| } |
| |
| .o-alignment-widget .alignment { |
| //top: 0px; |
| //left: 0px; |
| display: block; |
| -webkit-box-sizing: border-box; |
| -moz-box-sizing: border-box; |
| height: $unit-size; |
| width: $unit-size; |
| position: absolute; |
| z-index: 10; |
| } |
| |
| .o-alignment-widget .alignment .singles { |
| position: absolute; |
| top: 0px; |
| left: 0px; |
| bottom: 0px; |
| cursor: pointer; |
| height: 22px; |
| width: 22px; |
| overflow: hidden; |
| } |
| |
| .o-alignment-widget .singles .topleft, .o-alignment-widget .singles .topcenter, |
| .o-alignment-widget .singles .topright, .o-alignment-widget .singles .middleleft, |
| .o-alignment-widget .singles .middlecenter, .o-alignment-widget .singles .middleright, |
| .o-alignment-widget .singles .bottomleft, .o-alignment-widget .singles .bottomcenter, |
| .o-alignment-widget .singles .bottomright { |
| background-color: $main-color; |
| height: 6px; |
| width: 6px; |
| display: block; |
| overflow: visible; |
| position: absolute; |
| z-index: 30; |
| } |
| |
| .o-alignment-widget .singles .o-selected { |
| background-color: $v-focus-color; |
| } |
| |
| .o-alignment-widget .singles .topleft { |
| top: 0px; |
| left: 0px; |
| } |
| |
| .o-alignment-widget .singles .topcenter { |
| top: 0px; |
| left: 0px; |
| margin-left: 8px; |
| } |
| |
| .o-alignment-widget .singles .topright { |
| top: 0px; |
| right: 0px; |
| } |
| |
| .o-alignment-widget .singles .middleleft { |
| top: 0px; |
| left: 0px; |
| margin-top: 8px; |
| } |
| |
| .o-alignment-widget .singles .middlecenter { |
| top: 0px; |
| margin-top: 8px; |
| left: 0px; |
| margin-left: 8px; |
| } |
| |
| .o-alignment-widget .singles .middleright { |
| top: 0px; |
| margin-top: 8px; |
| right: 0px; |
| } |
| |
| .o-alignment-widget .singles .bottomleft { |
| bottom: 0px; |
| left: 0px; |
| } |
| |
| .o-alignment-widget .singles .bottomcenter { |
| bottom: 0px; |
| margin-left: 8px; |
| left: 0px; |
| } |
| |
| .o-alignment-widget .singles .bottomright { |
| bottom: 0px; |
| right: 0px; |
| } |
| |
| .o-alignment-widget .alignment .hfill { |
| position: absolute; |
| bottom: 0px; |
| left: 0px; |
| width: 22px; |
| height: 6px; |
| background-color: $main-color; |
| } |
| |
| .o-alignment-widget .alignment .vfill { |
| position: absolute; |
| top: 0px; |
| left: 24px; |
| width: 6px; |
| height: 22px; |
| background-color: $main-color; |
| } |
| |
| .o-alignment-widget .alignment .vfill .o-selected, .o-alignment-widget .alignment .hfill .o-selected |
| { |
| background-color: $v-focus-color !important; |
| } |
| |
| .o-designer-overlay .o-button-widget { |
| position: relative; |
| overflow: hidden; |
| cursor: pointer; |
| background-color: $main-color; //#efeef1; |
| background-repeat: no-repeat; |
| background-position: center; |
| /*border-radius: 2px; |
| border: 0px; |
| width: 20px; |
| height: 20px; |
| float: left; |
| margin-left: 3px; |
| margin-top: 6px;*/ |
| } |
| |
| .o-designer-overlay .v-image { |
| position: relative; |
| overflow: hidden; |
| cursor: pointer; |
| /*background-color: #efeef1; |
| |
| border-style: solid; |
| border-color: silver; |
| border-width: 4px; |
| width: 30px;*/ |
| height: $font-size; |
| float: left; |
| padding: ($unit-size - $font-size); |
| padding-top: ($unit-size - $font-size) - ($gen-margins); //11px bei 16px fontgröße wäre gut |
| /*margin-left: -3px; |
| margin-top: -3px; |
| margin-right: 8px;*/ |
| } |
| |
| .o-designer-overlay .switchEditable { |
| padding-top: ($unit-size - $font-size) - ($gen-margins); |
| //margin: $gen-margins; |
| @include os-icon-font ($font-family: Vaadin-Icons, $content: '\e771', |
| $size: $font-size, |
| $line-height: $font-size); |
| color: valo-font-color($main-color); |
| //background-image: url("edit_properties.gif"); |
| } |
| |
| .o-designer-overlay .removeChild { |
| padding-top: ($unit-size - $font-size) - ($gen-margins); |
| //margin: $unit-size * 0.1; |
| @include os-icon-font ($font-family: Vaadin-Icons, $content: '\e80b', |
| $size: $font-size, |
| $line-height: $font-size); |
| color: valo-font-color($main-color); |
| //background-image: url("delete.gif"); |
| } |
| |
| .o-designer-overlay .addChild { |
| padding-top: ($unit-size - $font-size) - ($gen-margins); |
| //margin: $unit-size * 0.1; |
| @include os-icon-font ($font-family: Vaadin-Icons, $content: '\e801', |
| $size: $font-size, |
| $line-height: $font-size); |
| color: valo-font-color($main-color); |
| //background-image: url("add.png"); |
| } |
| |
| .o-designer-overlay .openProperties { |
| padding-top: ($unit-size - $font-size) - ($gen-margins); |
| //margin: $unit-size * 0.1; |
| @include os-icon-font ($font-family: Vaadin-Icons, $content: '\e6cf', |
| $size: $font-size, |
| $line-height: $font-size); |
| color: valo-font-color($main-color); |
| //background-image: url("openProperties.gif"); |
| } |
| |
| .o-designer-overlay .switchMargin { |
| padding-top: ($unit-size - $font-size) - ($gen-margins); |
| //margin: $unit-size * 0.1; |
| @include os-icon-font ($font-family: Vaadin-Icons, |
| $content: '\e65b', |
| $size: $font-size, |
| $line-height: $font-size); |
| color: valo-font-color($main-color); |
| //background-image: url("margin.gif"); |
| } |
| |
| .o-designer-overlay .switchSpacing { |
| padding-top: ($unit-size - $font-size) - ($gen-margins); |
| //margin: $unit-size * 0.1; |
| @include os-icon-font ($font-family: Vaadin-Icons, $content: '\e665', |
| $size: $font-size, |
| $line-height: $font-size); |
| color: valo-font-color($main-color); |
| //background-image: url("spacing.gif"); |
| } |
| } |