[extjs.git] / extjs / classic / theme-neutral / sass / src / resizer / Splitter.scss

// private\r
@mixin splitter-collapse-tool-padding($direction) {\r
    @if $direction == top {\r
        @if $splitter-collapse-tool-top-glyph-padding != 0 {\r
            padding: $splitter-collapse-tool-top-glyph-padding;\r
        }\r
    } @else if $direction == right {\r
        @if $splitter-collapse-tool-right-glyph-padding != 0 {\r
            padding: $splitter-collapse-tool-right-glyph-padding;\r
        }\r
    } @else if $direction == bottom {\r
        @if $splitter-collapse-tool-bottom-glyph-padding != 0 {\r
            padding: $splitter-collapse-tool-bottom-glyph-padding;\r
        }\r
    } @else if $direction == left {\r
        @if $splitter-collapse-tool-left-glyph-padding != 0 {\r
            padding: $splitter-collapse-tool-left-glyph-padding;\r
        }\r
    }\r
}\r
\r
.#{$prefix}collapse-el {\r
    cursor: $collapse-tool-cursor;\r
    @if $collapse-tool-opacity != 1 {\r
        @include opacity($collapse-tool-opacity);\r
    }\r
    @if $enable-font-icons {\r
        color: $splitter-collapse-tool-glyph-color;\r
        display: table;\r
        table-layout: fixed;\r
        &:before {\r
            display: table-cell;\r
            vertical-align: middle;\r
            text-align: center;\r
        }\r
    }\r
    @if ($splitter-collapse-tool-border-width != 0) and ($splitter-collapse-tool-border-width != null) {\r
        border: $splitter-collapse-tool-border-width $splitter-collapse-tool-border-style $splitter-collapse-tool-border-color;\r
    }\r
\r
    @if ($splitter-collapse-tool-background-color != null) and ($splitter-collapse-tool-background-color != transparent) {\r
        background-color: $splitter-collapse-tool-background-color;\r
    }\r
}\r
\r
.#{$prefix}layout-split-left {\r
    @if $enable-font-icons and ($splitter-collapse-tool-left-glyph != null) {\r
        @include font-icon($splitter-collapse-tool-left-glyph);\r
        @include splitter-collapse-tool-padding(left);\r
    } @else {\r
        background-image: theme-background-image('util/splitter/mini-left');\r
    }\r
}\r
\r
.#{$prefix}layout-split-right {\r
    @if $enable-font-icons and ($splitter-collapse-tool-right-glyph != null) {\r
        @include font-icon($splitter-collapse-tool-right-glyph);\r
        @include splitter-collapse-tool-padding(right);\r
    } @else {\r
        background-image: theme-background-image('util/splitter/mini-right');\r
    }\r
}\r
\r
@if $include-rtl {\r
    .#{$prefix}rtl {\r
        &.#{$prefix}layout-split-left {\r
            @if $enable-font-icons and ($splitter-collapse-tool-right-glyph != null) {\r
                @include font-icon($splitter-collapse-tool-right-glyph);\r
                @include splitter-collapse-tool-padding(right);\r
            } @else {\r
                background-image: theme-background-image('util/splitter/mini-right');\r
            }\r
        }\r
\r
        &.#{$prefix}layout-split-right {\r
            @if $enable-font-icons and ($splitter-collapse-tool-left-glyph != null) {\r
                @include font-icon($splitter-collapse-tool-left-glyph);\r
                @include splitter-collapse-tool-padding(left);\r
            } @else {\r
                background-image: theme-background-image('util/splitter/mini-left');\r
            }\r
        }\r
    }\r
}\r
\r
.#{$prefix}layout-split-top {\r
    @if $enable-font-icons and ($splitter-collapse-tool-top-glyph != null) {\r
        @include font-icon($splitter-collapse-tool-top-glyph);\r
        @include splitter-collapse-tool-padding(top);\r
    } @else {\r
        background-image: theme-background-image('util/splitter/mini-top');\r
    }\r
}\r
\r
.#{$prefix}layout-split-bottom {\r
    @if $enable-font-icons and ($splitter-collapse-tool-bottom-glyph != null) {\r
        @include font-icon($splitter-collapse-tool-bottom-glyph);\r
        @include splitter-collapse-tool-padding(bottom);\r
    } @else {\r
        background-image: theme-background-image('util/splitter/mini-bottom');\r
    }\r
}\r
\r
.#{$prefix}splitter-collapsed {\r
    .#{$prefix}layout-split-left {\r
        @if $enable-font-icons and ($splitter-collapse-tool-right-glyph != null) {\r
            @include font-icon($splitter-collapse-tool-right-glyph);\r
            @include splitter-collapse-tool-padding(right);\r
        } @else {\r
            background-image: theme-background-image('util/splitter/mini-right');\r
        }\r
    }\r
