You are here

form-controls.css in Open Social 8.9

.form-control {
  color: #555555;
  background-color: #fff;
  border: 1px solid #adadad;
  border-radius: 5px;
}

.form-control:focus {
  border-color: #29abe2;
  outline: 0;
  box-shadow: 0 2px 0 0 #29abe2;
}

.form-control::-moz-placeholder {
  color: #999;
}

.form-control:-ms-input-placeholder {
  color: #999;
}

.form-control::-webkit-input-placeholder {
  color: #999;
}

.form-control[disabled], .form-control[readonly],
fieldset[disabled] .form-control {
  background-color: #fff;
  opacity: 1;
}

[type="radio"]:checked:not(:disabled) + label {
  color: #1d789e;
}

[type="radio"]:checked + label:before {
  border: 2px solid #1d789e;
}

[type="radio"]:checked + label:after {
  border: 2px solid #1d789e;
  background-color: #1d789e;
}

[type="radio"]:focus + label:before {
  box-shadow: 0 0 3px 2px #56bde8;
}

[type="checkbox"]:checked + label:after {
  border: 2px solid #1d789e;
  background-color: #1d789e;
}

[type="checkbox"].tabbed:checked:focus + label:after {
  background-color: #1d789e;
  border-color: #1d789e;
}

.js--animate-enabled-form-control:checked + label {
  -webkit-animation: scale-form-control 0.5s ease-in 0.5s;
          animation: scale-form-control 0.5s ease-in 0.5s;
}

@-webkit-keyframes scale-form-control {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes scale-form-control {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.switch input[type=checkbox]:checked + .lever {
  background-color: #72afc8;
}

.switch input[type=checkbox]:checked + .lever:after {
  background-color: #1d789e;
}

input[type=checkbox]:checked:not(:disabled) ~ .lever:active:after {
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(29, 120, 158, 0.1);
}

.input-group .select-wrapper:first-child .form-control:first-child {
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
}

.input-group .select-wrapper:last-child .form-control:first-child {
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
}

.has-error .select-wrapper:after {
  color: #a94442;
}

.has-success .select-wrapper:after {
  color: #3c763d;
}

.has-warning .select-wrapper:after {
  color: #8a6d3b;
}

File

themes/socialblue/assets/css/form-controls.css
View source
  1. .form-control {
  2. color: #555555;
  3. background-color: #fff;
  4. border: 1px solid #adadad;
  5. border-radius: 5px;
  6. }
  7. .form-control:focus {
  8. border-color: #29abe2;
  9. outline: 0;
  10. box-shadow: 0 2px 0 0 #29abe2;
  11. }
  12. .form-control::-moz-placeholder {
  13. color: #999;
  14. }
  15. .form-control:-ms-input-placeholder {
  16. color: #999;
  17. }
  18. .form-control::-webkit-input-placeholder {
  19. color: #999;
  20. }
  21. .form-control[disabled], .form-control[readonly],
  22. fieldset[disabled] .form-control {
  23. background-color: #fff;
  24. opacity: 1;
  25. }
  26. [type="radio"]:checked:not(:disabled) + label {
  27. color: #1d789e;
  28. }
  29. [type="radio"]:checked + label:before {
  30. border: 2px solid #1d789e;
  31. }
  32. [type="radio"]:checked + label:after {
  33. border: 2px solid #1d789e;
  34. background-color: #1d789e;
  35. }
  36. [type="radio"]:focus + label:before {
  37. box-shadow: 0 0 3px 2px #56bde8;
  38. }
  39. [type="checkbox"]:checked + label:after {
  40. border: 2px solid #1d789e;
  41. background-color: #1d789e;
  42. }
  43. [type="checkbox"].tabbed:checked:focus + label:after {
  44. background-color: #1d789e;
  45. border-color: #1d789e;
  46. }
  47. .js--animate-enabled-form-control:checked + label {
  48. -webkit-animation: scale-form-control 0.5s ease-in 0.5s;
  49. animation: scale-form-control 0.5s ease-in 0.5s;
  50. }
  51. @-webkit-keyframes scale-form-control {
  52. 0% {
  53. transform: scale(1);
  54. }
  55. 50% {
  56. transform: scale(1.1);
  57. }
  58. 100% {
  59. transform: scale(1);
  60. }
  61. }
  62. @keyframes scale-form-control {
  63. 0% {
  64. transform: scale(1);
  65. }
  66. 50% {
  67. transform: scale(1.1);
  68. }
  69. 100% {
  70. transform: scale(1);
  71. }
  72. }
  73. .switch input[type=checkbox]:checked + .lever {
  74. background-color: #72afc8;
  75. }
  76. .switch input[type=checkbox]:checked + .lever:after {
  77. background-color: #1d789e;
  78. }
  79. input[type=checkbox]:checked:not(:disabled) ~ .lever:active:after {
  80. box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(29, 120, 158, 0.1);
  81. }
  82. .input-group .select-wrapper:first-child .form-control:first-child {
  83. border-bottom-left-radius: 5px;
  84. border-top-left-radius: 5px;
  85. }
  86. .input-group .select-wrapper:last-child .form-control:first-child {
  87. border-bottom-right-radius: 5px;
  88. border-top-right-radius: 5px;
  89. }
  90. .has-error .select-wrapper:after {
  91. color: #a94442;
  92. }
  93. .has-success .select-wrapper:after {
  94. color: #3c763d;
  95. }
  96. .has-warning .select-wrapper:after {
  97. color: #8a6d3b;
  98. }