/* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- components/panels.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ & when (@panel-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .panel { .clearfix(); position: relative; display: block; box-sizing: @panel-box-sizing; .background-clip(@panel-background-clip); .panel-variant('default'); .panel-size-variant(''); overflow: hidden; /* ----------------------------------------------------------------------------- Panel (Inverse) ----------------------------------------------------------------------------- */ &.panel-inverse { .panel-variant('inverse'); /* ----------------------------------------------------------------------------- Panel Header (Inverse) ----------------------------------------------------------------------------- */ .panel-header { .panel-variant('header-inverse'); } /* ----------------------------------------------------------------------------- Panel Content (Inverse) ----------------------------------------------------------------------------- */ .panel-content { .panel-variant('content-inverse'); } /* ----------------------------------------------------------------------------- Panel Footer (Inverse) ----------------------------------------------------------------------------- */ .panel-footer { .panel-variant('footer-inverse'); } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel Header -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .panel-header { .clearfix(); box-sizing: @panel-header-box-sizing; .background-clip(@panel-header-background-clip); .panel-variant('header-default'); .panel-component-size-variant('header', ''); } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel Content -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .panel-content { .clearfix(); box-sizing: @panel-content-box-sizing; .background-clip(@panel-content-background-clip); .panel-variant('content-default'); .panel-component-size-variant('content', ''); } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel Footer -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .panel-footer { .clearfix(); box-sizing: @panel-footer-box-sizing; .background-clip(@panel-footer-background-clip); .panel-variant('footer-default'); .panel-component-size-variant('footer', ''); } } } & when (@panel-enabled) and (@screen-mini-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: @screen-mini) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .panel { .panel-size-variant('screen-mini'); /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel Header -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .panel-header { .panel-component-size-variant('header', 'screen-mini'); } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel Content -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .panel-content { .panel-component-size-variant('content', 'screen-mini'); } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel Footer -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .panel-footer { .panel-component-size-variant('footer', 'screen-mini'); } } } } & when (@panel-enabled) and(@screen-small-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: @screen-small) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .panel { .panel-size-variant('screen-small'); /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel Header -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .panel-header { .panel-component-size-variant('header', 'screen-small'); } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel Content -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .panel-content { .panel-component-size-variant('content', 'screen-small'); } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel Footer -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .panel-footer { .panel-component-size-variant('footer', 'screen-small'); } } } } & when (@panel-enabled) and(@screen-medium-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: @screen-medium) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .panel { .panel-size-variant('screen-medium'); /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel Header -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .panel-header { .panel-component-size-variant('header', 'screen-medium'); } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel Content -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .panel-content { .panel-component-size-variant('content', 'screen-medium'); } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel Footer -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .panel-footer { .panel-component-size-variant('footer', 'screen-medium'); } } } } & when (@panel-enabled) and (@screen-large-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: @screen-large) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .panel { .panel-size-variant('screen-large'); /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel Header -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .panel-header { .panel-component-size-variant('header', 'screen-large'); } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel Content -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .panel-content { .panel-component-size-variant('content', 'screen-large'); } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Panel Footer -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .panel-footer { .panel-component-size-variant('footer', 'screen-large'); } } } } & when (@screen-resolution-2x-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 2x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media only screen and (-webkit-min-device-pixel-ratio: 2) { } } & when (@screen-resolution-3x-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 3x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media only screen and (-webkit-min-device-pixel-ratio: 3) { } }