Merge pull request #3187 from nextcloud/inputs-scss-optimisation

Inputs.scss rewritting and optimisation
This commit is contained in:
Morris Jobke 2017-01-22 11:41:49 -06:00 committed by GitHub
commit 0d6e3ca86b
26 changed files with 352 additions and 666 deletions

View File

@ -9,12 +9,8 @@ input[type='submit'] {
margin: 6px;
}
#body-login input[type='submit'] {
position: absolute;
top: 0;
border: none;
}
fieldset > p {
position: relative;
display: flex;
align-items: center;
}

View File

@ -107,29 +107,30 @@ thead {
max-width: 90%;
}
/* header buttons */
#details {
display: inline-flex;
}
#details button,
#details input,
#details .button {
margin: 0 5px;
line-height: normal;
}
#details button:hover,
#details input:hover,
#details .button:hover {
/* No */
border-color: rgba(0,0,0,0.3) !important;
}
/* within #save */
#save .save-form {
position: relative;
}
#remote_address {
margin: 0;
width: 130px;
height: 14px;
padding: 6px;
padding-right: 24px;
}
.ie8 #remote_address {
padding-right: 30px;
}
#save #save-button,
#save #save-button-confirm {
margin: 0 5px;
height: 28px;
padding-bottom: 4px;
line-height: 14px;
width: 200px;
}
#save-button-confirm {
@ -137,31 +138,9 @@ thead {
background-color: transparent;
border: none;
margin: 2px 4px !important;
right: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: .5;
}
.ie8 #save-button-confirm {
margin: 2px 0 !important;
}
#save-button-confirm:disabled,
#save-button-confirm:disabled:hover,
#save-button-confirm:disabled:focus {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
filter: alpha(opacity=20);
opacity: .2;
cursor: default;
}
#save-button-confirm:hover,
#save-button-confirm:focus {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
cursor: pointer;
right: 4px;
box-shadow: none;
height: 30px;
}
#public-upload .avatardiv {

View File

