| /* |
| 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-vertical.v-margin-left, |
| .v-horizontal.v-margin-left { |
| padding-left: 12px; |
| } |
| |
| /* Different for historical reasons: previously was inherited directly from Base theme */ |
| /* TODO unify these values in version 7 */ |
| .v-gridlayout.v-layout-margin-top { |
| padding-top: 24px; |
| } |
| .v-gridlayout, |
| .v-verticallayout, |
| .v-horizontallayout { |
| font-size: 0; |
| line-height: normal; |
| } |
| |
| .v-gridlayout.v-layout-margin-bottom { |
| padding-bottom: 24px; |
| } |
| .v-gridlayout.v-layout-margin-left { |
| padding-left: 24px; |
| } |
| .v-gridlayout.v-layout-margin-right { |
| padding-right: 24px; |
| } |
| .v-gridlayout .v-layout-spacing-on { |
| padding-left: 12px; |
| padding-top: 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 { |
| display: inline-block; |
| clear: both; |
| width: 0; |
| height: 0; |
| overflow: hidden; |
| line-height:0; |
| } |
| |
| .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%; |
| } |
| |
| /* Workaround for IE8+IE9 bug where clicking inside an input area which is inside a div with negative margin causes cursor position to jump to wrong position. See #11152 */ |
| .v-horizontal > .v-expand > .v-slot { |
| position: relative; |
| } |
| |
| .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-widget, |
| .v-align-right > .v-widget, |
| .v-align-center > .v-widget, |
| .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-widget, |
| .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; |
| } |
| |
| } |