<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The source code</title>
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
<style type="text/css">
.highlight { display: block; background-color: #ddd; }
</style>
<script type="text/javascript">
function highlight() {
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
}
</script>
</head>
<body onload="prettyPrint(); highlight();">
<pre class="prettyprint lang-js"><span id='Ext-form-field-File-css_mixin-extjs-form-file'>/**
</span> * Creates the base structure of file field.
* @member Ext.form.field.File
*/
@mixin extjs-form-file {
.#{$prefix}form-file-wrap {
.#{$prefix}form-text {
color: #777;
}
.#{$prefix}form-file-btn {
overflow: hidden;
}
.#{$prefix}form-file-input {
position: absolute;
top: -4px;
right: -2px;
height: $form-field-height + 8;
@include opacity(0);
/* Yes, there's actually a good reason for this...
* If the configured buttonText is set to something longer than the default,
* then it will quickly exceed the width of the hidden file input's "Browse..."
* button, so part of the custom button's clickable area will be covered by
* the hidden file input's text box instead. This results in a text-selection
* mouse cursor over that part of the button, at least in Firefox, which is
* confusing to a user. Giving the hidden file input a huge font-size makes
* the native button part very large so it will cover the whole clickable area.
*/
font-size: 100px;
}
}
}</pre>
</body>
</html>