@ -259,7 +259,7 @@ OCA.Sharing.PublicApp = {
$('.save-form').submit(function (event) {
event.preventDefault();
var remote = $(this).find('input[type="text"]').val();
var remote = $(this).find('input[type="email"]').val();
var token = $('#sharingToken').val();
var owner = $('#save').data('owner');
var ownerDisplayName = $('#save').data('owner-display-name');

View File

@ -58,13 +58,13 @@ $maxUploadFilesize = min($upload_max_filesize, $post_max_size);
data-owner-display-name="<?php p($_['displayName']) ?>" data-owner="<?php p($_['owner']) ?>" data-name="<?php p($_['filename']) ?>">
<button id="save-button"><?php p($l->t('Add to your Nextcloud')) ?></button>
<form class="save-form hidden" action="#">
<input type="text" id="remote_address" placeholder="user@yourNextcloud.org"/>
<input type="email" id="remote_address" placeholder="user@yourNextcloud.org"/>
<button id="save-button-confirm" class="icon-confirm svg" disabled></button>
</form>
</span>
<?php } ?>
<a href="<?php p($_['downloadURL']); ?>" id="download" class="button">
<img class="svg" alt="" src="<?php print_unescaped(image_path("core", "actions/download.svg")); ?>"/>
<span class="icon icon-download"></span>
<span id="download-text"><?php p($l->t('Download'))?></span>
</a>
<?php } ?>
@ -89,8 +89,8 @@ $maxUploadFilesize = min($upload_max_filesize, $post_max_size);
<div id="imgframe"></div>
<?php endif; ?>
<div class="directDownload">
<a href="<?php p($_['downloadURL']); ?>" id="downloadFile" class="button">
<img class="svg" alt="" src="<?php print_unescaped(image_path("core", "actions/download.svg")); ?>"/>
<a href="<?php p($_['downloadURL']); ?>" id="downloadFile" class="button primary">
<span class="icon icon-download"></span>
<?php p($l->t('Download %s', array($_['filename'])))?> (<?php p($_['fileSize']) ?>)
</a>
</div>

View File

@ -214,7 +214,8 @@ em {
top: 0;
bottom: 0;
font-size: 12px;
button, .counter {
button,
.counter {
width: 44px;
height: 44px;
padding-top: 12px;
@ -258,6 +259,7 @@ em {
height: 100%;
width: 100%;
margin: 0;
box-shadow: none;
}
.app-navigation-entry-utils-menu-button {
button {
@ -620,6 +622,7 @@ em {
height: auto;
margin: 0;
font-weight: inherit;
box-shadow: none;
/* prevent .action class to break the design */
&.action {
padding: inherit !important;

File diff suppressed because it is too large Load Diff

View File

@ -567,14 +567,13 @@ label.infield {
}
#pass2, input[name='personal-password-clone'] {
padding: .6em 2.5em .4em .4em;
width: 8em;
padding-right: 30px;
}
#personal-show + label {
height: 14px;
margin-top: -25px;
left: 295px;
left: 267px;
display: block;
}
@ -724,9 +723,9 @@ label.infield {
#body-login input {
font-size: 20px;
margin: 5px;
padding: 11px 10px 9px;
padding: 10px 10px 8px;
&[type='text'], &[type='password'] {
width: 249px;
width: calc(100% - 10px); /* 5px margin */
}
&.login {
width: 269px;

View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M2.5 2.5h11v11h-11z" fill="#fff"/><path d="M3 2c-.554 0-1 .446-1 1v10c0 .554.446 1 1 1h10c.554 0 1-.446 1-1V3c0-.554-.446-1-1-1H3zm8.924 2.066l1.433 1.432-6.365 6.365L2.75 7.62l1.414-1.415 2.828 2.83 4.932-4.97z" fill="#969696"/></svg>

Before

Width:  |  Height:  |  Size: 307 B

View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M3 2c-.554 0-1 .446-1 1v10c0 .554.446 1 1 1h10c.554 0 1-.446 1-1V3c0-.554-.446-1-1-1H3zm8.924 2.066l1.433 1.432-6.365 6.365L2.75 7.62l1.414-1.415 2.828 2.83 4.932-4.97z" fill="#fff"/></svg>

Before

Width:  |  Height:  |  Size: 261 B

View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M2.5 2.5h11v11h-11z" fill="#fff"/><path d="M3 2c-.554 0-1 .446-1 1v10c0 .554.446 1 1 1h10c.554 0 1-.446 1-1V3c0-.554-.446-1-1-1H3zm8.924 2.066l1.433 1.432-6.365 6.365L2.75 7.62l1.414-1.415 2.828 2.83 4.932-4.97z" fill="#0082c9"/></svg>

Before

Width:  |  Height:  |  Size: 307 B

View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M2.5 2.5h11v11h-11z" fill="#dcdcdc"/><path d="M3 2c-.554 0-1 .446-1 1v10c0 .554.446 1 1 1h10c.554 0 1-.446 1-1V3c0-.554-.446-1-1-1H3zm0 1h10v10H3V3z" fill="#fff"/></svg>

Before

Width:  |  Height:  |  Size: 241 B

View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M2.5 2.5h11v11h-11z" fill="#dcdcdc"/><path d="M3 2c-.554 0-1 .446-1 1v10c0 .554.446 1 1 1h10c.554 0 1-.446 1-1V3c0-.554-.446-1-1-1H3zm0 1h10v10H3V3z" fill="#969696"/></svg>

Before

Width:  |  Height:  |  Size: 244 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M11.924 4.066l-4.932 4.97-2.828-2.83L2.75 7.618l4.242 4.243 6.365-6.365-1.433-1.432z"/></svg>

After

Width:  |  Height:  |  Size: 165 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M11.924 4.066l-4.932 4.97-2.828-2.83L2.75 7.618l4.242 4.243 6.365-6.365-1.433-1.432z" fill="#fff"/></svg>

After

Width:  |  Height:  |  Size: 177 B

View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M2.5 2.5h11v11h-11z" fill="#dcdcdc"/><path d="M3 2c-.554 0-1 .446-1 1v10c0 .554.446 1 1 1h10c.554 0 1-.446 1-1V3c0-.554-.446-1-1-1H3zm0 1h10v10H3V3z" fill="#969696"/><path d="M4 7h8v2H4z" fill="#fff"/></svg>

Before

Width:  |  Height:  |  Size: 279 B

View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M3 2c-.554 0-1 .446-1 1v10c0 .554.446 1 1 1h10c.554 0 1-.446 1-1V3c0-.554-.446-1-1-1H3zm1 5h8v2H4V7z" fill="#fff"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M4 7v2h8V7H4z"/></svg>

Before

Width:  |  Height:  |  Size: 193 B

After

Width:  |  Height:  |  Size: 94 B

View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M2.5 2.5h11v11h-11z" fill="#fff"/><path d="M3 2c-.554 0-1 .446-1 1v10c0 .554.446 1 1 1h10c.554 0 1-.446 1-1V3c0-.554-.446-1-1-1H3zm1 5h8v2H4V7z" fill="#969696"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M4 7v2h8V7H4z" fill="#fff"/></svg>

Before

Width:  |  Height:  |  Size: 239 B

After

Width:  |  Height:  |  Size: 106 B

View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M3 2c-.554 0-1 .446-1 1v10c0 .554.446 1 1 1h10c.554 0 1-.446 1-1V3c0-.554-.446-1-1-1H3zm0 1h10v10H3V3z" fill="#fff"/></svg>

Before

Width:  |  Height:  |  Size: 195 B

View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M2.5 2.5h11v11h-11z" fill="#fff"/><path d="M3 2c-.554 0-1 .446-1 1v10c0 .554.446 1 1 1h10c.554 0 1-.446 1-1V3c0-.554-.446-1-1-1H3zm0 1h10v10H3V3z" fill="#969696"/></svg>

Before

Width:  |  Height:  |  Size: 241 B

View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M8 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13z" fill="#fff"/><path d="M8 1a7 7 0 0 0-7 7 7 7 0 0 0 7 7 7 7 0 0 0 7-7 7 7 0 0 0-7-7zm0 1a6 6 0 0 1 6 6 6 6 0 0 1-6 6 6 6 0 0 1-6-6 6 6 0 0 1 6-6zm0 2a4 4 0 1 0 0 8 4 4 0 0 0 0-8z" fill="#969696"/></svg>

Before

Width:  |  Height:  |  Size: 320 B

View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M8 1a7 7 0 0 0-7 7 7 7 0 0 0 7 7 7 7 0 0 0 7-7 7 7 0 0 0-7-7zm0 1a6 6 0 0 1 6 6 6 6 0 0 1-6 6 6 6 0 0 1-6-6 6 6 0 0 1 6-6zm0 2a4 4 0 1 0 0 8 4 4 0 0 0 0-8z" fill="#fff"/></svg>

Before

Width:  |  Height:  |  Size: 248 B

View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M8 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13z" fill="#fff"/><path d="M8 1a7 7 0 0 0-7 7 7 7 0 0 0 7 7 7 7 0 0 0 7-7 7 7 0 0 0-7-7zm0 1a6 6 0 0 1 6 6 6 6 0 0 1-6 6 6 6 0 0 1-6-6 6 6 0 0 1 6-6zm0 2a4 4 0 1 0 0 8 4 4 0 0 0 0-8z" fill="#0082c9"/></svg>

Before

Width:  |  Height:  |  Size: 320 B

View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M8 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13z" fill="#dcdcdc"/><path d="M8 1a7 7 0 0 0-7 7 7 7 0 0 0 7 7 7 7 0 0 0 7-7 7 7 0 0 0-7-7zm0 1a6 6 0 0 1 6 6 6 6 0 0 1-6 6 6 6 0 0 1-6-6 6 6 0 0 1 6-6z" fill="#969696"/></svg>

Before

Width:  |  Height:  |  Size: 290 B

View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M8 1a7 7 0 0 0-7 7 7 7 0 0 0 7 7 7 7 0 0 0 7-7 7 7 0 0 0-7-7zm0 1a6 6 0 0 1 6 6 6 6 0 0 1-6 6 6 6 0 0 1-6-6 6 6 0 0 1 6-6z" fill="#fff"/></svg>

Before

Width:  |  Height:  |  Size: 215 B

View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M8 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13z" fill="#fff"/><path d="M8 1a7 7 0 0 0-7 7 7 7 0 0 0 7 7 7 7 0 0 0 7-7 7 7 0 0 0-7-7zm0 1a6 6 0 0 1 6 6 6 6 0 0 1-6 6 6 6 0 0 1-6-6 6 6 0 0 1 6-6z" fill="#969696"/></svg>

Before

Width:  |  Height:  |  Size: 287 B

View File

@ -399,7 +399,7 @@ table.grid th, table.grid td {
font-weight: normal;
}
td.name, td.password { padding-left:.8em; }
td.password>img,td.displayName>img, td.remove>a, td.quota>img { visibility:hidden; }
td.password>img,td.displayName>img, td.remove>a, td.quota>img { visibility:hidden; vertical-align: middle;}
td.password, td.quota, td.displayName { width:12em; cursor:pointer; }
td.password>span, td.quota>span, rd.displayName>span { margin-right: 1.2em; color: #C7C7C7; }
span.usersLastLoginTooltip { white-space: nowrap; }
@ -804,9 +804,9 @@ span.indeterminate {
/* PASSWORD */
#passwordform .strengthify-wrapper {
position: absolute;
left: 186px;
width: 131px;
margin-top: -7px;
left: 166px;
width: 130px;
margin-top: -6px;
}
/* OPERA hack for strengthify*/