\r
    .#{$prefix}layout-split-right {\r
        @if $enable-font-icons and ($splitter-collapse-tool-left-glyph != null) {\r
            @include font-icon($splitter-collapse-tool-left-glyph);\r
            @include splitter-collapse-tool-padding(left);\r
        } @else {\r
            background-image: theme-background-image('util/splitter/mini-left');\r
        }\r
    }\r
\r
    @if $include-rtl {\r
        .#{$prefix}rtl {\r
            &.#{$prefix}layout-split-left {\r
                @if $enable-font-icons and ($splitter-collapse-tool-left-glyph != null) {\r
                    @include font-icon($splitter-collapse-tool-left-glyph);\r
                    @include splitter-collapse-tool-padding(left);\r
                } @else {\r
                    background-image: theme-background-image('util/splitter/mini-left');\r
                }\r
            }\r
\r
            &.#{$prefix}layout-split-right {\r
                @if $enable-font-icons and ($splitter-collapse-tool-right-glyph != null) {\r
                    @include font-icon($splitter-collapse-tool-right-glyph);\r
                    @include splitter-collapse-tool-padding(right);\r
                } @else {\r
                    background-image: theme-background-image('util/splitter/mini-right');\r
                }\r
            }\r
        }\r
    }\r
\r
    .#{$prefix}layout-split-top {\r
        @if $enable-font-icons and ($splitter-collapse-tool-bottom-glyph != null) {\r
            @include font-icon($splitter-collapse-tool-bottom-glyph);\r
            @include splitter-collapse-tool-padding(bottom);\r
        } @else {\r
            background-image: theme-background-image('util/splitter/mini-bottom');\r
        }\r
    }\r
\r
    .#{$prefix}layout-split-bottom {\r
        @if $enable-font-icons and ($splitter-collapse-tool-top-glyph != null) {\r
            @include font-icon($splitter-collapse-tool-top-glyph);\r
            @include splitter-collapse-tool-padding(top);\r
        } @else {\r
            background-image: theme-background-image('util/splitter/mini-top');\r
        }\r
    }\r
}\r
\r
.#{$prefix}splitter-active {\r
    background-color: $splitter-active-background-color;\r
    @include opacity($splitter-active-opacity);\r
