From 2dbea30842ec63a68055245fe26633bb7913daf3 Mon Sep 17 00:00:00 2001 From: Maxime Quandalle Date: Tue, 12 May 2015 19:20:58 +0200 Subject: Renaissance _,,ad8888888888bba,_ ,ad88888I888888888888888ba, ,88888888I88888888888888888888a, ,d888888888I8888888888888888888888b, d88888PP"""" ""YY88888888888888888888b, ,d88"'__,,--------,,,,.;ZZZY8888888888888, ,8IIl'" ;;l"ZZZIII8888888888, ,I88l;' ;lZZZZZ888III8888888, ,II88Zl;. ;llZZZZZ888888I888888, ,II888Zl;. .;;;;;lllZZZ888888I8888b ,II8888Z;; `;;;;;''llZZ8888888I8888, II88888Z;' .;lZZZ8888888I888b II88888Z; _,aaa, .,aaaaa,__.l;llZZZ88888888I888 II88888IZZZZZZZZZ, .ZZZZZZZZZZZZZZ;llZZ88888888I888, II88888IZZ<'(@@>Z| |ZZZ<'(@@>ZZZZ;;llZZ888888888I88I ,II88888; `""" ;| |ZZ; `""" ;;llZ8888888888I888 II888888l `;; .;llZZ8888888888I888, ,II888888Z; ;;; .;;llZZZ8888888888I888I III888888Zl; .., `;; ,;;lllZZZ88888888888I888 II88888888Z;;...;(_ _) ,;;;llZZZZ88888888888I888, II88888888Zl;;;;;' `--'Z;. .,;;;;llZZZZ88888888888I888b ]I888888888Z;;;;' ";llllll;..;;;lllZZZZ88888888888I8888, II888888888Zl.;;"Y88bd888P";;,..;lllZZZZZ88888888888I8888I II8888888888Zl;.; `"PPP";;;,..;lllZZZZZZZ88888888888I88888 II888888888888Zl;;. `;;;l;;;;lllZZZZZZZZW88888888888I88888 `II8888888888888Zl;. ,;;lllZZZZZZZZWMZ88888888888I88888 II8888888888888888ZbaalllZZZZZZZZZWWMZZZ8888888888I888888, `II88888888888888888b"WWZZZZZWWWMMZZZZZZI888888888I888888b `II88888888888888888;ZZMMMMMMZZZZZZZZllI888888888I8888888 `II8888888888888888 `;lZZZZZZZZZZZlllll888888888I8888888, II8888888888888888, `;lllZZZZllllll;;.Y88888888I8888888b, ,II8888888888888888b .;;lllllll;;;.;..88888888I88888888b, II888888888888888PZI;. .`;;;.;;;..; ...88888888I8888888888, II888888888888PZ;;';;. ;. .;. .;. .. Y8888888I88888888888b, ,II888888888PZ;;' `8888888I8888888888888b, II888888888' 888888I8888888888888888 ,II888888888 ,888888I8888888888888888 ,d88888888888 d888888I8888888888ZZZZZZ ,ad888888888888I 8888888I8888ZZZZZZZZZZZZ 888888888888888' 888888IZZZZZZZZZZZZZZZZZ 8888888888P'8P' Y888ZZZZZZZZZZZZZZZZZZZZ 888888888, " ,ZZZZZZZZZZZZZZZZZZZZZZZ 8888888888, ,ZZZZZZZZZZZZZZZZZZZZZZZZZZ 888888888888a, _ ,ZZZZZZZZZZZZZZZZZZZZ88888888 888888888888888ba,_d' ,ZZZZZZZZZZZZZZZZZ8888888888888 8888888888888888888888bbbaaa,,,______,ZZZZZZZZZZZZZZZ88888888888888888 88888888888888888888888888888888888ZZZZZZZZZZZZZZZ88888888888888888888 8888888888888888888888888888888888ZZZZZZZZZZZZZZ8888888888888888888888 888888888888888888888888888888888ZZZZZZZZZZZZZZ88888888888888888888888 8888888888888888888888888888888ZZZZZZZZZZZZZZ8888888888888888888888888 88888888888888888888888888888ZZZZZZZZZZZZZZ888888888888888888888888888 8888888888888888888888888888ZZZZZZZZZZZZZZ88888888888888888 Normand 8 88888888888888888888888888ZZZZZZZZZZZZZZ8888888888888888888 Veilleux 8 8888888888888888888888888ZZZZZZZZZZZZZZ8888888888888888888888888888888 --- client/components/forms/forms.styl | 636 +++++++++++++++++++++++++++++++++++++ 1 file changed, 636 insertions(+) create mode 100644 client/components/forms/forms.styl (limited to 'client/components/forms/forms.styl') diff --git a/client/components/forms/forms.styl b/client/components/forms/forms.styl new file mode 100644 index 00000000..1084a4a6 --- /dev/null +++ b/client/components/forms/forms.styl @@ -0,0 +1,636 @@ +@import 'nib' + +textarea, +input:not([type=file]), +button + box-sizing: border-box + -webkit-appearance: none + background-color: #ebebeb + border: 1px solid #ccc + border-radius: 3px + display: block + margin-bottom: 12px + min-height: 34px + padding: 7px + + &.full + width: 100% + + &.input-error + background-color: #ece9e9 + border-color: #ba1212 + + &:focus + outline: 0 + +input[type="file"] + margin-bottom: 16px + +input[type="radio"] + -webkit-appearance: radio + min-height: inherit + +input[type="checkbox"] + -webkit-appearance: checkbox + margin-right: 4px + +input[type="text"], +input[type="password"], +input[type="email"] + transition: background 85ms ease-in, + border-color 85ms ease-in + width: 250px + + &.inline-input + background: none + border: 0 + margin: 0 + padding: 2px + min-height: 0 + height: 18px + width: 200px + +input[type="email"]:invalid + box-shadow: none + +input[type="text"], +input[type="password"], +input[type="email"], +textarea + + &:hover + border-color: #999 + + &.input-error + border-color: #ba1212 + + &:focus + background: #fff + border-color: #318ec4 + box-shadow: 0 0 2px #318ec4 + + &.input-error + background-color: #f8f7f7 + border-color: #ba1212 + box-shadow: 0 0 2px #d11515 + + &:disabled + background-color: #dcdcdc + border-color: #bfbfbf + color: #8c8c8c + -webkit-touch-callout: none + user-select: none + +select + max-height: 300px + width: 256px + margin-bottom: 8px + +option[disabled] + color: #8c8c8c + +textarea + height: 150px + transition: background 85ms ease-in, + border-color 85ms ease-in + resize: vertical + width: 100% + +.button + border-radius: 3px + text-decoration: none + position: relative + +input[type="submit"], +button + background: #cfcfcf + background: linear-gradient(#cfcfcf, #c2c2c2) + border: none + box-shadow: 0 1px 0 #8c8c8c + cursor: pointer + display: inline-block + font-weight: 700 + line-height: 22px + margin: 8px 4px 0 0 + padding: 7px 20px + text-align: center + + .wide + padding-left: 30px + padding-right: 30px + + &:hover, + &:focus + background: #c2c2c2 + background: linear-gradient(#c2c2c2, #b5b5b5) + + &:active + background: #b5b5b5 + background: linear-gradient(#b5b5b5, #a8a8a8) + box-shadow: inset 0 3px 6px rgba(0, 0, 0, .1) + + &:hover, + &:focus, + &:active + background: #e6e6e6 + background: linear-gradient(#e6e6e6, #e6e6e6) + + &.primary + background: #005377 + box-shadow: 0 1px 0 #4d4d4d + color: white + + &:hover, + &:focus + background: #004766 + + &:active + background: #01628C + + &.negate + &:hover, + &:focus + background: #990f0f + background: linear-gradient(#990f0f, #7d0c0c) + box-shadow: 0 1px 0 #4d4d4d + color: #fff + + &:active + background: #7d0c0c + box-shadow: 0 1px 0 #4d4d4d + color: #fff + +input[type="submit"].disabled, +input[type="submit"]:disabled, +input[type="button"].disabled, +button.disabled, +.button.disabled + + &, + &:hover, + &:active + background: #cfcfcf + cursor: default + box-shadow: none + color: #a8a8a8 + +fieldset + border: 1px solid #bfbfbf + padding: 15px + margin-bottom: 15px + +input[type="hidden"] + display: none + +input[type="checkbox"], +input[type="radio"] + display: inline + +.radio-div, +.check-div + display: block + margin: 0 0 4px 20px + min-height: 20px + position: relative + + input + left: -18px + min-height: 0 + margin: 0 + padding: 0 + position: absolute + top: 2px + + label + font-weight: 400 + +label + display: block + font-weight: 700 + margin-bottom: 4px + + &.form-error + color: #ba1212 + +input, +textarea + &::-webkit-input-placeholder, + &::-moz-placeholder + color: #8c8c8c + +.edit-controls, +.add-controls + margin-top: 0 + + button[type=submit] + float: left + height: 32px + margin-top: -2px + padding-top: 5px + padding-bottom: 5px + + i.fa.fa-times + font-size: 20px + + .option + border-color: transparent + border-radius: 3px + color: #8c8c8c + display: block + float: right + height: 30px + line-height: 30px + padding: 0 8px + margin: 0 2px + + &:hover + background-color: #dbdbdb + color: #4d4d4d + + &:active + background-color: #ccc + +.button-link + background: #fff + background: linear-gradient(#fff, #f5f5f5) + border-radius: 3px + box-sizing: border-box + user-select: none + border: 1px solid #e3e3e3 + border-bottom-color: #c2c2c2 + cursor: pointer + display: block + font-weight: 700 + height: 34px + margin-top: 6px + max-width: 300px + padding: 7px + position: relative + text-decoration: none + overflow: ellipsis + + .on + background: #48b512 + background: linear-gradient(#48b512, #3d990f) + border-radius: 3px + color: #fff + display: none + font-size: 12px + font-weight: 700 + height: 17px + line-height: @height + margin: 0 + padding: 2px 4px + position: absolute + right: 5px + top: 5px + text-align: center + + &.is-on + padding-right: 30px + max-width: 196px + + .on + display: block + + &.inline + color: #666 + padding: 2px 14px + margin-left: 4px + + &.setting + height: 52px + float: left + position: relative + margin-top: 0 + + &.disabled + background: #fff + border-color: #e9e9e9 + color: #8c8c8c + cursor: default + + select + display: none + + &:hover .label + color: #8c8c8c + + &, + &:hover, + &:active, + &.primary, + &.primary:hover, + &.primary:active + background: #cfcfcf + border-color: #c2c2c2 + border-bottom-color: #b5b5b5 + cursor: default + box-shadow: none + color: #a8a8a8 + + .label + color: #8c8c8c + display: block + font-size: 12px + line-height: 14px + margin-bottom: 0 + + &:hover .label + color: #eee + + .value + display: block + font-size: 18px + line-height: 24px + overflow: hidden + text-overflow: ellipsis + + label + display: none + + select + border: none + cursor: pointer + height: 50px + left: 0 + margin: 0 + opacity: 0 + position: absolute + top: 0 + z-index: 2 + width: 100% + + &:hover + background: #318ec4 + background: linear-gradient(#318ec4, #2b7cab) + border-color: #2e85b8 + color: #fff + + .on + background-image: none + background-color: rgba(255, 255, 255, .3) + border-color: transparent + + .icon-sm + color: #fff + + &:active + background: #2e85b8 + background: linear-gradient(#2e85b8, #28739f) + border-color: #2b7cab + color: #fff + + .button-link.negate + + &:hover + background: #990f0f + background: linear-gradient(#990f0f, #7d0c0c) + border-color: @background + + &:active + background: #7d0c0c + border-color: #990f0f + + + &.primary + background: #48b512 + background: linear-gradient(#48b512, #3d990f) + border: 1px solid + border-color: #3d990f + color: #fff + + &:hover + background: #3d990f + background: linear-gradient(#3d990f, #327d0c) + border-color: #3d990f + + &.danger + background: #ba1212 + background: linear-gradient(#ba1212, #8b0e0e) + border: 1px solid + border-color: #a21010 + color: #fff + + &:hover + background: #a21010 + background: linear-gradient(#a21010, #740b0b) + border-color: #8b0e0e + +button + + &.quiet-button, + &.loud-text-button + background: none + text-align: left + line-height: normal + border: none + box-shadow: none + + &:active + color: #4d4d4d + background: #d3d3d3 + box-shadow: none + + &.quiet-button + font-weight: 400 + text-decoration: underline + + &.loud-text-button + width: 100% + + &:hover + color: #111 + +.emphasis-button, +.quiet-button + border-radius: 3px + user-select: none + color: #8c8c8c + display: block + margin: 2px 0 + padding: 6px 8px + position: relative + + &.w-img + padding-left: 28px + + .icon-sm + left: 6px + position: absolute + top: 6px + + &:hover + color: #4d4d4d + background: #dcdcdc + + &:active + color: #4d4d4d + background: #d3d3d3 + +.quiet-button-large + padding: 16px 24px + +.emphasis-button + color: #74663e + background: #ecdfbb + + &:hover + color: #53492d + background: #e7d6a7 + + &:active + color: #53492d + background: #e1cc93 + +.big-link + border-radius: 3px + display: block + margin: 6px 0 6px 40px + padding: 11px + position: relative + text-decoration: none + font-size: 16px + line-height: 20px + + .text + text-decoration: underline + + &:hover + background: #dcdcdc + + &.options + padding-right: 41px + + .option + height: 30px + width: @height + position: absolute + right: 6px + top: 6px + + &.none + color: #8c8c8c + text-decoration: none + + &:hover + background: transparent + + &.avatar-changer + padding-right: 51px + + .member + border: 1px solid #ccc + border-radius: 3px + height: 40px + width: @height + position: absolute + right: 0 + top: 0 + + .member-avatar + height: 40px + width: @height + + .member-initials + font-size: 16px + height: 40px + line-height: @height + max-height: @height + +.show-more + border-radius: 3px + color: #8c8c8c + display: block + padding: 16px 8px 16px 40px + margin: 8px 0 + + &:hover + background: #dcdcdc + text-decoration: underline + + &.compact + padding: 12px 8px + margin: 8px 0 0 + text-align: center + +.board-widget .show-more + padding: 12px 8px 12px 40px + +.uploader + clear: both + cursor: pointer + position: relative + height: 34px + width: 100% + + .realfile + cursor: pointer + height: 34px + line-height: @height + position: absolute + top: 0 + left: 0 + width: 100% + z-index: 2 + font-size: 23px + + input[type="file"] + cursor: pointer + height: 34px + line-height: @height + margin: 0 + opacity: 0 + padding: 0 + width: 100% + z-index: 2 + font-size: 23px + + &:hover .fakefile + background: #318ec4 + background: linear-gradient(#318ec4, #2b7cab) + border-color: #2e85b8 + color: #fff + +.form-grid + display: flex + flex-wrap: wrap + width: 100% + +.form-grid-child + flex: 1 + margin: 0 0 8px + +.form-grid-child-full + flex: 1 1 100% + +.form-grid-child-threequarters + flex: 3 + margin-right: 8px + +.form-grid-child-twothirds + flex: 2 + margin-right: 8px + +.dropdown-menu + border-radius: 2px + // padding-bottom: 3px + overflow: hidden + + li + border-top: none + + a + padding: 4px 12px 4px 8px + + img + width: 18px + height: @width + margin-right: 5px + vertical-align: middle + + &.active + background: #005377 + + a + color: white -- cgit v1.2.3-1-g7c22