Advertisement
Guest User

Untitled

a guest
Mar 21st, 2019
58
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.25 KB | None | 0 0
  1. .form {
  2. &__group:not(:last-child) {
  3. margin-bottom: 2rem;
  4. }
  5.  
  6. &__input {
  7. font-size: 1.5rem;
  8. font-family: inherit;
  9. color: inherit;
  10. padding: 1.5rem 2rem;
  11. border-radius: 2px;
  12. background-color: rgba($color-white, .5);
  13. border: none;
  14. border-bottom: 3px solid transparent;
  15. width: 90%;
  16. display: block;
  17. transition: all .3s;
  18.  
  19. @include respond(tab-port) {
  20. width: 100%;
  21. }
  22.  
  23. &:focus {
  24. outline: none;
  25. box-shadow: 0 1rem 2rem rgba($color-black, .1);
  26. border-bottom: 3px solid $color-primary;
  27. }
  28.  
  29. &:focus:invalid {
  30. border-bottom: 3px solid $color-secondary-dark;
  31. }
  32.  
  33. &::-webkit-input-placeholder {
  34. color: $color-grey-dark-2;
  35. }
  36. }
  37.  
  38.  
  39. &__label {
  40. font-size: 1.2rem;
  41. font-weight: 700;
  42. margin-left: 2rem;
  43. margin-top: .7rem;
  44. display: block;
  45. transition: all .3s;
  46. }
  47.  
  48. &__input:placeholder-shown + &__label {
  49. opacity: 0;
  50. visibility: hidden;
  51. transform: translateY(-4rem);
  52. }
  53.  
  54.  
  55. &__radio-group {
  56. width: 49%;
  57. display: inline-block;
  58.  
  59. @include respond(tab-port) {
  60. width: 100%;
  61. margin-bottom: 2rem;
  62. }
  63. }
  64.  
  65. &__radio-input {
  66. display: none;
  67. }
  68.  
  69. &__radio-label {
  70. font-size: $default-font-size;
  71. cursor: pointer;
  72. position: relative;
  73. padding-left: 4.5rem;
  74. }
  75.  
  76. &__radio-button {
  77. height: 3rem;
  78. width: 3rem;
  79. border: 5px solid $color-primary;
  80. border-radius: 50%;
  81. display: inline-block;
  82. position: absolute;
  83. left: 0;
  84. top: -.4rem;
  85.  
  86. &::after {
  87. content: "";
  88. display: block;
  89. height: 1.3rem;
  90. width: 1.3rem;
  91. border-radius: 50%;
  92. position: absolute;
  93. top: 50%;
  94. left: 50%;
  95. transform: translate(-50%, -50%);
  96. background-color: $color-primary;
  97. opacity: 0;
  98. transition: opacity .2s;
  99. }
  100. }
  101.  
  102. &__radio-input:checked ~ &__radio-label &__radio-button::after {
  103. opacity: 1;
  104. }
  105. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement