mirror of
https://github.com/fergalmoran/robotopro.git
synced 2025-12-22 01:08:59 +00:00
391 lines
6.5 KiB
Plaintext
Executable File
391 lines
6.5 KiB
Plaintext
Executable File
//some file input variables
|
|
@file-input-bg:#FFF;
|
|
@file-input-border:#D5D5D5;
|
|
@file-input-shadow:~"0 0 0 4px rgba(0,0,0,0.06)";
|
|
|
|
@file-input-hover-border:#F59942;
|
|
@file-input-hover-shadow:~"0 0 0 4px rgba(245, 153, 66, 0.3)";
|
|
|
|
@file-input-btn-bg:#6FB3E0;
|
|
@file-input-name-color:#888;
|
|
@file-input-selected-name-color:#666;
|
|
|
|
@file-input-icon-bg:#D1D1D1;
|
|
@file-input-selected-icon-bg:#EFAD62;
|
|
@file-input-selected-icon-picture-bg:#BD7A9D;
|
|
@file-input-selected-icon-film-bg:#87B87F;
|
|
@file-input-selected-icon-music-bg:#8B7AC9;
|
|
@file-input-selected-icon-archive-bg:#EFAD62;
|
|
|
|
@file-remove-bg:#FB7142;
|
|
@file-multi-remove-color:#F4C0B1;
|
|
@file-multi-border:#AAA;
|
|
|
|
|
|
|
|
.ace-file-input {
|
|
position:relative;
|
|
height:38px;
|
|
line-height:38px;
|
|
margin-bottom:9px;
|
|
|
|
input[type=file] {
|
|
position:fixed;
|
|
z-index:-2;
|
|
opacity:0;
|
|
}
|
|
|
|
|
|
label {
|
|
display:block;
|
|
position:absolute;
|
|
top:0; left:0; right:0; height:28px;
|
|
|
|
background-color:@file-input-bg;
|
|
border:1px solid @file-input-border;
|
|
|
|
cursor:pointer;
|
|
|
|
//.box-shadow(@file-input-shadow);
|
|
.box-shadow(none);
|
|
|
|
.transition(~"all 0.15s");
|
|
|
|
&:hover {
|
|
//.box-shadow(@file-input-hover-shadow);
|
|
.box-shadow(none);
|
|
border-color:@file-input-hover-border;
|
|
}
|
|
&:before { /* the button */
|
|
display:inline-block;
|
|
content:attr(data-title);
|
|
|
|
position:absolute;
|
|
right:0; top:0; bottom:0; padding:0 8px;
|
|
line-height:24px;
|
|
text-align:center;
|
|
|
|
background-color:@file-input-btn-bg;
|
|
color:#FFF;
|
|
font-size:11px; font-weight:bold;
|
|
|
|
border:2px solid #FFF;
|
|
border-left-width:4px;
|
|
|
|
.transition(~"all 0.3s");
|
|
}
|
|
|
|
|
|
span { /* the file name container */
|
|
display:inline-block;
|
|
height:28px; max-width:80%; white-space:nowrap; overflow:hidden;
|
|
line-height:28px;
|
|
color:@file-input-name-color;
|
|
font-size:13px;
|
|
|
|
position:static;
|
|
padding-left:30px;
|
|
|
|
&:after { /* the file name */
|
|
display:inline-block;
|
|
content:attr(data-title);
|
|
}
|
|
}
|
|
&.selected {
|
|
right:16px;
|
|
span {
|
|
color:@file-input-selected-name-color;
|
|
}
|
|
|
|
}
|
|
|
|
[class*="icon-"] {
|
|
.ace-file-icon();
|
|
background-color:@file-input-icon-bg;//should be here
|
|
}
|
|
&.selected {
|
|
[class*="icon-"] {
|
|
background-color:@file-input-selected-icon-bg;
|
|
}
|
|
.icon-picture {
|
|
background-color:@file-input-selected-icon-picture-bg;
|
|
}
|
|
.icon-film {
|
|
background-color:@file-input-selected-icon-film-bg;
|
|
}
|
|
.icon-music {
|
|
background-color:@file-input-selected-icon-music-bg;
|
|
}
|
|
.icon-archive {
|
|
background-color:@file-input-selected-icon-archive-bg;
|
|
}
|
|
}
|
|
&.hide-placeholder:before {
|
|
display:none;
|
|
}
|
|
|
|
}
|
|
|
|
a:hover{
|
|
text-decoration:none;
|
|
}
|
|
.remove { /* the remove button */
|
|
position:absolute;
|
|
right:-8px; top:6px;
|
|
display:none;
|
|
|
|
width:17px; text-align:center;
|
|
height:17px; line-height:15px;
|
|
|
|
font-size:11px; font-weight:normal;
|
|
|
|
background-color:@file-remove-bg;
|
|
.border-radius(100%);
|
|
color:#FFF;
|
|
text-decoration:none;
|
|
}
|
|
label.selected + .remove {
|
|
display:inline-block;
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.ace-file-icon() {
|
|
display:inline-block;
|
|
position:absolute;
|
|
left:0; top:0; bottom:0;
|
|
line-height:22px;
|
|
width:22px;
|
|
text-align:center;
|
|
|
|
font-family:FontAwesome; font-size:13px;
|
|
|
|
|
|
border:2px solid #FFF;
|
|
|
|
color:#FFF;
|
|
|
|
.transition(~"all 0.1s");
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.ace-file-multiple {
|
|
height:auto;
|
|
label {
|
|
position:relative;
|
|
height:auto;
|
|
border:1px dashed @file-multi-border;
|
|
border-radius:4px;
|
|
text-align:center;
|
|
|
|
&:before {/* the button */
|
|
display:inline-block;
|
|
content:attr(data-title);
|
|
|
|
position:relative;
|
|
right:0; left:0; margin:12px;
|
|
line-height:22px;
|
|
|
|
background-color:#FFF;
|
|
color:#CCC;
|
|
font-size:18px; font-weight:bold;
|
|
|
|
border:none;
|
|
}
|
|
&.selected span [class*="icon-"] {
|
|
.ace-file-icon();
|
|
}
|
|
|
|
|
|
span {
|
|
position:relative;
|
|
display:block;
|
|
padding:0;
|
|
height:auto;
|
|
width:auto; max-width:100%; margin:0 4px;
|
|
border-bottom:1px solid #DDD;
|
|
text-align:left;
|
|
|
|
&:first-child {
|
|
margin-top:1px;
|
|
}
|
|
&:last-child {
|
|
border-bottom-width:0;
|
|
margin-bottom:1px;
|
|
}
|
|
img {
|
|
padding:2px;
|
|
border:1px solid #D7D7D7;
|
|
background-color:#FFF;
|
|
background-repeat:no-repeat;
|
|
background-position: center;
|
|
|
|
margin:4px 8px 4px 1px;
|
|
}
|
|
&:after { /* the file name */
|
|
display:none;
|
|
}
|
|
}
|
|
&.selected span:after { /* the file name */
|
|
display:inline-block;
|
|
white-space:pre;
|
|
}
|
|
span img + [class*="icon-"] , &.selected span img + [class*="icon-"] {
|
|
display:none;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.remove {
|
|
right:-11px; top:-11px;
|
|
border:3px solid #BBB;
|
|
border-radius:32px;
|
|
|
|
background-color:#FFF;
|
|
color:red;
|
|
}
|
|
label.selected + .remove:hover {
|
|
border-color:@file-multi-remove-color;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.ace-file-multiple label {
|
|
span [class*="icon-"] {
|
|
position:relative;
|
|
display:block;
|
|
text-align:center;
|
|
height:auto; line-height:64px;
|
|
width:auto;
|
|
|
|
font-size:64px; color:#D5D5D5;
|
|
|
|
margin:4px 0;
|
|
|
|
background-color:transparent;
|
|
}
|
|
|
|
&.selected:after {
|
|
display:none;
|
|
}
|
|
&.selected span [class*="icon-"] {
|
|
position:relative;
|
|
margin-right:4px; margin-left:2px;
|
|
line-height:24px;
|
|
}
|
|
|
|
|
|
span.large {
|
|
text-align:center;
|
|
border-bottom:2px solid #222;
|
|
margin:0 1px 3px;
|
|
|
|
&:last-child {
|
|
margin:0 1px;
|
|
border-bottom-width:0;
|
|
}
|
|
&:after { /* image caption */
|
|
position:absolute;
|
|
top:auto; bottom:0; left:0; right:0;
|
|
padding:0 4px;
|
|
background-color:#555;
|
|
color:#FFF;
|
|
.opacity(80);
|
|
}
|
|
|
|
img {
|
|
border-width:0;
|
|
margin:0;
|
|
padding:0;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ace-file-input input[type=file] {
|
|
&.disabled , &[disabled] , &[readonly] {
|
|
+ label {
|
|
cursor: not-allowed;
|
|
background-color:#EEE;
|
|
&:hover {
|
|
//box-shadow: 0 0 0 4px rgba(0,0,0,0.06);
|
|
.box-shadow(none);
|
|
border-color:#E3E3E3;
|
|
}
|
|
&:before {
|
|
border-color:#EEE;
|
|
background-color:#A1AAAF;
|
|
}
|
|
}
|
|
}
|
|
&[readonly] + label {
|
|
cursor:default;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
.ace-file-multiple input[type=file] {
|
|
&.disabled , &[disabled] , &[readonly] {
|
|
+ label {
|
|
&:hover {
|
|
border-color:#AAA;
|
|
}
|
|
&:before {
|
|
background-color:transparent;
|
|
}
|
|
|
|
[class*="icon-"] {
|
|
border-color:#EEE;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* IE9 needs this like IE8 to prevent "ACCESS denied" errors! */
|
|
.ace-file-input input[type=file] {
|
|
/*must be visible and on top for ie8/9 to actually work */
|
|
width:~'100%\0/'; height:~'30px\0/';
|
|
position:~'absolute\0/';
|
|
z-index:~'1\0/';
|
|
filter:alpha(opacity=0);
|
|
cursor:~'pointer\0/';
|
|
}
|
|
.ace-file-input input[type=file]:hover + label {
|
|
border-color: @file-input-hover-border~'\0/';
|
|
}
|
|
.ace-file-multiple input[type=file] {
|
|
height:~'100%\0/';
|
|
}
|
|
.ace-file-input .remove {
|
|
z-index:~'2\0/';
|
|
} |