diff options
author | John Ahlroos <john@vaadin.com> | 2012-09-06 16:27:04 +0300 |
---|---|---|
committer | John Ahlroos <john@vaadin.com> | 2012-09-06 16:27:04 +0300 |
commit | 50237cc7d431acb03f75dc3cdba55a245922608b (patch) | |
tree | 8084b31f53608d4ef9b04bc60389820063ab1e9e /WebContent/VAADIN/themes/base/layout/layout.scss | |
parent | 55c0dfa0e7a737bab8c2486fb213499e6be88aa4 (diff) | |
download | vaadin-framework-50237cc7d431acb03f75dc3cdba55a245922608b.tar.gz vaadin-framework-50237cc7d431acb03f75dc3cdba55a245922608b.zip |
Renamed .v-boxlayout selector to .v-layout and applied the .v-layout
selector to all layouts
Diffstat (limited to 'WebContent/VAADIN/themes/base/layout/layout.scss')
-rw-r--r-- | WebContent/VAADIN/themes/base/layout/layout.scss | 188 |
1 files changed, 188 insertions, 0 deletions
diff --git a/WebContent/VAADIN/themes/base/layout/layout.scss b/WebContent/VAADIN/themes/base/layout/layout.scss new file mode 100644 index 0000000000..af49dd4463 --- /dev/null +++ b/WebContent/VAADIN/themes/base/layout/layout.scss @@ -0,0 +1,188 @@ +/* +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 |