jetpack-idc.scss 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206
  1. @import '../_inc/client/scss/variables/_colors.scss';
  2. .jp-idc-notice,
  3. .jp-idc-notice * {
  4. box-sizing: border-box;
  5. }
  6. .jp-idc-notice {
  7. margin-left: 0;
  8. margin-right: 10px;
  9. margin-top: 10px;
  10. overflow: hidden;
  11. padding-bottom: 16px;
  12. padding-top: 0;
  13. &.is-non-admin {
  14. padding-bottom: 0;
  15. }
  16. }
  17. @media all and ( min-width: 783px ) {
  18. .jp-idc-notice {
  19. margin-right: 20px;
  20. margin-top: 20px;
  21. &.has-help-tabs {
  22. margin-top: 48px;
  23. }
  24. }
  25. }
  26. .jp-idc-notice p {
  27. margin: 0;
  28. padding: 0;
  29. }
  30. .jp-idc-notice {
  31. h3, p {
  32. color: $gray-dark;
  33. }
  34. }
  35. .jp-idc-notice a:not( .dops-notice__action ) {
  36. color: $blue-wordpress;
  37. text-decoration: none;
  38. &:visited {
  39. color: $blue-wordpress;
  40. }
  41. &:hover,
  42. &:focus,
  43. &:active {
  44. color: $link-highlight;
  45. }
  46. }
  47. .jp-idc-notice .dops-button {
  48. align-self: flex-start;
  49. margin-top: auto;
  50. }
  51. .jp-idc-notice > div {
  52. padding: 0 8px;
  53. }
  54. .jp-idc-notice__first-step {
  55. display: inline-block;
  56. }
  57. .jp-idc-notice__second-step {
  58. display: none;
  59. }
  60. .jp-idc-notice.jp-idc-show-second-step {
  61. .jp-idc-notice__first-step {
  62. display: none;
  63. }
  64. .jp-idc-notice__second-step {
  65. display: inline-block;
  66. }
  67. }
  68. .jp-idc-notice .jp-idc-notice__header {
  69. padding-top: 8px;
  70. padding-bottom: 8px;
  71. }
  72. .jp-idc-notice__header__emblem {
  73. fill: $green-primary;
  74. width: 25px;
  75. height: 25px;
  76. margin: 0 1em 0 auto;
  77. float: left;
  78. }
  79. .jp-idc-notice__header__text {
  80. font-size: 14px;
  81. font-weight: 600;
  82. line-height: 25px;
  83. margin: 0;
  84. }
  85. .jp-idc-notice__content-header {
  86. margin: 16px 0;
  87. }
  88. .jp-idc-notice__content-header__lead {
  89. font-size: 16px;
  90. font-weight: 600;
  91. line-height: 21px;
  92. margin: 0;
  93. }
  94. .jp-idc-notice__content-header .jp-idc-notice__content-header__explanation {
  95. font-size: 14px;
  96. font-weight: 400;
  97. margin: 8px 0 0;
  98. }
  99. @media only screen and ( min-width: 960px ) {
  100. .jp-idc-notice__content-header .jp-idc-notice__content-header__explanation {
  101. margin: 4px 0 0;
  102. }
  103. }
  104. .jp-idc-notice__action {
  105. border: 1px solid lighten( $gray, 30% );
  106. border-radius: 4px;
  107. display: flex;
  108. padding: 16px;
  109. flex-direction: column;
  110. margin-top: auto;
  111. }
  112. .jp-idc-notice__action:last-child {
  113. margin: 16px 0 0;
  114. }
  115. @media only screen and ( min-width: 960px ) {
  116. .jp-idc-notice__actions {
  117. display: flex;
  118. }
  119. .jp-idc-notice__action {
  120. flex: 1;
  121. margin: 0 8px 0 0;
  122. }
  123. .jp-idc-notice__action:last-child {
  124. margin: 0 0 0 8px;
  125. }
  126. .jp-idc-notice__action:first-child {
  127. padding-right: 24px;
  128. }
  129. .jp-idc-notice__action:last-child {
  130. padding-left: 24px;
  131. }
  132. }
  133. .jp-idc-notice .jp-idc-notice__action__explanation {
  134. margin: 0 0 16px 0;
  135. }
  136. .jp-idc-notice__separator {
  137. background-color: lighten( $gray, 30% );
  138. margin: 0 -10px 0 -10px;
  139. height: 1px;
  140. }
  141. .jp-idc-notice.is-dismissible .jp-idc-notice__separator {
  142. margin-right: -46px;
  143. }
  144. @media only screen and ( min-width: 782px ) {
  145. .jp-idc-notice__separator {
  146. margin: 0 -12px 0 -12px;
  147. }
  148. .jp-idc-notice.is-dismissible .jp-idc-notice__separator {
  149. margin-right: -38px;
  150. }
  151. }
  152. .jp-idc-notice .jp-idc-notice__unsure-prompt {
  153. margin: 16px 0 0;
  154. }
  155. .jp-idc-notice .jp-idc-error__notice {
  156. display: none;
  157. .dops-notice__icon {
  158. height: auto;
  159. width: auto;
  160. }
  161. }
  162. @media only screen and ( min-width: 683px ) {
  163. .jp-idc-notice .jp-idc-error__notice .dops-notice__text {
  164. line-height: 24px;
  165. }
  166. }