You are here

form-controls.css in Open Social 8.3

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

.form-control:focus {
  border-color: #29abe2;
  outline: 0;
  -webkit-box-shadow: 0 2px 0 0 #29abe2;
          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;
}

input[type='range']::-webkit-slider-thumb {
  background: #1d789e;
  border: 2px solid #1d789e;
}

input[type='range']::-ms-thumb {
  background: #1d789e;
  border: 2px solid #1d789e;
}

input[type='range']::-moz-range-thumb {
  background: #1d789e;
  border: 2px solid #1d789e;
}

[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 {
  -webkit-box-shadow: 0 0 3px 2px #56bde8;
          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% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

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