@import "absolutelayout/absolutelayout.scss";
@import "accordion/accordion.scss";
@import "button/button.scss";
-@import "boxlayout/boxlayout.scss";
+@import "layout/layout.scss";
@import "caption/caption.scss";
@import "common/common.scss";
@import "csslayout/csslayout.scss";
+++ /dev/null
-/*
-TODO
-- separate styles to proper places
-- decide a good class name structure for core layouts (e.g. 'v-layout', 'v-vertical', 'v-grid' etc.)
-- use !important in carefully selected places to prevent accidental layout breakage by custom theming (e.g. alignments should be forced)
-
-*/
-
-.v-boxlayout.v-margin-top {padding-top: 12px;}
-.v-boxlayout.v-margin-right {padding-right: 12px;}
-.v-boxlayout.v-margin-bottom {padding-bottom: 12px;}
-.v-boxlayout.v-margin-left {padding-left: 12px;}
-
-.v-spacing {
- width: 6px;
- height: 6px;
-}
-
-.v-boxlayout {
- display: inline-block;
-}
-
-div.v-boxlayout.v-horizontal.v {
- white-space: nowrap;
-}
-
-.v-boxlayout > .v-expand {
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- width: 100%;
- height: 100%;
-}
-
-.v-slot,
-.v-spacing {
- display: inline-block;
- white-space: normal;
- vertical-align: top;
-}
-
-/* Clear any floats inside the slot, to prevent unwanted collapsing */
-.v-vertical > .v-slot:after {
- content: "";
- display: inline-block;
- clear: both;
- width: 0;
- height: 0;
- overflow: hidden;
-}
-
-.v-vertical > .v-slot,
-.v-vertical > .v-expand > .v-slot {
- display: block;
- clear: both;
-}
-
-.v-horizontal > .v-slot,
-.v-horizontal > .v-expand > .v-slot {
- height: 100%;
-}
-
-.v-vertical > .v-spacing,
-.v-vertical > .v-expand > .v-spacing {
- width: 0;
- display: block;
- clear: both;
-}
-
-.v-horizontal > .v-spacing,
-.v-horizontal > .v-expand > .v-spacing {
- height: 0;
-}
-
-.v-align-middle:before,
-.v-align-bottom:before,
-.v-expand > .v-align-middle:before,
-.v-expand > .v-align-bottom:before {
- content: "";
- display: inline-block;
- height: 100%;
- vertical-align: middle;
- width: 0;
-}
-
-.v-align-middle,
-.v-align-bottom {
- white-space: nowrap;
-}
-
-.v-align-middle > .v,
-.v-align-bottom > .v {
- display: inline-block;
-}
-
-.v-align-middle,
-.v-align-middle > .v {
- vertical-align: middle;
-}
-
-.v-align-bottom,
-.v-align-bottom > .v {
- vertical-align: bottom;
-}
-
-.v-align-center {
- text-align: center;
-}
-
-.v-align-center > .v {
- margin-left: auto;
- margin-right: auto;
-}
-
-.v-align-right {
- text-align: right;
-}
-
-.v-align-right > .v {
- margin-left: auto;
-}
-
-.v-has-caption,
-.v-has-caption > .v-caption {
- display: inline-block; /* Force natural width to zero */
-}
-
-.v-caption {
- overflow: visible;
- vertical-align: middle;
-}
-
-.v-caption-on-left,
-.v-caption-on-right {
- white-space: nowrap;
-}
-
-.v-caption-on-top > .v-caption,
-.v-caption-on-bottom > .v-caption {
- display: block;
-}
-
-.v-caption-on-left > .v-caption {
- padding-right: .5em;
-}
-
-.v-caption-on-right > .v-caption {
- padding-left: .5em;
-}
-
-.v-caption-on-left > .v,
-.v-caption-on-right > .v {
- display: inline-block;
- vertical-align: middle;
-}
-
-.v-has-caption.v-has-width > .v {
- width: 100% !important;
-}
-
-.v-has-caption.v-has-height > .v {
- height: 100% !important;
-}
-
-.v-errorindicator {
- vertical-align: middle;
-}
\ No newline at end of file
+++ /dev/null
-/*
-TODO
-- separate styles to proper places
-- decide a good class name structure for core layouts (e.g. 'v-layout', 'v-vertical', 'v-grid' etc.)
-- use !important in carefully selected places to prevent accidental layout breakage by custom theming (e.g. alignments should be forced)
-
-*/
-
-@mixin base-boxlayout {
-
-.v-boxlayout.v-margin-top {padding-top: 12px;}
-.v-boxlayout.v-margin-right {padding-right: 12px;}
-.v-boxlayout.v-margin-bottom {padding-bottom: 12px;}
-.v-boxlayout.v-margin-left {padding-left: 12px;}
-
-.v-spacing {
- width: 6px;
- height: 6px;
-}
-
-.v-boxlayout {
- display: inline-block;
-}
-
-div.v-boxlayout.v-horizontal.v-widget {
- white-space: nowrap;
-}
-
-.v-boxlayout > .v-expand {
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- width: 100%;
- height: 100%;
-}
-
-.v-slot,
-.v-spacing {
- display: inline-block;
- white-space: normal;
- vertical-align: top;
-}
-
-/* Clear any floats inside the slot, to prevent unwanted collapsing */
-.v-vertical > .v-slot:after {
- content: "";
- display: inline-block;
- clear: both;
- width: 0;
- height: 0;
- overflow: hidden;
-}
-
-.v-vertical > .v-slot,
-.v-vertical > .v-expand > .v-slot {
- display: block;
- clear: both;
-}
-
-.v-horizontal > .v-slot,
-.v-horizontal > .v-expand > .v-slot {
- height: 100%;
-}
-
-.v-vertical > .v-spacing,
-.v-vertical > .v-expand > .v-spacing {
- width: 0;
- display: block;
- clear: both;
-}
-
-.v-horizontal > .v-spacing,
-.v-horizontal > .v-expand > .v-spacing {
- height: 0;
-}
-
-.v-align-middle:before,
-.v-align-bottom:before,
-.v-expand > .v-align-middle:before,
-.v-expand > .v-align-bottom:before {
- content: "";
- display: inline-block;
- height: 100%;
- vertical-align: middle;
- width: 0;
-}
-
-.v-align-middle,
-.v-align-bottom {
- white-space: nowrap;
-}
-
-.v-align-middle > .v,
-.v-align-bottom > .v-widget {
- display: inline-block;
-}
-
-.v-align-middle,
-.v-align-middle > .v-widget {
- vertical-align: middle;
-}
-
-.v-align-bottom,
-.v-align-bottom > .v-widget {
- vertical-align: bottom;
-}
-
-.v-align-center {
- text-align: center;
-}
-
-.v-align-center > .v-widget {
- margin-left: auto;
- margin-right: auto;
-}
-
-.v-align-right {
- text-align: right;
-}
-
-.v-align-right > .v-widget {
- margin-left: auto;
-}
-
-.v-has-caption,
-.v-has-caption > .v-caption {
- display: inline-block; /* Force natural width to zero */
-}
-
-.v-caption {
- overflow: visible;
- vertical-align: middle;
-}
-
-.v-caption-on-left,
-.v-caption-on-right {
- white-space: nowrap;
-}
-
-.v-caption-on-top > .v-caption,
-.v-caption-on-bottom > .v-caption {
- display: block;
-}
-
-.v-caption-on-left > .v-caption {
- padding-right: .5em;
-}
-
-.v-caption-on-right > .v-caption {
- vertical-align:top;
-}
-
-.v-caption-on-left > .v,
-.v-caption-on-right > .v-widget {
- display: inline-block;
- vertical-align: middle;
-}
-
-.v-has-caption.v-has-width > .v-widget {
- width: 100% !important;
-}
-
-.v-has-caption.v-has-height > .v-widget {
- height: 100% !important;
-}
-
-.v-errorindicator {
- vertical-align: middle;
-}
-
-}
\ No newline at end of file
--- /dev/null
+/*
+TODO
+- separate styles to proper places
+- decide a good class name structure for core layouts (e.g. 'v-layout', 'v-vertical', 'v-grid' etc.)
+- use !important in carefully selected places to prevent accidental layout breakage by custom theming (e.g. alignments should be forced)
+
+*/
+
+@mixin base-layout {
+
+.v-vertical.v-margin-top,
+.v-horizontal.v-margin-top {
+ padding-top: 12px;
+}
+
+.v-vertical.v-margin-right,
+.v-horizontal.v-margin-right {
+ padding-right: 12px;
+}
+
+.v-vertical.v-margin-bottom,
+.v-horizontal.v-margin-bottom {
+ padding-bottom: 12px;
+}
+
+.v-layout.v-vertical.v-margin-left,
+.v-layout.v-horizontal.v-margin-left {
+ padding-left: 12px;
+}
+
+.v-spacing {
+ width: 6px;
+ height: 6px;
+}
+
+.v-vertical,
+.v-horizontal {
+ display: inline-block;
+}
+
+div.v-layout.v-horizontal.v-widget {
+ white-space: nowrap;
+}
+
+.v-layout.v-vertical > .v-expand,
+.v-layout.v-horizontal > .v-expand {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ width: 100%;
+ height: 100%;
+}
+
+.v-slot,
+.v-spacing {
+ display: inline-block;
+ white-space: normal;
+ vertical-align: top;
+}
+
+/* Clear any floats inside the slot, to prevent unwanted collapsing */
+.v-vertical > .v-slot:after {
+ content: "";
+ display: inline-block;
+ clear: both;
+ width: 0;
+ height: 0;
+ overflow: hidden;
+}
+
+.v-vertical > .v-slot,
+.v-vertical > .v-expand > .v-slot {
+ display: block;
+ clear: both;
+}
+
+.v-horizontal > .v-slot,
+.v-horizontal > .v-expand > .v-slot {
+ height: 100%;
+}
+
+.v-vertical > .v-spacing,
+.v-vertical > .v-expand > .v-spacing {
+ width: 0;
+ display: block;
+ clear: both;
+}
+
+.v-horizontal > .v-spacing,
+.v-horizontal > .v-expand > .v-spacing {
+ height: 0;
+}
+
+.v-align-middle:before,
+.v-align-bottom:before,
+.v-expand > .v-align-middle:before,
+.v-expand > .v-align-bottom:before {
+ content: "";
+ display: inline-block;
+ height: 100%;
+ vertical-align: middle;
+ width: 0;
+}
+
+.v-align-middle,
+.v-align-bottom {
+ white-space: nowrap;
+}
+
+.v-align-middle > .v,
+.v-align-bottom > .v-widget {
+ display: inline-block;
+}
+
+.v-align-middle,
+.v-align-middle > .v-widget {
+ vertical-align: middle;
+}
+
+.v-align-bottom,
+.v-align-bottom > .v-widget {
+ vertical-align: bottom;
+}
+
+.v-align-center {
+ text-align: center;
+}
+
+.v-align-center > .v-widget {
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.v-align-right {
+ text-align: right;
+}
+
+.v-align-right > .v-widget {
+ margin-left: auto;
+}
+
+.v-has-caption,
+.v-has-caption > .v-caption {
+ display: inline-block; /* Force natural width to zero */
+}
+
+.v-caption {
+ overflow: visible;
+ vertical-align: middle;
+}
+
+.v-caption-on-left,
+.v-caption-on-right {
+ white-space: nowrap;
+}
+
+.v-caption-on-top > .v-caption,
+.v-caption-on-bottom > .v-caption {
+ display: block;
+}
+
+.v-caption-on-left > .v-caption {
+ padding-right: .5em;
+}
+
+.v-caption-on-right > .v-caption {
+ vertical-align:top;
+}
+
+.v-caption-on-left > .v,
+.v-caption-on-right > .v-widget {
+ display: inline-block;
+ vertical-align: middle;
+}
+
+.v-has-caption.v-has-width > .v-widget {
+ width: 100% !important;
+}
+
+.v-has-caption.v-has-height > .v-widget {
+ height: 100% !important;
+}
+
+.v-errorindicator {
+ vertical-align: middle;
+}
+
+}
\ No newline at end of file
// here for now to preserve old semantics
@include base-common;
-@include base-boxlayout;
+@include base-layout;
@include base-csslayout;
@include base-customcomponent;
@include base-customlayout;
.v-orderedlayout-margin-top,
.v-horizontallayout-margin-top,
.v-verticallayout-margin-top,
-.v-boxlayout.v-margin-top {
+.v-layout.v-margin-top {
padding-top: 18px;
}
.v-orderedlayout-margin-right,
.v-horizontallayout-margin-right,
.v-verticallayout-margin-right,
-.v-boxlayout.v-margin-right {
+.v-layout.v-margin-right {
padding-right: 18px;
}
.v-orderedlayout-margin-bottom,
.v-horizontallayout-margin-bottom,
.v-verticallayout-margin-bottom,
-.v-boxlayout.v-margin-bottom {
+.v-layout.v-margin-bottom {
padding-bottom: 18px;
}
.v-orderedlayout-margin-left,
.v-horizontallayout-margin-left,
.v-verticallayout-margin-left,
-.v-boxlayout.v-margin-left {
+.v-layout.v-margin-left {
padding-left: 18px;
}
.v-orderedlayout-spacing-on,
.v-horizontallayout-margin-top,
.v-verticallayout-margin-top,
.v-csslayout-margin-top,
-.v-boxlayout.v-margin-top {
+.v-layout.v-margin-top {
padding-top: 15px;
}
.v-orderedlayout-margin-right,
.v-horizontallayout-margin-right,
.v-verticallayout-margin-right,
.v-csslayout-margin-right,
-.v-boxlayout.v-margin-right {
+.v-layout.v-margin-right {
padding-right: 18px;
}
.v-orderedlayout-margin-bottom,
.v-horizontallayout-margin-bottom,
.v-verticallayout-margin-bottom,
.v-csslayout-margin-bottom,
-.v-boxlayout.v-margin-bottom {
+.v-layout.v-margin-bottom {
padding-bottom: 15px;
}
.v-orderedlayout-margin-left,
.v-horizontallayout-margin-left,
.v-verticallayout-margin-left,
.v-csslayout-margin-left,
-.v-boxlayout.v-margin-left {
+.v-layout.v-margin-left {
padding-left: 18px;
}
.v-orderedlayout-spacing-on,
background: #f00;
}
-.v-boxlayout.test {
+.v-layout.test {
border: 1px solid #ddd;
}
-.v-boxlayout.test .target {
+.v-layout.test .target {
outline: 2px dashed blue;
}
import com.google.gwt.user.client.ui.Widget;
import com.vaadin.client.ApplicationConnection;
import com.vaadin.client.VCaption;
+import com.vaadin.ui.themes.BaseTheme;
public class VAbsoluteLayout extends ComplexPanel {
public VAbsoluteLayout() {
setElement(Document.get().createDivElement());
- setStyleName(CLASSNAME);
+ setStyleName(BaseTheme.UI_LAYOUT);
+ addStyleName(CLASSNAME);
marginElement = Document.get().createDivElement();
canvas.getStyle().setProperty("position", "relative");
canvas.getStyle().setProperty("overflow", "hidden");
-/*
+/*
* Copyright 2011 Vaadin Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not
import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.SimplePanel;
import com.google.gwt.user.client.ui.Widget;
+import com.vaadin.ui.themes.BaseTheme;
public class VCssLayout extends SimplePanel {
public static final String TAGNAME = "csslayout";
public VCssLayout() {
super();
getElement().appendChild(margin);
- setStyleName(CLASSNAME);
+ setStyleName(BaseTheme.UI_LAYOUT);
+ addStyleName(CLASSNAME);
margin.setClassName(CLASSNAME + "-margin");
setWidget(panel);
}
-/*
+/*
* Copyright 2011 Vaadin Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not
import com.vaadin.client.Util;
import com.vaadin.client.VCaption;
import com.vaadin.client.VCaptionWrapper;
+import com.vaadin.ui.themes.BaseTheme;
/**
* Custom Layout implements complex layout defined with HTML template.
DOM.setStyleAttribute(getElement(), "position", "relative");
}
- setStyleName(CLASSNAME);
+ setStyleName(BaseTheme.UI_LAYOUT);
+ addStyleName(CLASSNAME);
}
/**
static native void eval(String script)
/*-{
try {
- if (script != null)
+ if (script != null)
eval("{ var document = $doc; var window = $wnd; "+ script + "}");
} catch (e) {
}
import com.vaadin.shared.ComponentState;
import com.vaadin.shared.ui.ComponentStateUtil;
import com.vaadin.shared.ui.MarginInfo;
+import com.vaadin.ui.themes.BaseTheme;
/**
* Two col Layout that places caption on left col and field on right col
public VFormLayout() {
super();
- setStyleName(CLASSNAME);
+ setStyleName(BaseTheme.UI_LAYOUT);
+ addStyleName(CLASSNAME);
table = new VFormLayoutTable();
setWidget(table);
}
import com.vaadin.client.ui.layout.VLayoutSlot;
import com.vaadin.shared.ui.AlignmentInfo;
import com.vaadin.shared.ui.MarginInfo;
+import com.vaadin.ui.themes.BaseTheme;
public class VGridLayout extends ComplexPanel {
spacingStyle.setPosition(Position.ABSOLUTE);
getElement().appendChild(spacingMeasureElement);
- setStyleName(CLASSNAME);
+ setStyleName(BaseTheme.UI_LAYOUT);
+ addStyleName(CLASSNAME);
}
private GridLayoutConnector getConnector() {
*/
public class VHorizontalLayout extends VOrderedLayout {
+ private static final String CLASSNAME = "v-horizontallayout";
+
/**
* Default constructor
*/
public VHorizontalLayout() {
setVertical(false);
+ addStyleName(CLASSNAME);
}
}
*/
public class VOrderedLayout extends FlowPanel {
- public static final String CLASSNAME = "v-boxlayout";
-
private static final String ALIGN_CLASS_PREFIX = "v-align-";
protected boolean spacing = false;
* Constructor
*/
public VOrderedLayout() {
- setStyleName(CLASSNAME);
+ setStyleName(BaseTheme.UI_LAYOUT);
setVertical(true);
}
*/
public class VVerticalLayout extends VOrderedLayout {
+ private static final String CLASSNAME = "v-verticallayout";
+
/**
* Default constructor
*/
public VVerticalLayout() {
setVertical(true);
+ addStyleName(CLASSNAME);
}
}
import com.vaadin.client.ui.TouchScrollDelegate.TouchScrollHandler;
import com.vaadin.client.ui.VOverlay;
import com.vaadin.client.ui.splitpanel.VAbstractSplitPanel.SplitterMoveHandler.SplitterMoveEvent;
+import com.vaadin.ui.themes.BaseTheme;
public class VAbstractSplitPanel extends ComplexPanel {
public VAbstractSplitPanel(int orientation) {
setElement(DOM.createDiv());
+ setStyleName(BaseTheme.UI_LAYOUT);
switch (orientation) {
case ORIENTATION_HORIZONTAL:
- setStyleName(CLASSNAME + "-horizontal");
+ addStyleName(CLASSNAME + "-horizontal");
break;
case ORIENTATION_VERTICAL:
default:
- setStyleName(CLASSNAME + "-vertical");
+ addStyleName(CLASSNAME + "-vertical");
break;
}
// size below will be overridden in update from uidl, initial size
*/
public static final String UI_WIDGET = "v-widget";
+ /**
+ * Added to all layouts to denote they are layouts
+ */
+ public static final String UI_LAYOUT = "v-layout";
+
}
\ No newline at end of file
projects / vaadin-framework.git / commitdiff