onboarding.scss 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. .onboarding-data-collection-wrapper {
  2. max-width: 730px;
  3. margin: 0 auto;
  4. display: flex;
  5. flex-direction: column;
  6. gap: 10px;
  7. .d-block,
  8. .select-wrapper {
  9. label {
  10. font-size: 14px; // override DownshiftInput and Select component label size
  11. }
  12. .select-items {
  13. max-height: 150px;
  14. }
  15. .select-trigger {
  16. border: 1px solid var(--neutral-60);
  17. color: var(--neutral-60);
  18. }
  19. }
  20. p {
  21. font-size: 16px;
  22. margin-bottom: var(--spacing-06);
  23. }
  24. .logo {
  25. width: 130px;
  26. margin: 0 auto;
  27. }
  28. form {
  29. display: flex;
  30. flex-direction: column;
  31. gap: var(--spacing-08);
  32. .group-horizontal {
  33. display: flex;
  34. justify-content: stretch;
  35. gap: var(--spacing-08);
  36. @include media-breakpoint-down(md) {
  37. flex-direction: column;
  38. gap: 0;
  39. }
  40. .form-group {
  41. flex-grow: 1;
  42. }
  43. }
  44. .form-actions {
  45. display: flex;
  46. justify-content: space-between;
  47. > div {
  48. display: flex;
  49. align-items: center;
  50. gap: var(--spacing-04);
  51. }
  52. }
  53. }
  54. }
  55. .onboarding-data-collection-form {
  56. background: var(--bg-light-primary);
  57. padding: var(--spacing-08);
  58. display: flex;
  59. flex-direction: column;
  60. gap: var(--spacing-08);
  61. }
  62. .onboarding-question-title {
  63. font-size: 20px;
  64. border-bottom: none;
  65. margin-bottom: var(--spacing-08);
  66. }
  67. .onboarding-step-2 {
  68. .radio-group {
  69. height: 240px;
  70. }
  71. .form-check {
  72. margin: 0;
  73. p {
  74. margin-bottom: 0;
  75. }
  76. label {
  77. display: flex;
  78. align-items: center;
  79. gap: var(--spacing-04);
  80. input {
  81. margin-right: var(--spacing-02);
  82. }
  83. }
  84. }
  85. }
  86. .onboarding-collapse-button {
  87. display: flex;
  88. align-items: center;
  89. cursor: pointer;
  90. color: var(--blue-50);
  91. user-select: none;
  92. }
  93. .onboarding-privacy-extended {
  94. @include media-breakpoint-down(md) {
  95. padding: 0 var(--spacing-08);
  96. }
  97. }
  98. .onboarding-data-collection-form-margin {
  99. @include media-breakpoint-down(md) {
  100. margin-bottom: 100px;
  101. }
  102. }
  103. .compromised-password-content {
  104. display: flex;
  105. flex-direction: column;
  106. gap: var(--spacing-05);
  107. }