[extjs.git] / extjs / packages / ux / classic / sass / var / layout / ResponsiveColumn.scss

/**\r
 * @class Ext.ux.layout.ResponsiveColumn\r
 */\r
\r
/**\r
 * @var {number}\r
 * The space between items in a responsive column layout\r
 */\r
$responsivecolumn-item-spacing: dynamic(20px);\r
\r
/**\r
 * Configures the width of an item in a responsive column layout\r
 *\r
 * @param {number} [$width=100%]\r
 * The width as a percentage\r
 *\r
 * @param {number} [$spacing=$responsivecolumn-item-spacing]\r
 * The space between items.  For best results all items in the same responsive column\r
 * layout should use the same value.\r
 */\r
@mixin responsivecolumn-item($width: 100%, $spacing: $responsivecolumn-item-spacing) {\r
    width: calc(#{$width} - #{$spacing});\r
\r
    // This hack allows the JS layout to read the width/spacing info in IE8 since\r
    // it does not support CSS calc()\r
    background-position: $width $spacing !important;\r
}\r
Commit	Line	Data
6527f429 DM	1	/**\r
	2	* @class Ext.ux.layout.ResponsiveColumn\r
	3	*/\r
	4	\r
	5	/**\r
	6	* @var {number}\r
	7	* The space between items in a responsive column layout\r
	8	*/\r
	9	$responsivecolumn-item-spacing: dynamic(20px);\r
	10	\r
	11	/**\r
	12	* Configures the width of an item in a responsive column layout\r
	13	*\r
	14	* @param {number} [$width=100%]\r
	15	* The width as a percentage\r
	16	*\r
	17	* @param {number} [$spacing=$responsivecolumn-item-spacing]\r
	18	* The space between items. For best results all items in the same responsive column\r
	19	* layout should use the same value.\r
	20	*/\r
	21	@mixin responsivecolumn-item($width: 100%, $spacing: $responsivecolumn-item-spacing) {\r
	22	width: calc(#{$width} - #{$spacing});\r
	23	\r
	24	// This hack allows the JS layout to read the width/spacing info in IE8 since\r
	25	// it does not support CSS calc()\r
	26	background-position: $width $spacing !important;\r
	27	}\r