From 03fb2330a195da278e8514477d6a8ef4f558e8d4 Mon Sep 17 00:00:00 2001 From: =?utf8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 22 Dec 2016 11:17:14 +0100 Subject: [PATCH] Inputs scss MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/css/inputs.scss | 782 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 782 insertions(+) create mode 100644 core/css/inputs.scss diff --git a/core/css/inputs.scss b/core/css/inputs.scss new file mode 100644 index 00000000000..aa9c841f2b2 --- /dev/null +++ b/core/css/inputs.scss @@ -0,0 +1,782 @@ +/* INPUTS */ + +/* 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 { + 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; + } +} + +#quota, .pager li a { + 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='hidden'] { + height: 0; + width: 0; + } + &[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 */ + } +} + +textarea { + background: #fff; + color: #555; + cursor: text; + font-family: inherit; + /* use default ownCloud font instead of default textarea monospace */ +} + +input { + &[type='text'], &[type='password'], &[type='search'], &[type='number'], &[type='email'], &[type='tel'], &[type='url'], &[type='time'] { + -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='tel'] { + &:hover, &:focus, &:active { + color: #333; + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; + opacity: 1; + } + } + &[type='url'] { + &:hover, &:focus, &:active { + color: #333; + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; + opacity: 1; + } + } + &[type='time'] { + &:hover, &:focus, &:active { + color: #333; + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; + opacity: 1; + } + } +} + +textarea { + &:hover, &:focus, &:active { + color: #333; + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; + opacity: 1; + } +} + +input { + &[type='checkbox'] { + &.checkbox { + position: absolute; + left: -10000px; + top: auto; + width: 1px; + height: 1px; + overflow: hidden; + + label:before { + content: ''; + display: inline-block; + height: 20px; + width: 20px; + vertical-align: middle; + background: url('../img/actions/checkbox.svg') left top no-repeat; + } + &:disabled + label:before { + opacity: .6; + } + &.u-left + label:before { + float: left; + } + &.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'); + } + &:disabled + label:before { + background-image: url('../img/actions/checkbox-disabled.svg'); + } + &: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'); + } + } + &.checkbox--white { + + label:before { + background-image: url('../img/actions/checkbox-white.svg'); + } + &:checked + label:before { + background-image: url('../img/actions/checkbox-checked-white.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'); + } + &:indeterminate:disabled + label:before { + background-image: url('../img/actions/checkbox-mixed-disabled.svg'); + } + } + &.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; + + label:before { + content: ''; + display: inline-block; + height: 20px; + width: 20px; + vertical-align: middle; + background: url('../img/actions/radio.svg') left top no-repeat; + } + &:checked + label:before { + background-image: url('../img/actions/radio-checked.svg'); + } + &:disabled + label:before { + background-image: url('../img/actions/radio-disabled.svg'); + } + &:checked:disabled + label:before { + background-image: url('../img/actions/radio-checked-disabled.svg'); + } + } + &.radio--white { + + label:before { + background-image: url('../img/actions/radio-white.svg'); + } + &:checked + label:before { + background-image: url('../img/actions/radio-checked-white.svg'); + } + &:disabled + label:before { + background-image: url('../img/actions/radio-disabled.svg'); + } + &:checked:disabled + label:before { + background-image: url('../img/actions/radio-checked-disabled.svg'); + } + } + } + &[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 { + margin-top: -2px; + &.select2-drop-active { + border-color: #ddd; + } + .avatar { + display: inline-block; + margin-right: 8px; + vertical-align: middle; + img { + 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; + } + .select2-results { + max-height: 250px; + margin: 0; + padding: 0; + .select2-result-label { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + span { + cursor: pointer; + } + } + .select2-result, .select2-no-results, .select2-searching { + position: relative; + display: list-item; + padding: 12px; + background-color: #fff; + cursor: pointer; + color: #222; + } + .select2-result { + &.select2-selected { + background-color: #f8f8f8; + } + &.select2-highlighted { + background-color: #f8f8f8; + color: #000; + } + } + } +} + +.select2-container-multi { + .select2-choices, &.select2-container-active .select2-choices { + 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 .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-container-active .select2-choices .select2-search-choice { + &.select2-search-choice-focus, &:hover { + background-color: #f0f0f0; + border-color: #f0f0f0; + } + } +} + +.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; + flex-wrap: wrap; + li { + float: none; + } + } + .select2-choice { + padding-left: 38px; + .select2-arrow { + background: none; + border-radius: 0; + border: none; + b { + background: url('../img/actions/triangle-s.svg') no-repeat center !important; + opacity: .5; + } + } + &:hover .select2-arrow b, &:focus .select2-arrow b, &:active .select2-arrow b { + opacity: .7; + } + } +} + +/* jQuery UI fixes */ + +.ui-menu { + padding: 0; + .ui-menu-item a { + &.ui-state-focus, &.ui-state-active { + font-weight: inherit; + margin: 0; + } + } +} + +.ui-widget-content { + background: #fff; + border-top: none; +} + +.ui-corner-all { + border-radius: 0; + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; +} + +.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { + border: none; + 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; +} + +@keyframes shake { + 0% { + transform: translate(-5px, 0); + } + + 20% { + transform: translate(5px, 0); + } + + 40% { + transform: translate(-5px, 0); + } + + 60% { + transform: translate(5px, 0); + } + + 80% { + transform: translate(-5px, 0); + } + + 100% { + transform: translate(5px, 0); + } +} + + +.shake { + animation-name: shake; + animation-duration: .3s; + animation-timing-function: ease-out; +} -- 2.39.5