Startsida Utforska Hjälp
Registrera dig Logga in
chenweida
/
sr-iHealthwx
Bevaka 0
Stjärnmärk 0
Fork 0
Filer
Träd: 753fadc504
Grenar Taggar
sr-iHealthwx
/
css
/
form.ui.css

form.ui.css 13 KB
Historik Rå

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273 
  1. /* ui-form
    2. 

  2. -----------------------------------------------------------------------------*/
    3. 

  3. .input-group, .input-group *, .input-group-checkbox, .input-group-radio, .input-group-checkbox *, .input-group-radio * { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
    4. 

  4. .input-group { border-collapse: separate; display: table; position: relative; }
    5. 

  5. .input-group label { display: block; }
    6. 

  6. .input-group-addon { background-color: #fff; border: 1px solid #e1e1e1; border-radius: 4px; border-bottom-right-radius: 0; border-top-right-radius: 0; color: #333; font-size: 14px; font-weight: 400; line-height: 1; padding: 10px; text-align: center; display: table-cell; vertical-align: middle; white-space: nowrap; width: 1%; }
    7. 

  7. .input-group-addon:first-child { border-right: 0; }
    8. 

  8. .input-group-addon .iconfont { color: #b4b4b4; font-size: 18px; }
    9. 

  9. .input-group-addon.focus .iconfont { color: #37a6ed; }
    10. 

  10. .input-group-btn { position: absolute; right: 5px; top: 7px; }
    11. 

  11. .input-group-btn .c-btn { padding: 5px; border: #ddd 1px solid; }
    12. 

  12. .input-group .form-control, .input-group .form-select, .input-group .form-textarea { -webkit-appearance: none; appearance: none; background-color: #fff; background-image: none; border: 1px solid #e1e1e1; border-radius: 5px; color: #333; display: block; font-size: 14px; height: 45px; line-height: 1.42857; padding: 6px 12px; transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; outline: 0; }
    13. 

  13. .input-group .form-select-arrow { display: block; width: 10px; height: 10px; border: solid #ccc; border-width: 2px 2px 0 0; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); position: absolute; top: 15px; right: 15px; }
    14. 

  14. .input-group .form-control {padding-right:30px;}
    15. 

  15. .input-group.input-border .form-control, .input-group.input-border .form-select, .input-group.input-border .form-textarea { border-radius: 0px; border-right: 0; font-size: 15px; height: 45px; line-height: 1.52857; }
    16. 

  16. .input-group .form-control:focus, .input-group .form-select:focus, .input-group .form-textarea:focus { color: #333; }
    17. 

  17. .input-group .form-control::-webkit-input-placeholder, .input-group .form-textarea::-webkit-input-placeholder {color: #bfbfbf;}
    18. 

  18. .input-group .form-control:-moz-placeholder, .input-group .form-textarea:-moz-placeholder {color: #bfbfbf;}
    19. 

  19. .input-group .form-control::-moz-placeholder, .input-group .form-textarea::-moz-placeholder {color: #bfbfbf;}
    20. 

  20. .input-group .form-control:-ms-input-placeholder, .input-group .form-textarea:-ms-input-placeholder {color: #bfbfbf;}
    21. 

  21. .input-group .form-textarea { height: auto; resize: none; margin: 0; }
    22. 

  22. .input-group .form-control:nth-child(2), .input-group .form-textarea:nth-child(2) { border-bottom-left-radius: 0; border-top-left-radius: 0; border-left: 0; padding-left: 0; }
    23. 

  23. .input-group .form-control, .input-group label .form-control, .input-group label .form-select, .input-group label .form-textarea { border-radius: 4px; padding-left: 12px; border-left: 1px #e1e1e1 solid; }
    24. 

  24. .input-group .input-group-addon + .form-control, .input-group .input-group-addon + .form-select { border-top-left-radius: 0px; border-bottom-left-radius: 0px; padding-left: 0px; border-left: 0px; }
    25. 

  25. .input-group-text { font-size: 14px; color: #555; }
    26. 

  26. .input-merge .input-group .input-group-addon, .input-group.input-border .input-group-addon { border-bottom-left-radius: 0; border-top-left-radius: 0; }
    27. 

  27. .input-group.input-border .input-group-addon { border-left: 0; font-size: 15px; color: #333; padding: 10px 20px; }
    28. 

  28. .input-merge .input-group .form-control, .input-merge .input-group .form-select, .input-merge .input-group .form-textarea { border-bottom-right-radius: 0; border-top-right-radius: 0; }
    29. 

  29. .input-merge .input-group:first-child .input-group-addon { border-top-left-radius: 4px; }
    30. 

  30. .input-merge .input-group:first-child .form-control, .input-merge .input-group:first-child .form-select, .input-merge .input-group:first-child .form-textarea { border-top-right-radius: 4px; }
    31. 

  31. .input-merge .input-group:last-child .form-control, .input-merge .input-group:last-child .form-select, .input-merge .input-group:last-child .form-textarea { border-bottom-right-radius: 4px; }
    32. 

  32. .input-merge .input-group:last-child .input-group-addon { border-bottom-left-radius: 4px; }
    33. 

  33. .input-merge .input-group.input-border .input-group-addon, .input-merge .input-group.input-border .form-control, .input-merge .input-group.input-border .form-select, .input-merge .input-group.input-border .form-textarea, .input-merge .input-group.input-border .form-control, .input-merge .input-group.input-border .form-select, .input-merge .input-group.input-border .form-textarea, .input-merge .input-group.input-border .input-group-addon { border-radius: 0px; }
    34. 

  34. .input-merge .input-group.input-border { padding-left: 20px; }
    35. 

  35. .input-merge .input-group.input-border .input-group-addon { padding-left: 0 }
    36. 

  36. .input-merge .input-group .input-group-addon, .input-merge .input-group .form-control, .input-merge .input-group .form-select, .input-merge .input-group .form-textarea { border-bottom: 0; }
    37. 

  37. .input-merge .input-group:last-child .input-group-addon, .input-merge .input-group:last-child .form-control, .input-merge .input-group:last-child .form-select, .input-merge .input-group:last-child .form-textarea { border-bottom: 1px solid #e1e1e1; }
    38. 

  38. .input-merge.input-merge-border .input-group:first-child .input-group-addon, .input-merge.input-merge-border .input-group:first-child .form-control, .input-merge.input-merge-border .input-group:first-child .form-select, .input-merge.input-merge-border .input-group:first-child .form-textarea { border-top: 0; }
    39. 

  39. .input-merge.input-merge-border .input-group:last-child .input-group-addon, .input-merge.input-merge-border .input-group:last-child .form-control, .input-merge.input-merge-border .input-group:last-child .form-select, .input-merge.input-merge-border .input-group:last-child .form-textarea { border-bottom: 0; }
    40. 

  40. .input-merge.input-merge-border { border-top: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1; background: #fff; }
    41. 

  41. .input-group-addon-disabled, .form-control[disabled], .form-control:disabled, .form-textarea[disabled], .form-textarea:disabled, .form-textarea[disabled], .form-textarea:disabled, .form-select[disabled], .form-select:disabled { background-color: #f9f9f9; opacity: 1; -webkit-opacity: 1;}
    42. 

  42. .input-group .form-input { height: 45px; border-top: 1px solid #e1e1e1; position: relative; padding: 7px 0; }
    43. 

  43. .input-group .form-input-text { color: #909090; font-size: 15px; }
    44. 

  44. .input-group .form-select-box { display: inline-block; position: relative; margin-right: 10px; }
    45. 

  45. .input-group .form-select-box .form-select { width: 100%; }
    46. 

  46. .input-group .form-select-box .form-select-arrow { top: 7px; right: 12px }
    47. 

  47. .input-group .form-text-box { -webkit-box-flex: 1; box-flex: 1; border-right: 1px solid #e1e1e1; border-top: 1px solid #e1e1e1; padding: 9px 0px; line-height: 1.88; font-size: 14px;}
    48. 

  48. .input-group.input-border .form-text-box {border-right: 0;}
    49. 

  49. .input-group.input-border .form-input .form-control, .input-group.input-border .form-input .form-select { height: 31px; border: #e1e1e1 1px solid !important; border-radius: 2px; display: inline-block; vertical-align: baseline; line-height: 1.2; }
    50. 

  50. .input-group .input-clear { position: absolute; right: .3rem; top: 50%; margin-top: -.4rem; background: #7e7e7e; border-radius: 50%; width: .8rem; height: .8rem; text-align: center; }
    51. 

  51. .input-group .input-clear:before, .c-ser-main .input-clear:after { content: ''; position: absolute; height: 1px; width: .5rem; top: 50%; left: 50%; margin-top: -.025rem; margin-left: -.25rem; background: #fff; border-radius: 6px; }
    52. 

  52. .input-group .input-clear:before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
    53. 

  53. .input-group .input-clear:after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
    54. 

  54. .input-group-checkbox, .input-group-radio { display: inline-block; position: relative; font-size: 14px; color: #909090; }
    55. 

  55. .input-group-checkbox input[type="checkbox"], .input-group-radio input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
    56. 

  56. .input-group-checkbox .input-group-pack, .input-group-radio .input-group-pack { width: 20px; height: 20px; background-color: #ffffff; border: 1px #d3d3d3 solid; padding: 0; margin: 0 5px 0 0; position: relative; display: inline-block; vertical-align: middle; border-radius: 5px; overflow: hidden; top: -2px; }
    57. 

  57. .input-group-radio .input-group-pack { border-radius: 50%; }
    58. 

  58. .input-group-checkbox .input-group-pack.input-group-pack-disabled, .input-group-radio .input-group-pack.input-group-pack-disabled { background-color: #f0f0f0; }
    59. 

  59. .input-group-checkbox .input-group-pack .tick { display: block; width: 12px; height: 2px; background: #4dcd70; margin: 8px 0 0 6px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); position: relative; top: 50px; }
    60. 

  60. .input-group-checkbox .input-group-pack .tick:after { content: ''; width: 8px; height: 2px; background: #4dcd70; position: absolute; top: -3px; left: -5px; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); }
    61. 

  61. .input-group-radio .input-group-pack .disc { display: block; content: "" !important; width: 0px; height: 0px; border-radius: 50%; background-color: #4dcd70; margin: 4px; }
    62. 

  62. .input-group-checkbox input[type="checkbox"]:checked ~ .tick, .input-group-checkbox .input-group-pack.checked .tick { top: 0px; }
    63. 

  63. .input-group-radio input[type="radio"]:checked ~ .disc, .input-group-radio .input-group-pack.checked .disc { width: 10px; height: 10px; }
    64. 

  64. .input-group-switch { position: relative; font-size: 16px; width: 52px; height: 32px; line-height: 1em; }
    65. 

  65. .input-group-switch input { width: 52px; height: 32px; position: absolute; z-index: 10; border: none; background: none; -webkit-appearance: none; outline: none; }
    66. 

  66. .input-group-switch input:before { content: ''; width: 50px; height: 30px; border: 1px solid #e5e5e5; background-color: #fff; border-radius: 20px; cursor: pointer; display: inline-block; position: relative; vertical-align: middle; -webkit-user-select: none; user-select: none; -webkit-box-sizing: content-box; box-sizing: content-box; border-color: #dfdfdf; -webkit-box-shadow: #dfdfdf 0px 0px 0px 0px inset; box-shadow: #dfdfdf 0px 0px 0px 0px inset; -webkit-transition: border 0.4s, -webkit-box-shadow 0.4s; transition: border 0.4s, box-shadow 0.4s; -webkit-background-clip: content-box; background-clip: content-box; }
    67. 

  67. .input-group-switch input:checked:before { border-color: #4cd964; -webkit-box-shadow: #4cd964 0px 0px 0px 16px inset; box-shadow: #4cd964 0px 0px 0px 16px inset; background-color: #4cd964; transition: border 0.4s, box-shadow 0.4s, background-color 1.2s; -webkit-transition: border 0.4s, -webkit-box-shadow 0.4s, background-color 1.2s; background-color: #4cd964; }
    68. 

  68. .input-group-switch input:checked:after { left: 21px; }
    69. 

  69. .input-group-switch input:after { content: ''; width: 30px; height: 30px; position: absolute; top: 1px; left: 0; border-radius: 100%; background-color: #fff; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); -webkit-transition: left 0.2s; transition: left 0.2s; }
    70. 

  70. .input-group-switch input.thread:before { content: ''; width: 50px; height: 3px; border: 1px solid #e5e5e5; background-color: #e5e7ea; border-radius: 20px; cursor: pointer; display: inline-block; position: relative; vertical-align: middle; -webkit-user-select: none; user-select: none; -webkit-box-sizing: content-box; box-sizing: content-box; border-color: #dfdfdf; -webkit-box-shadow: #dfdfdf 0px 0px 0px 0px inset; box-shadow: #dfdfdf 0px 0px 0px 0px inset; -webkit-transition: border 0.4s, -webkit-box-shadow 0.4s; transition: border 0.4s, box-shadow 0.4s; -webkit-background-clip: content-box; background-clip: content-box; }
    71. 

  71. .input-group-switch input.thread:checked:before { border-color: #4cd964; -webkit-box-shadow: #4cd964 0px 0px 0px 16px inset; box-shadow: #4cd964 0px 0px 0px 16px inset; background-color: #4cd964; transition: border 0.4s, box-shadow 0.4s, background-color 1.2s; -webkit-transition: border 0.4s, -webkit-box-shadow 0.4s, background-color 1.2s; background-color: #4cd964; }
    72. 

  72. .input-group-switch input.thread:checked:after { left: 33px; }
    73. 

  73. .input-group-switch input.thread:after { content: ''; width: 20px; height: 20px; position: absolute; top: 1px; left: 0; border-radius: 100%; background-color: #fff; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); -webkit-transition: left 0.2s; transition: left 0.2s; }
    74.