blob: fe3fcd17ed0dd92613ce8ffd76f126d4532d6701 [file] [log] [blame]
/*
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;
}
}