| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206 |
- @import '../_inc/client/scss/variables/_colors.scss';
- .jp-idc-notice,
- .jp-idc-notice * {
- box-sizing: border-box;
- }
- .jp-idc-notice {
- margin-left: 0;
- margin-right: 10px;
- margin-top: 10px;
- overflow: hidden;
- padding-bottom: 16px;
- padding-top: 0;
- &.is-non-admin {
- padding-bottom: 0;
- }
- }
- @media all and ( min-width: 783px ) {
- .jp-idc-notice {
- margin-right: 20px;
- margin-top: 20px;
- &.has-help-tabs {
- margin-top: 48px;
- }
- }
- }
- .jp-idc-notice p {
- margin: 0;
- padding: 0;
- }
- .jp-idc-notice {
- h3, p {
- color: $gray-dark;
- }
- }
- .jp-idc-notice a:not( .dops-notice__action ) {
- color: $blue-wordpress;
- text-decoration: none;
- &:visited {
- color: $blue-wordpress;
- }
- &:hover,
- &:focus,
- &:active {
- color: $link-highlight;
- }
- }
- .jp-idc-notice .dops-button {
- align-self: flex-start;
- margin-top: auto;
- }
- .jp-idc-notice > div {
- padding: 0 8px;
- }
- .jp-idc-notice__first-step {
- display: inline-block;
- }
- .jp-idc-notice__second-step {
- display: none;
- }
- .jp-idc-notice.jp-idc-show-second-step {
- .jp-idc-notice__first-step {
- display: none;
- }
- .jp-idc-notice__second-step {
- display: inline-block;
- }
- }
- .jp-idc-notice .jp-idc-notice__header {
- padding-top: 8px;
- padding-bottom: 8px;
- }
- .jp-idc-notice__header__emblem {
- fill: $green-primary;
- width: 25px;
- height: 25px;
- margin: 0 1em 0 auto;
- float: left;
- }
- .jp-idc-notice__header__text {
- font-size: 14px;
- font-weight: 600;
- line-height: 25px;
- margin: 0;
- }
- .jp-idc-notice__content-header {
- margin: 16px 0;
- }
- .jp-idc-notice__content-header__lead {
- font-size: 16px;
- font-weight: 600;
- line-height: 21px;
- margin: 0;
- }
- .jp-idc-notice__content-header .jp-idc-notice__content-header__explanation {
- font-size: 14px;
- font-weight: 400;
- margin: 8px 0 0;
- }
- @media only screen and ( min-width: 960px ) {
- .jp-idc-notice__content-header .jp-idc-notice__content-header__explanation {
- margin: 4px 0 0;
- }
- }
- .jp-idc-notice__action {
- border: 1px solid lighten( $gray, 30% );
- border-radius: 4px;
- display: flex;
- padding: 16px;
- flex-direction: column;
- margin-top: auto;
- }
- .jp-idc-notice__action:last-child {
- margin: 16px 0 0;
- }
- @media only screen and ( min-width: 960px ) {
- .jp-idc-notice__actions {
- display: flex;
- }
- .jp-idc-notice__action {
- flex: 1;
- margin: 0 8px 0 0;
- }
- .jp-idc-notice__action:last-child {
- margin: 0 0 0 8px;
- }
- .jp-idc-notice__action:first-child {
- padding-right: 24px;
- }
- .jp-idc-notice__action:last-child {
- padding-left: 24px;
- }
- }
- .jp-idc-notice .jp-idc-notice__action__explanation {
- margin: 0 0 16px 0;
- }
- .jp-idc-notice__separator {
- background-color: lighten( $gray, 30% );
- margin: 0 -10px 0 -10px;
- height: 1px;
- }
- .jp-idc-notice.is-dismissible .jp-idc-notice__separator {
- margin-right: -46px;
- }
- @media only screen and ( min-width: 782px ) {
- .jp-idc-notice__separator {
- margin: 0 -12px 0 -12px;
- }
- .jp-idc-notice.is-dismissible .jp-idc-notice__separator {
- margin-right: -38px;
- }
- }
- .jp-idc-notice .jp-idc-notice__unsure-prompt {
- margin: 16px 0 0;
- }
- .jp-idc-notice .jp-idc-error__notice {
- display: none;
- .dops-notice__icon {
- height: auto;
- width: auto;
- }
- }
- @media only screen and ( min-width: 683px ) {
- .jp-idc-notice .jp-idc-error__notice .dops-notice__text {
- line-height: 24px;
- }
- }
|