com.google.gwt.resources.client.inline-block.css Maven / Gradle / Ivy
/*
* Copyright 2010 Google Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not
* use this file except in compliance with the License. You may obtain a copy of
* the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations under
* the License.
*/
/*
* Cross-browser implementation of the "display: inline-block" CSS property.
* See http://www.w3.org/TR/CSS21/visuren.html#propdef-display for details.
* Tested on IE 6 & 7, FF 2.0 & 3.0, Safari 2 & 3, Webkit and Chrome.
*
* Original author: [email protected] (Attila Bodis)
*/
/*
* Firefox hack is needed for versions < FF3. But since the user.agent property
* does not allow us to specify directly for (versions < FF3), we will need to
* use the following two rules to workaround.
*/
/* Firefox versions >= FF 1.5 */
@if user.agent gecko1_8 {
.inlineBlock {
/*
* Note on funny syntax: what we really need is this: "display: -moz-inline-box;"
* but "\\" is needed to make GWT's CssResource escape the "-" character properly.
*/
display: \\-moz-inline-box; /* This is ignored by FF3 and later*/
}
}
/* Default rule; only Safari, Webkit, FF3 handle it without hacks. */
.inlineBlock {
position: relative;
display: inline-block;
}
/*
* IE specific rules (for IE version IE6/7)
* On IE, "display: inline-block" only gives the element layout, but doesn't
* give it inline behavior. Subsequently setting display to inline does the
* trick.
*/
@if user.agent ie6 {
.inlineBlock {
/* workaround to make IE "hasLayout" */
zoom: 1;
display: inline;
}
}