diff options
Diffstat (limited to 'plugins/jetpack/scss/jetpack-idc.scss')
-rw-r--r-- | plugins/jetpack/scss/jetpack-idc.scss | 206 |
1 files changed, 206 insertions, 0 deletions
diff --git a/plugins/jetpack/scss/jetpack-idc.scss b/plugins/jetpack/scss/jetpack-idc.scss new file mode 100644 index 00000000..792851a0 --- /dev/null +++ b/plugins/jetpack/scss/jetpack-idc.scss @@ -0,0 +1,206 @@ +@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; + } +} |