\r
    .#{$prefix}collapse-el {\r
        @include opacity($splitter-active-collapse-tool-opacity);\r
    }\r
}\r
\r
.#{$prefix}layout-split-left,\r
.#{$prefix}layout-split-right {\r
    top: 50%;\r
    margin-top: round(-$collapse-tool-size / 2);\r
    width: $splitter-size;\r
    height: $collapse-tool-size;\r
}\r
\r
.#{$prefix}layout-split-top,\r
.#{$prefix}layout-split-bottom {\r
    left: 50%;\r
    width: $collapse-tool-size;\r
    height: $splitter-size;\r
    margin-left: round(-$collapse-tool-size / 2);\r
    @if $enable-font-icons {\r
        $splitter-collapse-tool-horizontal-line-height: $splitter-size;\r
        @if $splitter-collapse-tool-border-width != null {\r
            $splitter-collapse-tool-horizontal-line-height:\r
                    ($splitter-collapse-tool-horizontal-line-height - vertical($splitter-collapse-tool-border-width));\r
        }\r
        &:before {\r
            width: 100%;\r
            line-height: $splitter-collapse-tool-horizontal-line-height;\r
        }\r
    }\r
}\r
\r
.#{$prefix}splitter-focus {\r
    @include css-outline(\r
        $width: $splitter-focus-outline-width,\r
        $style: $splitter-focus-outline-style,\r
        $color: $splitter-focus-outline-color,\r
        $offset: $splitter-focus-outline-offset,\r
        $pseudo: true\r
    );\r
}
Commit	Line	Data
6527f429 DM	1	// private\r
	2	@mixin splitter-collapse-tool-padding($direction) {\r
	3	@if $direction == top {\r
	4	@if $splitter-collapse-tool-top-glyph-padding != 0 {\r
	5	padding: $splitter-collapse-tool-top-glyph-padding;\r
	6	}\r
	7	} @else if $direction == right {\r
	8	@if $splitter-collapse-tool-right-glyph-padding != 0 {\r
	9	padding: $splitter-collapse-tool-right-glyph-padding;\r
	10	}\r
	11	} @else if $direction == bottom {\r
	12	@if $splitter-collapse-tool-bottom-glyph-padding != 0 {\r
	13	padding: $splitter-collapse-tool-bottom-glyph-padding;\r
	14	}\r
	15	} @else if $direction == left {\r
	16	@if $splitter-collapse-tool-left-glyph-padding != 0 {\r
	17	padding: $splitter-collapse-tool-left-glyph-padding;\r
	18	}\r
	19	}\r
	20	}\r
	21	\r
	22	.#{$prefix}collapse-el {\r
	23	cursor: $collapse-tool-cursor;\r
	24	@if $collapse-tool-opacity != 1 {\r
	25	@include opacity($collapse-tool-opacity);\r
	26	}\r
	27	@if $enable-font-icons {\r
	28	color: $splitter-collapse-tool-glyph-color;\r
	29	display: table;\r
	30	table-layout: fixed;\r
	31	&:before {\r
	32	display: table-cell;\r
	33	vertical-align: middle;\r
	34	text-align: center;\r
	35	}\r
	36	}\r
	37	@if ($splitter-collapse-tool-border-width != 0) and ($splitter-collapse-tool-border-width != null) {\r
	38	border: $splitter-collapse-tool-border-width $splitter-collapse-tool-border-style $splitter-collapse-tool-border-color;\r
	39	}\r
	40	\r
	41	@if ($splitter-collapse-tool-background-color != null) and ($splitter-collapse-tool-background-color != transparent) {\r
	42	background-color: $splitter-collapse-tool-background-color;\r
	43	}\r
	44	}\r
	45	\r
	46	.#{$prefix}layout-split-left {\r
	47	@if $enable-font-icons and ($splitter-collapse-tool-left-glyph != null) {\r
	48	@include font-icon($splitter-collapse-tool-left-glyph);\r
	49	@include splitter-collapse-tool-padding(left);\r
	50	} @else {\r
	51	background-image: theme-background-image('util/splitter/mini-left');\r
	52	}\r
	53	}\r
	54	\r
	55	.#{$prefix}layout-split-right {\r
	56	@if $enable-font-icons and ($splitter-collapse-tool-right-glyph != null) {\r
	57	@include font-icon($splitter-collapse-tool-right-glyph);\r
	58	@include splitter-collapse-tool-padding(right);\r
	59	} @else {\r
	60	background-image: theme-background-image('util/splitter/mini-right');\r
	61	}\r
	62	}\r
	63	\r
	64	@if $include-rtl {\r
65	.#{$prefix}rtl {\r
66	&.#{$prefix}layout-split-left {\r
67	@if $enable-font-icons and ($splitter-collapse-tool-right-glyph != null) {\r
68	@include font-icon($splitter-collapse-tool-right-glyph);\r
69	@include splitter-collapse-tool-padding(right);\r
70	} @else {\r
71	background-image: theme-background-image('util/splitter/mini-right');\r
72	}\r
73	}\r
74	\r
75	&.#{$prefix}layout-split-right {\r
76	@if $enable-font-icons and ($splitter-collapse-tool-left-glyph != null) {\r
77	@include font-icon($splitter-collapse-tool-left-glyph);\r
78	@include splitter-collapse-tool-padding(left);\r
79	} @else {\r
80	background-image: theme-background-image('util/splitter/mini-left');\r
81	}\r
82	}\r
83	}\r
84	}\r
85	\r
86	.#{$prefix}layout-split-top {\r
87	@if $enable-font-icons and ($splitter-collapse-tool-top-glyph != null) {\r
88	@include font-icon($splitter-collapse-tool-top-glyph);\r
89	@include splitter-collapse-tool-padding(top);\r
90	} @else {\r
91	background-image: theme-background-image('util/splitter/mini-top');\r
92	}\r
93	}\r
94	\r
95	.#{$prefix}layout-split-bottom {\r
96	@if $enable-font-icons and ($splitter-collapse-tool-bottom-glyph != null) {\r
97	@include font-icon($splitter-collapse-tool-bottom-glyph);\r
98	@include splitter-collapse-tool-padding(bottom);\r
99	} @else {\r
100	background-image: theme-background-image('util/splitter/mini-bottom');\r
101	}\r
102	}\r
103	\r
104	.#{$prefix}splitter-collapsed {\r
105	.#{$prefix}layout-split-left {\r
106	@if $enable-font-icons and ($splitter-collapse-tool-right-glyph != null) {\r
107	@include font-icon($splitter-collapse-tool-right-glyph);\r
108	@include splitter-collapse-tool-padding(right);\r
109	} @else {\r
110	background-image: theme-background-image('util/splitter/mini-right');\r
111	}\r
112	}\r
113	\r
114	.#{$prefix}layout-split-right {\r
115	@if $enable-font-icons and ($splitter-collapse-tool-left-glyph != null) {\r
116	@include font-icon($splitter-collapse-tool-left-glyph);\r
117	@include splitter-collapse-tool-padding(left);\r
118	} @else {\r
119	background-image: theme-background-image('util/splitter/mini-left');\r
120	}\r
121	}\r
122	\r
123	@if $include-rtl {\r
124	.#{$prefix}rtl {\r
125	&.#{$prefix}layout-split-left {\r
126	@if $enable-font-icons and ($splitter-collapse-tool-left-glyph != null) {\r
127	@include font-icon($splitter-collapse-tool-left-glyph);\r
128	@include splitter-collapse-tool-padding(left);\r
129	} @else {\r
130	background-image: theme-background-image('util/splitter/mini-left');\r
131	}\r
132	}\r
133	\r
134	&.#{$prefix}layout-split-right {\r
135	@if $enable-font-icons and ($splitter-collapse-tool-right-glyph != null) {\r
136	@include font-icon($splitter-collapse-tool-right-glyph);\r
137	@include splitter-collapse-tool-padding(right);\r
138	} @else {\r
139	background-image: theme-background-image('util/splitter/mini-right');\r
140	}\r
141	}\r
142	}\r
143	}\r
144	\r
145	.#{$prefix}layout-split-top {\r
146	@if $enable-font-icons and ($splitter-collapse-tool-bottom-glyph != null) {\r
147	@include font-icon($splitter-collapse-tool-bottom-glyph);\r
148	@include splitter-collapse-tool-padding(bottom);\r
149	} @else {\r
150	background-image: theme-background-image('util/splitter/mini-bottom');\r
151	}\r
152	}\r
153	\r
154	.#{$prefix}layout-split-bottom {\r
155	@if $enable-font-icons and ($splitter-collapse-tool-top-glyph != null) {\r
156	@include font-icon($splitter-collapse-tool-top-glyph);\r
157	@include splitter-collapse-tool-padding(top);\r
158	} @else {\r
159	background-image: theme-background-image('util/splitter/mini-top');\r
160	}\r
161	}\r
162	}\r
163	\r
164	.#{$prefix}splitter-active {\r
165	background-color: $splitter-active-background-color;\r
166	@include opacity($splitter-active-opacity);\r
167	\r
168	.#{$prefix}collapse-el {\r
169	@include opacity($splitter-active-collapse-tool-opacity);\r
170	}\r
171	}\r
172	\r
173	.#{$prefix}layout-split-left,\r
174	.#{$prefix}layout-split-right {\r
175	top: 50%;\r
176	margin-top: round(-$collapse-tool-size / 2);\r
177	width: $splitter-size;\r
178	height: $collapse-tool-size;\r
179	}\r
180	\r
181	.#{$prefix}layout-split-top,\r
182	.#{$prefix}layout-split-bottom {\r
183	left: 50%;\r
184	width: $collapse-tool-size;\r
185	height: $splitter-size;\r
186	margin-left: round(-$collapse-tool-size / 2);\r
187	@if $enable-font-icons {\r
188	$splitter-collapse-tool-horizontal-line-height: $splitter-size;\r
189	@if $splitter-collapse-tool-border-width != null {\r
190	$splitter-collapse-tool-horizontal-line-height:\r
191	($splitter-collapse-tool-horizontal-line-height - vertical($splitter-collapse-tool-border-width));\r
192	}\r
193	&:before {\r
194	width: 100%;\r
195	line-height: $splitter-collapse-tool-horizontal-line-height;\r
196	}\r
197	}\r
198	}\r
199	\r
200	.#{$prefix}splitter-focus {\r
201	@include css-outline(\r
202	$width: $splitter-focus-outline-width,\r
203	$style: $splitter-focus-outline-style,\r
204	$color: $splitter-focus-outline-color,\r
205	$offset: $splitter-focus-outline-offset,\r
206	$pseudo: true\r
207	);\r
208	}