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

Inputs.scss rewritting and optimisation

3 files changed, 305 insertions, 582 deletions

diff --git a/core/css/apps.scss b/core/css/apps.scss
index 93e60fbfbf1..17eb2c1f9ad 100644
--- a/core/css/apps.scss
+++ b/core/css/apps.scss
@@ -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;
diff --git a/core/css/inputs.scss b/core/css/inputs.scss
index aa9c841f2b2..a1af00298e5 100644
--- a/core/css/inputs.scss
+++ b/core/css/inputs.scss
@@ -1,163 +1,194 @@
-/* INPUTS */
-
-/* specifically override browser styles */
-
+/* Specifically override browser styles */
 input, textarea, select, button {
 	font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif;
 }
-
 .select2-container-multi .select2-choices .select2-search-field input, .select2-search input, .ui-widget {
 	font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif !important;
 }
 
-input {
-	&[type='text'], &[type='password'], &[type='search'], &[type='number'], &[type='email'], &[type='tel'], &[type='url'], &[type='time'], &[type='date'] {
-		width: 130px;
-		margin: 3px 3px 3px 0;
-		padding: 7px 6px 5px;
-		font-size: 13px;
-		background-color: #fff;
-		color: #333;
-		border: 1px solid #ddd;
-		outline: none;
-		border-radius: 3px;
-	}
-}
-
-textarea, select, button, .button {
+/* Simple selector to allow easy overriding */
+select,
+button,
+input,
+textarea {
 	width: 130px;
-	margin: 3px 3px 3px 0;
-	padding: 7px 6px 5px;
-	font-size: 13px;
-	background-color: #fff;
-	color: #333;
-	border: 1px solid #ddd;
-	outline: none;
-	border-radius: 3px;
-}
-
-input {
-	&[type='submit'], &[type='button'] {
-		width: 130px;
-		margin: 3px 3px 3px 0;
-		padding: 7px 6px 5px;
-		font-size: 13px;
-		background-color: #fff;
-		color: #333;
-		border: 1px solid #ddd;
-		outline: none;
-		border-radius: 3px;
-	}
+	min-height: 32px;
+	box-sizing: border-box;
 }
 
-#quota, .pager li a {
-	width: 130px;
+/* Default global values */
+select,
+button, .button,
+input:not([type='range']),
+textarea,
+#quota,	.pager li a {
 	margin: 3px 3px 3px 0;
-	padding: 7px 6px 5px;
+	padding: 7px 6px;
 	font-size: 13px;
 	background-color: #fff;
 	color: #333;
 	border: 1px solid #ddd;
 	outline: none;
 	border-radius: 3px;
-}
-
-input {
-	&[type='hidden'] {
-		height: 0;
-		width: 0;
+	&:not(:disabled):not(.primary) {
+		/* no border on quota */
+		&:not(#quota):hover,
+		&:focus,
+		&.active {
+		/* active class used for multiselect */
+			border-color: #0082c9;
+			outline: none;
+		}
+		&:active {
+			outline: none;
+			background-color: #fff;
+		}
 	}
-	&[type='text'], &[type='password'], &[type='search'], &[type='number'], &[type='email'], &[type='tel'], &[type='url'], &[type='time'] {
-		background: #fff;
-		color: #555;
-		cursor: text;
-		font-family: inherit;
-		/* use default ownCloud font instead of default textarea monospace */
+	&:disabled {
+		background-color: #eee;
+		color: #999;
+		cursor: default;
+		opacity: 0.5;
+	}
+	/* Primary action button, use sparingly */
+	&.primary {
+		border: 1px solid #0082c9;
+		background-color: #00a2e9;
+		color: #fff;
+		cursor: pointer;
+		&:not(:disabled) {
+			&:hover,
+			&:focus {
+				background-color: #0092d9;
+			}
+			&:active {
+				background-color: #00a2e9;
+			}
+		}
+		&:disabled {
+			background-color: #00a2e9;
+			color: #bbb;
+		}
 	}
 }
 
-textarea {
-	background: #fff;
-	color: #555;
-	cursor: text;
-	font-family: inherit;
-	/* use default ownCloud font instead of default textarea monospace */
-}
-
+/* Specific override */
 input {
-	&[type='text'], &[type='password'], &[type='search'], &[type='number'], &[type='email'], &[type='tel'], &[type='url'], &[type='time'] {
+	&:not([type='radio']):not([type='checkbox']):not([type='range']):not([type='submit']):not([type='button']):not([type='reset']):not([type='color']):not([type='file']):not([type='image']) {
 		-webkit-appearance: textfield;
 		-moz-appearance: textfield;
-		box-sizing: content-box;
-	}
-	&[type='text'] {
-		&:hover, &:focus, &:active {
-			color: #333;
-			-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
-			opacity: 1;
-		}
-	}
-	&[type='password'] {
-		&:hover, &:focus, &:active {
-			color: #333;
-			-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
-			opacity: 1;
-		}
 	}
-	&[type='number'] {
-		&:hover, &:focus, &:active {
-			color: #333;
-			-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
-			opacity: 1;
-		}
-	}
-	&[type='search'] {
-		&:hover, &:focus, &:active {
-			color: #333;
-			-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
-			opacity: 1;
-		}
-	}
-	&[type='email'] {
-		&:hover, &:focus, &:active {
-			color: #333;
-			-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
-			opacity: 1;
-		}
+	&[type='radio'],
+	&[type='checkbox'],
+	&[type='file'],
+	&[type='image'] {
+		height: auto;
+		width: auto;
 	}
-	&[type='tel'] {
-		&:hover, &:focus, &:active {
-			color: #333;
-			-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
-			opacity: 1;
-		}
+	/* Color input doesn't respect the initial height
+ so we need to set a custom one */
+	&[type='color'] {
+		margin: 3px;
+		padding: 0 2px;
+		min-height: 30px;
+		width: 40px;
+		cursor: pointer;
 	}
-	&[type='url'] {
-		&:hover, &:focus, &:active {
-			color: #333;
-			-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
-			opacity: 1;
-		}
+	&[type='hidden'] {
+		height: 0;
+		width: 0;
 	}
 	&[type='time'] {
-		&:hover, &:focus, &:active {
-			color: #333;
-			-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
-			opacity: 1;
+		width: initial;
+	}
+}
+
+/* 'Click' inputs */
+select,
+button, .button,
+input[type='button'],
+input[type='submit'],
+input[type='reset'] {
+	padding: 6px 12px;
+	width: auto;
+	min-height: 34px;
+	cursor: pointer;
+	box-sizing: border-box;
+	background-color: #fafafa;
+	box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.15);
+	&:active,
+	&.active {
+		box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.15);
+	}
+}
+
+/* Buttons */
+button, .button,
+input[type='button'],
+input[type='submit'],
+input[type='reset'] {
+	font-weight: bold;
+	/* Get rid of the ugly firefox dotted line */
+	&::-moz-focus-inner {
+		border: 0;
+	}
+}
+button, .button {
+	> span { 
+		/* icon position inside buttons */
+		&[class^='icon-'],
+		&[class*=' icon-'] {
+			display: inline-block;
+			vertical-align: text-bottom;
+			opacity: 0.5;
 		}
 	}
 }
 
 textarea {
-	&:hover, &:focus, &:active {
-		color: #333;
-		-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
-		opacity: 1;
+	color: #555;
+	cursor: text;
+	font-family: inherit;
+	height: auto;
+	&:not(:disabled) {
+		&:active,
+		&:hover,
+		&:focus {
+			border-color: #ddd !important;
+			background-color: #fff !important;
+		}
 	}
 }
 
+/* Override the ugly select arrow */
+select {
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+	background: url('../img/actions/triangle-s.svg') no-repeat right 4px center;
+	background-color: inherit;
+	outline: 0;
+	padding-right: 24px !important;
+}
+
+/* Various Fixes */
+button img,
+.button img {
+	cursor: pointer;
+}
+#quota {
+	color: #555;
+}
+select,
+.button.multiselect {
+	font-weight: 400;
+}
+
+/* Radio & Checkboxes */
 input {
-	&[type='checkbox'] {
+	&[type='checkbox'],
+	&[type='radio'] {
+		&.radio,
 		&.checkbox {
 			position: absolute;
 			left: -10000px;
@@ -165,126 +196,109 @@ input {
 			width: 1px;
 			height: 1px;
 			overflow: hidden;
+			+ label {
+				user-select: none;
+			}
+			&:disabled + label,
+			&:disabled + label:before {
+				cursor: default;
+			}
 			+ label:before {
 				content: '';
 				display: inline-block;
-				height: 20px;
-				width: 20px;
+				height: 12px;
+				width: 12px;
 				vertical-align: middle;
-				background: url('../img/actions/checkbox.svg') left top no-repeat;
-			}
-			&:disabled + label:before {
-				opacity: .6;
+				border-radius: 50%;
+				margin: 3px;
+				margin-top: 1px;
+				border: 1px solid #888;
 			}
-			&.u-left + label:before {
-				float: left;
+			&:not(:disabled):not(:checked) + label:hover:before,
+			&:focus + label:before {
+				border-color: #0082c9;
 			}
-			&.u-hidden + label:before {
-				display: none;
-			}
-			&:checked + label:before {
-				background-image: url('../img/actions/checkbox-checked.svg');
-			}
-			&:indeterminate + label:before {
-				background-image: url('../img/actions/checkbox-mixed.svg');
+			&:checked + label:before,
+			&.checkbox:indeterminate + label:before {
+			/* ^ :indeterminate have a strange behavior on radio,
+			so we respecified the checkbox class again to be safe */
+				box-shadow: inset 0px 0px 0px 2px #fff;
+				background-color: #0082c9;
+				border-color: #0082c9
 			}
 			&:disabled + label:before {
-				background-image: url('../img/actions/checkbox-disabled.svg');
+				background-color: #ccc !important; /* override other status */
 			}
 			&:checked:disabled + label:before {
-				background-image: url('../img/actions/checkbox-checked-disabled.svg');
-			}
-			&:indeterminate:disabled + label:before {
-				background-image: url('../img/actions/checkbox-mixed-disabled.svg');
+				box-shadow: inset 0px 0px 0px 2px #fff;
+				border-color: #aaa;
+				background-color: #bbb;
 			}
 		}
-		&.checkbox--white {
+		&.checkbox {
 			+ label:before {
-				background-image: url('../img/actions/checkbox-white.svg');
+				border-radius: 1px;
+				height: 10px;
+				width: 10px;
+				box-shadow: none !important;
+				background-position: center;
 			}
 			&:checked + label:before {
-				background-image: url('../img/actions/checkbox-checked-white.svg');
+				background-image: url('../img/actions/checkbox-mark.svg');
 			}
 			&:indeterminate + label:before {
-				background-image: url('../img/actions/checkbox-mixed-white.svg');
-			}
-			&:disabled + label:before {
-				background-image: url('../img/actions/checkbox-disabled-white.svg');
-			}
-			&:checked:disabled + label:before {
-				background-image: url('../img/actions/checkbox-checked-disabled.svg');
+				background-image: url('../img/actions/checkbox-mixed.svg');
 			}
 			&:indeterminate:disabled + label:before {
-				background-image: url('../img/actions/checkbox-mixed-disabled.svg');
+				border-color: #888;
 			}
 		}
-		&.checkbox:hover + label:before, &:focus + label:before {
-			color: #111 !important;
-		}
-	}
-	&[type='radio'] {
-		&.radio {
-			position: absolute;
-			left: -10000px;
-			top: auto;
-			width: 1px;
-			height: 1px;
-			overflow: hidden;
+		&.radio--white,
+		&.checkbox--white {
 			+ label:before {
-				content: '';
-				display: inline-block;
-				height: 20px;
-				width: 20px;
-				vertical-align: middle;
-				background: url('../img/actions/radio.svg') left top no-repeat;
+				border-color: #aaa;
 			}
-			&:checked + label:before {
-				background-image: url('../img/actions/radio-checked.svg');
+			&:not(:disabled):not(:checked) + label:hover:before,
+			&:focus + label:before {
+				border-color: #fff;
+			}
+			&:checked + label:before,
+			&.checkbox:indeterminate + label:before {
+			/* ^ :indeterminate have a strange behavior on radio,
+			so we respecified the checkbox class again to be safe */
+				box-shadow: inset 0px 0px 0px 2px #000;
+				background-color: #eee;
+				border-color: #eee
 			}
 			&:disabled + label:before {
-				background-image: url('../img/actions/radio-disabled.svg');
+				background-color: #666 !important; /* override other status */
+				border-color: #999 !important; /* override other status */
 			}
 			&:checked:disabled + label:before {
-				background-image: url('../img/actions/radio-checked-disabled.svg');
+				box-shadow: inset 0px 0px 0px 2px #000;
+				border-color: #666;
+				background-color: #222;
 			}
 		}
-		&.radio--white {
-			+ label:before {
-				background-image: url('../img/actions/radio-white.svg');
-			}
+		&.checkbox--white {
 			&:checked + label:before {
-				background-image: url('../img/actions/radio-checked-white.svg');
+				background-image: url('../img/actions/checkbox-mark-white.svg');
 			}
-			&:disabled + label:before {
-				background-image: url('../img/actions/radio-disabled.svg');
+			&:indeterminate + label:before {
+				background-image: url('../img/actions/checkbox-mixed-white.svg');
 			}
-			&:checked:disabled + label:before {
-				background-image: url('../img/actions/radio-checked-disabled.svg');
+			&:checked:disabled + label:after {
+				border-color: #aaa;
+			}
+			&:indeterminate:disabled + label:after {
+				background-color: #aaa;
 			}
 		}
 	}
-	&[type='time'] {
-		width: initial;
-		height: 31px;
-		box-sizing: border-box;
-	}
 }
 
-select {
-	-webkit-appearance: none;
-	-moz-appearance: none;
-	appearance: none;
-	background: url('../../core/img/actions/triangle-s.svg') no-repeat right 8px center rgba(240, 240, 240, 0.9);
-	outline: 0;
-	padding-right: 24px !important;
-	&:hover {
-		background-color: #fefefe;
-	}
-}
-
-/* select2 adjustments */
-
-#select2-drop {
+/* Select2 overriding. Merged to core with vendor stylesheet */
+.select2-drop {
 	margin-top: -2px;
 	&.select2-drop-active {
 		border-color: #ddd;
@@ -297,15 +311,7 @@ select {
 			cursor: pointer;
 		}
 	}
-}
-
-.select2-chosen .avatar img, #select2-drop .avatar, .select2-chosen .avatar {
-	cursor: pointer;
-}
-
-#select2-drop {
 	.select2-search input {
-		width: calc(100% - 14px);
 		min-height: auto;
 		background: url('../img/actions/search.svg') no-repeat right center !important;
 		background-origin: content-box !important;
@@ -322,7 +328,9 @@ select {
 				cursor: pointer;
 			}
 		}
-		.select2-result, .select2-no-results, .select2-searching {
+		.select2-result,
+		.select2-no-results,
+		.select2-searching {
 			position: relative;
 			display: list-item;
 			padding: 12px;
@@ -341,9 +349,16 @@ select {
 		}
 	}
 }
-
+.select2-chosen,
+#select2-drop {
+	.avatar,
+	.avatar img {
+		cursor: pointer;
+	}
+}
 .select2-container-multi {
-	.select2-choices, &.select2-container-active .select2-choices {
+	.select2-choices,
+	&.select2-container-active .select2-choices {
 		box-shadow: none;
 		white-space: nowrap;
 		text-overflow: ellipsis;
@@ -355,83 +370,28 @@ select {
 		margin: 0;
 		padding: 2px 0;
 		min-height: auto;
-	}
-}
-
-.select2-container .select2-choice {
-	box-shadow: none;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-	background: #fff;
-	color: #555;
-	box-sizing: content-box;
-	border-radius: 3px;
-	border: 1px solid #ddd;
-	margin: 0;
-	padding: 2px 0;
-	min-height: auto;
-}
-
-.select2-container-multi {
-	.select2-choices .select2-search-choice, &.select2-container-active .select2-choices .select2-search-choice {
-		line-height: 20px;
-		padding-left: 5px;
-		background-image: none;
-		background-color: #f8f8f8;
-		border-color: #f8f8f8;
-	}
-}
-
-.select2-container .select2-choice .select2-search-choice {
-	line-height: 20px;
-	padding-left: 5px;
-	background-image: none;
-	background-color: #f8f8f8;
-	border-color: #f8f8f8;
-}
-
-.select2-container-multi {
-	.select2-choices .select2-search-choice {
-		&.select2-search-choice-focus, &:hover {
-			background-color: #f0f0f0;
-			border-color: #f0f0f0;
+		.select2-search-choice {
+			line-height: 20px;
+			padding-left: 5px;
+			&.select2-search-choice-focus,
+			&:hover,
+			&:active,
+			& {
+				background-image: none;
+				background-color: #fff;
+				color: #333;
+				border: 1px solid #ddd;
+			}
+			.select2-search-choice-close {
+				display: none;
+			}
 		}
-	}
-	&.select2-container-active .select2-choices .select2-search-choice {
-		&.select2-search-choice-focus, &:hover {
-			background-color: #f0f0f0;
-			border-color: #f0f0f0;
+		.select2-search-field input {
+			line-height: 20px;
 		}
 	}
 }
-
-.select2-container .select2-choice .select2-search-choice {
-	&.select2-search-choice-focus, &:hover {
-		background-color: #f0f0f0;
-		border-color: #f0f0f0;
-	}
-}
-
-.select2-container-multi {
-	.select2-choices .select2-search-choice .select2-search-choice-close, &.select2-container-active .select2-choices .select2-search-choice .select2-search-choice-close {
-		display: none;
-	}
-}
-
-.select2-container .select2-choice .select2-search-choice .select2-search-choice-close {
-	display: none;
-}
-
-.select2-container-multi {
-	.select2-choices .select2-search-field input, &.select2-container-active .select2-choices .select2-search-field input {
-		line-height: 20px;
-	}
-}
-
 .select2-container {
-	.select2-choice .select2-search-field input {
-		line-height: 20px;
-	}
 	margin: 3px 3px 3px 0;
 	&.select2-container-multi .select2-choices {
 		display: flex;
@@ -441,7 +401,33 @@ select {
 		}
 	}
 	.select2-choice {
-		padding-left: 38px;
+		box-shadow: none;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		background: #fff;
+		color: #555;
+		box-sizing: content-box;
+		border-radius: 3px;
+		border: 1px solid #ddd;
+		margin: 0;
+		padding: 2px 0;
+		padding-left: 6px;
+		min-height: auto;
+		.select2-search-choice {
+			line-height: 20px;
+			padding-left: 5px;
+			background-image: none;
+			background-color: #f8f8f8;
+			border-color: #f8f8f8;
+			.select2-search-choice-close {
+				display: none;
+			}
+			&.select2-search-choice-focus,
+			&:hover {
+				background-color: #f0f0f0;
+				border-color: #f0f0f0;
+			}
+		}
 		.select2-arrow {
 			background: none;
 			border-radius: 0;
@@ -451,14 +437,19 @@ select {
 				opacity: .5;
 			}
 		}
-		&:hover .select2-arrow b, &:focus .select2-arrow b, &:active .select2-arrow b {
+		&:hover .select2-arrow b,
+		&:focus .select2-arrow b,
+		&:active .select2-arrow b {
 			opacity: .7;
 		}
+		.select2-search-field input {
+			line-height: 20px;
+		}
 	}
 }
 
-/* jQuery UI fixes */
-
+/* Select menus - TODO: move to jquery-ui-fixes.css
+----------------------------------*/
 .ui-menu {
 	padding: 0;
 	.ui-menu-item a {
@@ -485,298 +476,28 @@ select {
 	background: #f8f8f8;
 }
 
-/* correctly align images inside of buttons */
-
-input img, button img, .button img {
-	vertical-align: text-bottom;
-}
-
-input[type='submit'].enabled {
-	background-color: #66f866;
-	border: 1px solid #5e5;
-}
-
-.input-button-inline {
-	position: absolute !important;
-	right: 0;
-	background-color: transparent !important;
-	-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=30)';
-	opacity: .3;
-}
-
-/* BUTTONS */
-
-input {
-	&[type='submit'], &[type='button'] {
-		width: auto;
-		min-width: 25px;
-		padding: 5px;
-		background-color: rgba(240, 240, 240, 0.9);
-		font-weight: 600;
-		color: #555;
-		border: 1px solid rgba(240, 240, 240, 0.9);
-		cursor: pointer;
-	}
-}
-
-button, .button, #quota, select, .pager li a {
-	width: auto;
-	min-width: 25px;
-	padding: 5px;
-	background-color: rgba(240, 240, 240, 0.9);
-	font-weight: 600;
-	color: #555;
-	border: 1px solid rgba(240, 240, 240, 0.9);
-	cursor: pointer;
-}
-
-select, .button.multiselect {
-	font-weight: 400;
-}
-
-input {
-	&[type='submit'] {
-		&:hover, &:focus {
-			background-color: rgba(255, 255, 255, 0.95);
-			color: #111;
-		}
-	}
-	&[type='button'] {
-		&:hover, &:focus {
-			background-color: rgba(255, 255, 255, 0.95);
-			color: #111;
-		}
-	}
-}
-
-button {
-	&:hover, &:focus {
-		background-color: rgba(255, 255, 255, 0.95);
-		color: #111;
-	}
-}
-
-.button {
-	&:hover, &:focus, a:focus {
-		background-color: rgba(255, 255, 255, 0.95);
-		color: #111;
-	}
-}
-
-select {
-	&:hover, &:focus, &:active {
-		background-color: rgba(255, 255, 255, 0.95);
-		color: #111;
-	}
-}
-
-input {
-	&[type='submit'] img, &[type='button'] img {
-		cursor: pointer;
-	}
-}
-
-button img, .button img {
-	cursor: pointer;
-}
-
-#header .button {
-	border: none;
-	box-shadow: none;
-}
-
-/* disabled input fields and buttons */
-
-input:disabled {
-	background-color: rgba(230, 230, 230, 0.9);
-	color: #999;
-	cursor: default;
-	&:hover, &:focus {
-		background-color: rgba(230, 230, 230, 0.9);
-		color: #999;
-		cursor: default;
-	}
-}
-
-button:disabled {
-	background-color: rgba(230, 230, 230, 0.9);
-	color: #999;
-	cursor: default;
-	&:hover, &:focus {
-		background-color: rgba(230, 230, 230, 0.9);
-		color: #999;
-		cursor: default;
-	}
-}
-
-.button:disabled {
-	background-color: rgba(230, 230, 230, 0.9);
-	color: #999;
-	cursor: default;
-	&:hover, &:focus {
-		background-color: rgba(230, 230, 230, 0.9);
-		color: #999;
-		cursor: default;
-	}
-}
-
-a.disabled {
-	background-color: rgba(230, 230, 230, 0.9);
-	color: #999;
-	cursor: default;
-	&:hover, &:focus {
-		background-color: rgba(230, 230, 230, 0.9);
-		color: #999;
-		cursor: default;
-	}
-}
-
-textarea:disabled {
-	background-color: rgba(230, 230, 230, 0.9);
-	color: #999;
-	cursor: default;
-}
-
-input:disabled {
-	+ label, &:hover + label, &:focus + label {
-		color: #999 !important;
-		cursor: default;
-	}
-}
-
-/* Primary action button, use sparingly */
-
-.primary {
-	border: 1px solid #0082c9;
-	background-color: #00a2e9;
-	color: #fff;
-}
-
-input {
-	&[type='submit'].primary, &[type='button'].primary {
-		border: 1px solid #0082c9;
-		background-color: #00a2e9;
-		color: #fff;
-	}
-}
-
-button.primary, .button.primary {
-	border: 1px solid #0082c9;
-	background-color: #00a2e9;
-	color: #fff;
-}
-
-.primary:hover {
-	background-color: #0092d9;
-	color: #fff;
-}
-
-input {
-	&[type='submit'].primary:hover, &[type='button'].primary:hover {
-		background-color: #0092d9;
-		color: #fff;
-	}
-}
-
-button.primary:hover, .button.primary:hover, .primary:focus {
-	background-color: #0092d9;
-	color: #fff;
-}
-
-input {
-	&[type='submit'].primary:focus, &[type='button'].primary:focus {
-		background-color: #0092d9;
-		color: #fff;
-	}
-}
-
-button.primary:focus, .button.primary:focus {
-	background-color: #0092d9;
-	color: #fff;
-}
-
-.primary:active {
-	background-color: #00a2e9;
-	color: #bbb;
-}
-
-input {
-	&[type='submit'].primary:active, &[type='button'].primary:active {
-		background-color: #00a2e9;
-		color: #bbb;
-	}
-}
-
-button.primary:active, .button.primary:active, .primary:disabled {
-	background-color: #00a2e9;
-	color: #bbb;
-}
-
-input {
-	&[type='submit'].primary:disabled, &[type='button'].primary:disabled {
-		background-color: #00a2e9;
-		color: #bbb;
-	}
-}
-
-button.primary:disabled, .button.primary:disabled, .primary:disabled:hover {
-	background-color: #00a2e9;
-	color: #bbb;
-}
-
-input {
-	&[type='submit'].primary:disabled:hover, &[type='button'].primary:disabled:hover {
-		background-color: #00a2e9;
-		color: #bbb;
-	}
-}
-
-button.primary:disabled:hover, .button.primary:disabled:hover, .primary:disabled:focus {
-	background-color: #00a2e9;
-	color: #bbb;
-}
-
-input {
-	&[type='submit'].primary:disabled:focus, &[type='button'].primary:disabled:focus {
-		background-color: #00a2e9;
-		color: #bbb;
-	}
-}
-
-button.primary:disabled:focus, .button.primary:disabled:focus {
-	background-color: #00a2e9;
-	color: #bbb;
-}
-
+/* Animation */
 @keyframes shake {
-	0% {
-		transform: translate(-5px, 0);
+	10%,
+	90% {
+		transform: translate(-1px);
 	}
-
-	20% {
-		transform: translate(5px, 0);
+	20%,
+	80% {
+		transform: translate(2px);
 	}
-
-	40% {
-		transform: translate(-5px, 0);
+	30%,
+	50%,
+	70% {
+		transform: translate(-4px);
 	}
-
+	40%,
 	60% {
-		transform: translate(5px, 0);
-	}
-
-	80% {
-		transform: translate(-5px, 0);
-	}
-
-	100% {
-		transform: translate(5px, 0);
+		transform: translate(4px);
 	}
 }
-
-
 .shake {
 	animation-name: shake;
-	animation-duration: .3s;
+	animation-duration: .7s;
 	animation-timing-function: ease-out;
 }
diff --git a/core/css/styles.scss b/core/css/styles.scss
index affaec14342..27ce681391a 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -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;