From 05f39906166432676c7fce90b7b30cecc14798c0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Sat, 21 Jan 2017 05:34:32 +0100 Subject: [PATCH 01/19] Inputs.scss rewritting and optimisation, fix #3121 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/css/inputs.scss | 884 +++++++++++++++---------------------------- 1 file changed, 309 insertions(+), 575 deletions(-) diff --git a/core/css/inputs.scss b/core/css/inputs.scss index aa9c841f2b222..f445edd82013c 100644 --- a/core/css/inputs.scss +++ b/core/css/inputs.scss @@ -1,163 +1,188 @@ -/* 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(.disabled):not(.primary) { + &:hover, &.hover, &:focus, &.focus { + border-color: #0082c9; + outline: none; + } + &:active, + &.active { + outline: none; + } + &:active, + &.active { + 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, + &.disabled { + background-color: rgba(0, 0, 0, 0.1); + color: #999; + cursor: default; + opacity: 0.9; + } + /* Primary action button, use sparingly */ + &.primary { + border: 1px solid #0082c9; + background-color: #00a2e9; + color: #fff; + cursor: pointer; + &:not(:disabled):not(.disabled) { + &:hover, &.hover, &:focus, &.focus { + background-color: #0092d9; + } + &:active, + &.active { + background-color: #00a2e9; + } + } + &:disabled, + &.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='radio'], + &[type='checkbox'], + &[type='file'], + &[type='image'] { + height: auto; + width: auto; } - &[type='number'] { - &: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='search'] { - &:hover, &:focus, &:active { - color: #333; - -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; - opacity: 1; - } + &[type='hidden'] { + height: 0; + width: 0; } - &[type='email'] { - &:hover, &:focus, &:active { - color: #333; - -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; - opacity: 1; - } + &[type='time'] { + width: initial; } - &[type='tel'] { - &:hover, &:focus, &:active { - color: #333; - -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; - opacity: 1; - } +} + +/* '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); } - &[type='url'] { - &:hover, &:focus, &:active { - color: #333; - -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; - opacity: 1; - } +} + +/* 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; } - &[type='time'] { - &:hover, &:focus, &:active { - color: #333; - -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; - opacity: 1; +} +textarea { + color: #555; + cursor: text; + font-family: inherit; + height: auto; + &:not(:disabled):not(.disabled) { + &:active, &.active, &:hover, &.hover, &:focus, &.focus { + border-color: #ddd !important; + background-color: #fff !important; } } } -textarea { - &:hover, &:focus, &:active { - color: #333; - -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; - opacity: 1; - } +/* 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; +} +#header .button { + border: none; + box-shadow: none; +} +#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 +190,127 @@ 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; - } - &.u-left + label:before { - float: left; + border-radius: 50%; + margin: 3px; + border: 1px solid #888; } - &.u-hidden + label:before { - display: none; + &:not(:disabled):not(:checked) + label:hover:before, + &:focus + label:before { + border-color: #0082c9; } - &: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: 11px; + width: 11px; + box-shadow: none !important; } - &:checked + label:before { - background-image: url('../img/actions/checkbox-checked-white.svg'); + &:checked + label, + &:indeterminate + label { + position: relative; } - &:indeterminate + label:before { - background-image: url('../img/actions/checkbox-mixed-white.svg'); + &:checked + label:after, + &:indeterminate + label:after { + content: ''; + display: inline-block; + position: absolute; } - &:disabled + label:before { - background-image: url('../img/actions/checkbox-disabled-white.svg'); + &:checked + label:after { + width: 7px; + height: 3px; + border: 1px solid #fff; + top: 7px; + left: 5px; + border-width: 0 0 2px 2px; + transform: rotate(-45deg); } - &:checked:disabled + label:before { - background-image: url('../img/actions/checkbox-checked-disabled.svg'); + &:indeterminate + label:after { + width: 9px; + height: 3px; + top: 9px; + left: 5px; + background-color: #fff; } &: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; + } + &:not(:disabled):not(:checked) + label:hover:before, + &:focus + label:before { + border-color: #fff; } - &:checked + label:before { - background-image: url('../img/actions/radio-checked.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 #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:after { + border-color: #000; } - &:checked + label:before { - background-image: url('../img/actions/radio-checked-white.svg'); + &:checked:disabled + label:after { + border-color: #aaa; } - &:disabled + label:before { - background-image: url('../img/actions/radio-disabled.svg'); + &:indeterminate + label:after { + background-color: #000; } - &:checked:disabled + label:before { - background-image: url('../img/actions/radio-checked-disabled.svg'); + &: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,13 +323,6 @@ 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; @@ -322,7 +341,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 +362,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 +383,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 +414,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 +450,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 +489,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; } From f68ff25cc05e08cf44ba79125658719288ccba6e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Sat, 21 Jan 2017 19:05:20 +0100 Subject: [PATCH 02/19] Going back to svg for the checkmark and the mixed mark MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/css/inputs.scss | 44 +++++++++++++------------------------------- 1 file changed, 13 insertions(+), 31 deletions(-) diff --git a/core/css/inputs.scss b/core/css/inputs.scss index f445edd82013c..19deb59b1d7d1 100644 --- a/core/css/inputs.scss +++ b/core/css/inputs.scss @@ -205,6 +205,7 @@ input { vertical-align: middle; border-radius: 50%; margin: 3px; + margin-top: 1px; border: 1px solid #888; } &:not(:disabled):not(:checked) + label:hover:before, @@ -231,35 +232,16 @@ input { &.checkbox { + label:before { border-radius: 1px; - height: 11px; - width: 11px; + height: 10px; + width: 10px; box-shadow: none !important; + background-position: center; } - &:checked + label, - &:indeterminate + label { - position: relative; + &:checked + label:before { + background-image: url('../img/actions/checkbox-mark.svg'); } - &:checked + label:after, - &:indeterminate + label:after { - content: ''; - display: inline-block; - position: absolute; - } - &:checked + label:after { - width: 7px; - height: 3px; - border: 1px solid #fff; - top: 7px; - left: 5px; - border-width: 0 0 2px 2px; - transform: rotate(-45deg); - } - &:indeterminate + label:after { - width: 9px; - height: 3px; - top: 9px; - left: 5px; - background-color: #fff; + &:indeterminate + label:before { + background-image: url('../img/actions/checkbox-mixed.svg'); } &:indeterminate:disabled + label:before { border-color: #888; @@ -293,15 +275,15 @@ input { } } &.checkbox--white { - &:checked + label:after { - border-color: #000; + &:checked + label:before { + background-image: url('../img/actions/checkbox-mark.svg'); + } + &:indeterminate + label:before { + background-image: url('../img/actions/checkbox-mixed.svg'); } &:checked:disabled + label:after { border-color: #aaa; } - &:indeterminate + label:after { - background-color: #000; - } &:indeterminate:disabled + label:after { background-color: #aaa; } From 9689e46d998b068c59a39311ba00d80f38201247 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Sat, 21 Jan 2017 19:06:42 +0100 Subject: [PATCH 03/19] Removed old svg and added new ones MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/img/actions/checkbox-checked-disabled.svg | 1 - core/img/actions/checkbox-checked-white.svg | 1 - core/img/actions/checkbox-checked.svg | 1 - core/img/actions/checkbox-disabled-white.svg | 1 - core/img/actions/checkbox-disabled.svg | 1 - core/img/actions/checkbox-mark-white.svg | 1 + core/img/actions/checkbox-mark.svg | 1 + core/img/actions/checkbox-mixed-disabled.svg | 1 - core/img/actions/checkbox-mixed-white.svg | 2 +- core/img/actions/checkbox-mixed.svg | 2 +- core/img/actions/checkbox-white.svg | 1 - core/img/actions/checkbox.svg | 1 - core/img/actions/radio-checked-disabled.svg | 1 - core/img/actions/radio-checked-white.svg | 1 - core/img/actions/radio-checked.svg | 1 - core/img/actions/radio-disabled.svg | 1 - core/img/actions/radio-white.svg | 1 - core/img/actions/radio.svg | 1 - 18 files changed, 4 insertions(+), 16 deletions(-) delete mode 100644 core/img/actions/checkbox-checked-disabled.svg delete mode 100644 core/img/actions/checkbox-checked-white.svg delete mode 100644 core/img/actions/checkbox-checked.svg delete mode 100644 core/img/actions/checkbox-disabled-white.svg delete mode 100644 core/img/actions/checkbox-disabled.svg create mode 100644 core/img/actions/checkbox-mark-white.svg create mode 100644 core/img/actions/checkbox-mark.svg delete mode 100644 core/img/actions/checkbox-mixed-disabled.svg delete mode 100644 core/img/actions/checkbox-white.svg delete mode 100644 core/img/actions/checkbox.svg delete mode 100644 core/img/actions/radio-checked-disabled.svg delete mode 100644 core/img/actions/radio-checked-white.svg delete mode 100644 core/img/actions/radio-checked.svg delete mode 100644 core/img/actions/radio-disabled.svg delete mode 100644 core/img/actions/radio-white.svg delete mode 100644 core/img/actions/radio.svg diff --git a/core/img/actions/checkbox-checked-disabled.svg b/core/img/actions/checkbox-checked-disabled.svg deleted file mode 100644 index 8b0118da3437e..0000000000000 --- a/core/img/actions/checkbox-checked-disabled.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/core/img/actions/checkbox-checked-white.svg b/core/img/actions/checkbox-checked-white.svg deleted file mode 100644 index 8043bd463be39..0000000000000 --- a/core/img/actions/checkbox-checked-white.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/core/img/actions/checkbox-checked.svg b/core/img/actions/checkbox-checked.svg deleted file mode 100644 index bd9241d664cd1..0000000000000 --- a/core/img/actions/checkbox-checked.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/core/img/actions/checkbox-disabled-white.svg b/core/img/actions/checkbox-disabled-white.svg deleted file mode 100644 index c5cf4a66585b3..0000000000000 --- a/core/img/actions/checkbox-disabled-white.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/core/img/actions/checkbox-disabled.svg b/core/img/actions/checkbox-disabled.svg deleted file mode 100644 index fa73b4f4352d1..0000000000000 --- a/core/img/actions/checkbox-disabled.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/core/img/actions/checkbox-mark-white.svg b/core/img/actions/checkbox-mark-white.svg new file mode 100644 index 0000000000000..8407898164b3f --- /dev/null +++ b/core/img/actions/checkbox-mark-white.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/core/img/actions/checkbox-mark.svg b/core/img/actions/checkbox-mark.svg new file mode 100644 index 0000000000000..1013b6cc3f209 --- /dev/null +++ b/core/img/actions/checkbox-mark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/core/img/actions/checkbox-mixed-disabled.svg b/core/img/actions/checkbox-mixed-disabled.svg deleted file mode 100644 index 2e8e98fb9fc7b..0000000000000 --- a/core/img/actions/checkbox-mixed-disabled.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/core/img/actions/checkbox-mixed-white.svg b/core/img/actions/checkbox-mixed-white.svg index ca7d92bbeed85..c66636717be6f 100644 --- a/core/img/actions/checkbox-mixed-white.svg +++ b/core/img/actions/checkbox-mixed-white.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/core/img/actions/checkbox-mixed.svg b/core/img/actions/checkbox-mixed.svg index 8a1412bf849d9..308baae3920d5 100644 --- a/core/img/actions/checkbox-mixed.svg +++ b/core/img/actions/checkbox-mixed.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/core/img/actions/checkbox-white.svg b/core/img/actions/checkbox-white.svg deleted file mode 100644 index 1a0cd569e1c8b..0000000000000 --- a/core/img/actions/checkbox-white.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/core/img/actions/checkbox.svg b/core/img/actions/checkbox.svg deleted file mode 100644 index 46cad084ab595..0000000000000 --- a/core/img/actions/checkbox.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/core/img/actions/radio-checked-disabled.svg b/core/img/actions/radio-checked-disabled.svg deleted file mode 100644 index 470293c296040..0000000000000 --- a/core/img/actions/radio-checked-disabled.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/core/img/actions/radio-checked-white.svg b/core/img/actions/radio-checked-white.svg deleted file mode 100644 index d024c91ff19e5..0000000000000 --- a/core/img/actions/radio-checked-white.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/core/img/actions/radio-checked.svg b/core/img/actions/radio-checked.svg deleted file mode 100644 index bb4c622a9f7a7..0000000000000 --- a/core/img/actions/radio-checked.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/core/img/actions/radio-disabled.svg b/core/img/actions/radio-disabled.svg deleted file mode 100644 index e6bf778f192ed..0000000000000 --- a/core/img/actions/radio-disabled.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/core/img/actions/radio-white.svg b/core/img/actions/radio-white.svg deleted file mode 100644 index 0eda991c4d3ee..0000000000000 --- a/core/img/actions/radio-white.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/core/img/actions/radio.svg b/core/img/actions/radio.svg deleted file mode 100644 index 31a364b88e027..0000000000000 --- a/core/img/actions/radio.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file From a4c74d59928c1c11ac528eb4d51efe90bc3f8ccb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Sat, 21 Jan 2017 19:19:34 +0100 Subject: [PATCH 04/19] Fixed show password MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/css/styles.scss | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/core/css/styles.scss b/core/css/styles.scss index affaec1434276..df20726330998 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; } From 0f353b2f6776953922334510180c6c7e42850036 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Sat, 21 Jan 2017 19:21:46 +0100 Subject: [PATCH 05/19] Fixed strengthify wrapper MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- settings/css/settings.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/settings/css/settings.css b/settings/css/settings.css index 557395c571717..a797054c192a1 100644 --- a/settings/css/settings.css +++ b/settings/css/settings.css @@ -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*/ From 7882976a1447d60909dc044adc265483fbdc310a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Sat, 21 Jan 2017 19:25:48 +0100 Subject: [PATCH 06/19] Remove quota focus and unwanted state classes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/css/inputs.scss | 34 ++++++++++++++++------------------ 1 file changed, 16 insertions(+), 18 deletions(-) diff --git a/core/css/inputs.scss b/core/css/inputs.scss index 19deb59b1d7d1..1dc43d2e365be 100644 --- a/core/css/inputs.scss +++ b/core/css/inputs.scss @@ -30,22 +30,20 @@ textarea, border: 1px solid #ddd; outline: none; border-radius: 3px; - &:not(:disabled):not(.disabled):not(.primary) { - &:hover, &.hover, &:focus, &.focus { + &:not(:disabled):not(.primary) { + &:not(#quota):hover, + &:focus { border-color: #0082c9; outline: none; } - &:active, - &.active { + &:active { outline: none; } - &:active, - &.active { + &:active { background-color: #fff; } } - &:disabled, - &.disabled { + &:disabled { background-color: rgba(0, 0, 0, 0.1); color: #999; cursor: default; @@ -57,17 +55,16 @@ textarea, background-color: #00a2e9; color: #fff; cursor: pointer; - &:not(:disabled):not(.disabled) { - &:hover, &.hover, &:focus, &.focus { + &:not(:disabled) { + &:hover, + &:focus { background-color: #0092d9; } - &:active, - &.active { + &:active { background-color: #00a2e9; } } - &:disabled, - &.disabled { + &:disabled { background-color: #00a2e9; color: #bbb; } @@ -119,8 +116,7 @@ input[type='reset'] { box-sizing: border-box; background-color: #fafafa; box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.15); - &:active, - &.active { + &:active { box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.15); } } @@ -142,8 +138,10 @@ textarea { cursor: text; font-family: inherit; height: auto; - &:not(:disabled):not(.disabled) { - &:active, &.active, &:hover, &.hover, &:focus, &.focus { + &:not(:disabled) { + &:active, + &:hover, + &:focus { border-color: #ddd !important; background-color: #fff !important; } From da4c6ab3260f1794ca9ae99ef887c87929e9180a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Sat, 21 Jan 2017 19:33:43 +0100 Subject: [PATCH 07/19] Fixed multiselect focus MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/css/inputs.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/core/css/inputs.scss b/core/css/inputs.scss index 1dc43d2e365be..5c64bd4662e87 100644 --- a/core/css/inputs.scss +++ b/core/css/inputs.scss @@ -32,14 +32,13 @@ textarea, border-radius: 3px; &:not(:disabled):not(.primary) { &:not(#quota):hover, - &:focus { + &:focus, + &.active { border-color: #0082c9; outline: none; } &:active { outline: none; - } - &:active { background-color: #fff; } } @@ -116,7 +115,8 @@ input[type='reset'] { box-sizing: border-box; background-color: #fafafa; box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.15); - &:active { + &:active, + &.active { box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.15); } } From 23dc0aae87a1dbe70835d768d9de5358fcc9e977 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Sat, 21 Jan 2017 19:51:48 +0100 Subject: [PATCH 08/19] Fixed edit icon position MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- settings/css/settings.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/settings/css/settings.css b/settings/css/settings.css index a797054c192a1..bdeca980781a8 100644 --- a/settings/css/settings.css +++ b/settings/css/settings.css @@ -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; } From 466298d121de198dec90bb498a90b7a08105bcb9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Sun, 22 Jan 2017 05:45:49 +0100 Subject: [PATCH 09/19] Fix login MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/css/styles.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/css/styles.scss b/core/css/styles.scss index df20726330998..d5c70d492440a 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -725,7 +725,7 @@ label.infield { margin: 5px; padding: 11px 10px 9px; &[type='text'], &[type='password'] { - width: 249px; + width: calc(100% - 10px); /* 5px margin */ } &.login { width: 269px; From 94a52903661b70be16f41189cae545e3433c09c8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Sun, 22 Jan 2017 16:30:13 +0100 Subject: [PATCH 10/19] White checkmark fix MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/css/inputs.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/core/css/inputs.scss b/core/css/inputs.scss index 5c64bd4662e87..924344bea7ee3 100644 --- a/core/css/inputs.scss +++ b/core/css/inputs.scss @@ -274,10 +274,10 @@ input { } &.checkbox--white { &:checked + label:before { - background-image: url('../img/actions/checkbox-mark.svg'); + background-image: url('../img/actions/checkbox-mark-white.svg'); } &:indeterminate + label:before { - background-image: url('../img/actions/checkbox-mixed.svg'); + background-image: url('../img/actions/checkbox-mixed-white.svg'); } &:checked:disabled + label:after { border-color: #aaa; From 7fd2257141a7cae67256532aca1ba0cb4cb9b045 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Sun, 22 Jan 2017 16:37:23 +0100 Subject: [PATCH 11/19] Disabled state fix MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/css/inputs.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/core/css/inputs.scss b/core/css/inputs.scss index 924344bea7ee3..2b22fdc26e595 100644 --- a/core/css/inputs.scss +++ b/core/css/inputs.scss @@ -34,6 +34,7 @@ textarea, &:not(#quota):hover, &:focus, &.active { + /* active class used for multiselect */ border-color: #0082c9; outline: none; } @@ -43,10 +44,10 @@ textarea, } } &:disabled { - background-color: rgba(0, 0, 0, 0.1); + background-color: #eee; color: #999; cursor: default; - opacity: 0.9; + opacity: 0.5; } /* Primary action button, use sparingly */ &.primary { From ba8a9a9cd2df12506365e9d280fc0e0261f766a7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Sun, 22 Jan 2017 16:38:07 +0100 Subject: [PATCH 12/19] Login and authenticate inputs fixes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- apps/files_sharing/css/authenticate.css | 8 ++------ core/css/styles.scss | 2 +- 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/apps/files_sharing/css/authenticate.css b/apps/files_sharing/css/authenticate.css index 55a40cf508dae..16687916ac47e 100644 --- a/apps/files_sharing/css/authenticate.css +++ b/apps/files_sharing/css/authenticate.css @@ -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; } diff --git a/core/css/styles.scss b/core/css/styles.scss index d5c70d492440a..27ce681391aac 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -723,7 +723,7 @@ label.infield { #body-login input { font-size: 20px; margin: 5px; - padding: 11px 10px 9px; + padding: 10px 10px 8px; &[type='text'], &[type='password'] { width: calc(100% - 10px); /* 5px margin */ } From 56b9203bf95923a4946aa38331df34f99e6b1fe2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Sun, 22 Jan 2017 16:42:03 +0100 Subject: [PATCH 13/19] Select2 search input fix MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/css/inputs.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/core/css/inputs.scss b/core/css/inputs.scss index 2b22fdc26e595..34aa40c247f1b 100644 --- a/core/css/inputs.scss +++ b/core/css/inputs.scss @@ -305,7 +305,6 @@ input { } } .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; From 913834be869778da1cdb6a47726eedc0b29b5271 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Sun, 22 Jan 2017 16:47:58 +0100 Subject: [PATCH 14/19] Fix download button on public share MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/css/inputs.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/core/css/inputs.scss b/core/css/inputs.scss index 34aa40c247f1b..7890d6ca80265 100644 --- a/core/css/inputs.scss +++ b/core/css/inputs.scss @@ -165,10 +165,6 @@ button img, .button img { cursor: pointer; } -#header .button { - border: none; - box-shadow: none; -} #quota { color: #555; } From 6a617fa721248c57f52c66d67753357c9c8fefee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Sun, 22 Jan 2017 17:25:02 +0100 Subject: [PATCH 15/19] Fixed public share header buttons MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- apps/files_sharing/css/public.css | 63 +++++++++---------------- apps/files_sharing/templates/public.php | 4 +- core/css/inputs.scss | 18 +++++-- 3 files changed, 37 insertions(+), 48 deletions(-) diff --git a/apps/files_sharing/css/public.css b/apps/files_sharing/css/public.css index 94183cf005768..70df204a696d0 100644 --- a/apps/files_sharing/css/public.css +++ b/apps/files_sharing/css/public.css @@ -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 { diff --git a/apps/files_sharing/templates/public.php b/apps/files_sharing/templates/public.php index 32e4f3d3dd696..3bdaedae1cba5 100644 --- a/apps/files_sharing/templates/public.php +++ b/apps/files_sharing/templates/public.php @@ -58,13 +58,13 @@ data-owner-display-name="" data-owner="" data-name=""> - "/> + t('Download'))?> diff --git a/core/css/inputs.scss b/core/css/inputs.scss index 7890d6ca80265..98543f4d5e514 100644 --- a/core/css/inputs.scss +++ b/core/css/inputs.scss @@ -31,6 +31,7 @@ textarea, outline: none; border-radius: 3px; &:not(:disabled):not(.primary) { + /* no border on quota */ &:not(#quota):hover, &:focus, &.active { @@ -104,8 +105,7 @@ input { /* 'Click' inputs */ select, -button, -.button, +button, .button, input[type='button'], input[type='submit'], input[type='reset'] { @@ -123,8 +123,7 @@ input[type='reset'] { } /* Buttons */ -button, -.button, +button, .button, input[type='button'], input[type='submit'], input[type='reset'] { @@ -134,6 +133,17 @@ input[type='reset'] { border: 0; } } +button, .button { + > span { + /* icon position inside buttons */ + &[class^='icon-'], + &[class*=' icon-'] { + display: inline-block; + vertical-align: text-bottom; + } + } +} + textarea { color: #555; cursor: text; From 0a400c4259ef5c6b08b7af224d2c73ab634bcfe6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Sun, 22 Jan 2017 17:26:59 +0100 Subject: [PATCH 16/19] Fixed sharing js MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- apps/files_sharing/js/public.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/files_sharing/js/public.js b/apps/files_sharing/js/public.js index 0045c7156d2a6..ad3ef856f23f1 100644 --- a/apps/files_sharing/js/public.js +++ b/apps/files_sharing/js/public.js @@ -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'); From 17f8067db55ca8645ee9652c8bcae34198661053 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Sun, 22 Jan 2017 17:30:38 +0100 Subject: [PATCH 17/19] Fix Navigation menu shadow and added rules for icon in button MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/css/apps.scss | 1 + core/css/inputs.scss | 1 + 2 files changed, 2 insertions(+) diff --git a/core/css/apps.scss b/core/css/apps.scss index 93e60fbfbf14f..115e2b64f0fd0 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -620,6 +620,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 98543f4d5e514..a1af00298e5c0 100644 --- a/core/css/inputs.scss +++ b/core/css/inputs.scss @@ -140,6 +140,7 @@ button, .button { &[class*=' icon-'] { display: inline-block; vertical-align: text-bottom; + opacity: 0.5; } } } From 4c47b8e3a3b8da9963d29fa7d0fc750c32e5c999 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Sun, 22 Jan 2017 17:32:51 +0100 Subject: [PATCH 18/19] Fixed public share download button MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- apps/files_sharing/templates/public.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/files_sharing/templates/public.php b/apps/files_sharing/templates/public.php index 3bdaedae1cba5..2c321f2a39832 100644 --- a/apps/files_sharing/templates/public.php +++ b/apps/files_sharing/templates/public.php @@ -89,8 +89,8 @@
- - "/> + + t('Download %s', array($_['filename'])))?> ()
From 08361e61d27cb622fa3c1164e764ccc2e7201d65 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Sun, 22 Jan 2017 17:57:10 +0100 Subject: [PATCH 19/19] App navigation utils buttons shadow fix MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/css/apps.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/core/css/apps.scss b/core/css/apps.scss index 115e2b64f0fd0..17eb2c1f9ade6 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 {