%PDF- %PDF-
Direktori : /var/www/html/ceaa/wp-content/plugins/buddypress/bp-core/admin/sass/ |
Current File : /var/www/html/ceaa/wp-content/plugins/buddypress/bp-core/admin/sass/hello.scss |
/*------------------------------------------------------------------------------ Loaded in wp-admin for query string `hello=buddypress`. @since 3.0.0 -------------------------------------------------------------------------------- TABLE OF CONTENTS: -------------------------------------------------------------------------------- 1.0 - Typography and colour 2.0 - Dashicons 3.0 - Elements 3.1 - Backdrop and container 3.2 - Modal footer 3.3 - Modal header 3.4 - Modal content 4.0 - Content styles 4.1 - Backdrop and container 4.2 - Footer content 4.3 - Header content 4.4 - Content content 5.0 - Media 6.0 - Media Queries 6.1 - Desktop Medium 6.2 - Desktop Large ------------------------------------------------------------------------------*/ /*------------------------------------------------------------------------------ * 1.0 - Typography and colour *----------------------------------------------------------------------------*/ :root { --bp-hello-color-primary: #d34600; --bp-hello-color-secondary: #e5e5e5; --bp-hello-container-size: 15%; } #bp-hello-container { a { color: var(--bp-hello-color-primary); &:hover { -webkit-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; color: rgb(0, 0, 0); } } .bp-hello-header { h1 { line-height: 1.7; font-size: 21px; font-weight: 400; } } } .bp-hello-content { p { font-size: 16px; } } /*------------------------------------------------------------------------------ * 2.0 - Dashicons *----------------------------------------------------------------------------*/ .bp-hello-close { .button { padding: 5px !important; } .close-modal { &:before { content: "\f158"; color: #23282d; /* wp toolbar */ font: 400 1.5em/1 dashicons; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-image: none !important; } &:focus:before, &:hover:before { -webkit-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; color: var(--bp-hello-color-primary); } } } .bp-hello-social { li a { &:before { color: #23282d; /* wp toolbar */ font: 400 30px/0.6 dashicons; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-image: none !important; } &:hover:before { -webkit-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; color: var(--bp-hello-color-primary); } &.support:before { content: "\f448"; } &.twitter:before { content: "\f301"; } } } /*------------------------------------------------------------------------------ * 3.0 - Elements *----------------------------------------------------------------------------*/ /* * 3.1 - Backdrop and container */ #bp-hello-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9998; display: none; } #bp-hello-container { position: fixed; top: 0; bottom: 80px; z-index: 99999; } .bp-disable-scroll { overflow: hidden; } /* * 3.2 - Modal footer */ .bp-hello-footer { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; height: 58px; max-height: 58px; } .bp-hello-social-cta, .bp-hello-social-links { -ms-flex-preferred-size: 50%; flex-basis: 50%; } .bp-hello-social-links { ul { display: inline-block; } } .bp-hello-social { li { position: relative; bottom: -5px; display: inline-block; list-style-type: none; margin-bottom: 0; &:last-child a { margin-left: 4px; } } } /* * 3.3 - Modal header */ .bp-hello-header { height: 58px; max-height: 58px; } /* * 3.4 - Modal content */ .bp-hello-content { padding: 0 25px; // Force scrolling. height: calc(100% - 58px); overflow-y: auto; -webkit-overflow-scrolling: touch; } /*------------------------------------------------------------------------------ * 4.0 - Content styles *----------------------------------------------------------------------------*/ /* * 4.1 - Backdrop and container */ #bp-hello-backdrop { background-color: rgba(0, 0, 0, 0.8); -webkit-transition: opacity 0.15s ease-out; -o-transition: opacity 0.15s ease-out; transition: opacity 0.15s ease-out; } #bp-hello-container { background-color: rgb(255, 255, 255); } /* * 4.2 - Footer content */ .bp-hello-footer { border-radius: 0 0 3px 3px; background-color: rgb(255, 255, 255); border-top: 1px solid var(--bp-hello-color-secondary); padding: 6px 25px; p { font-size: 15px; } } .bp-hello-social-cta { text-align: left; } .bp-hello-social-links { text-align: right; } .bp-hello-social { li { a { text-decoration: none; } } } /* * 4.3 - Header content */ .bp-hello-header { padding: 6px 25px; h1 { width: calc(100% - 51px); // Approx. width of "X" button block. } } #bp-hello-container { .bp-hello-header { border-bottom: 1px solid var(--bp-hello-color-secondary); } } .bp-hello-title { text-align: left; } .bp-hello-close { position: absolute; top: 20px; right: 25px; text-align: right; } /* * 4.4 - Content content */ .bp-hello-content { background-color: rgb(255, 255, 255); } /*------------------------------------------------------------------------------ * 5.0 - Media *----------------------------------------------------------------------------*/ .bp-hello-content { img { border-radius: 2px; max-width: 100%; } iframe { width: 100%; } } /*------------------------------------------------------------------------------ * 6.0 - Media Queries *----------------------------------------------------------------------------*/ /* * 6.1 - Desktop Medium */ @media only screen and (min-width: 1024px) { #bp-hello-backdrop { display: block; } #bp-hello-container { position: fixed; top: 60px; left: var(--bp-hello-container-size); right: var(--bp-hello-container-size); bottom: 30px; z-index: 9999; border-radius: 3px; .bp-hello-header { h1 { line-height: inherit; } } } .bp-hello-header { height: auto; max-height: inherit; padding: 6px 30px; } .bp-hello-close { right: 30px; .close-modal:before { line-height: 0.7; } } .bp-hello-footer { position: fixed; // Fixed position above "content" div. left: var(--bp-hello-container-size); right: var(--bp-hello-container-size); bottom: 30px; z-index: 10000; // See #bp-hello-backdrop height: auto; max-height: inherit; padding: 6px 30px; } .bp-hello-content { // Very very approx. height of header and footer. height: calc(100% - 90px); padding: 0 30px; p { font-size: 14px; } iframe { height: 100%; } } } /** * 6.2 - Desktop Large */ @media screen and (min-width: 1280px) { #bp-hello-container, .bp-hello-footer { // Approx. max-width of modal at Desktop Medium size. left: calc((100% - 896px) / 2); right: calc((100% - 896px) / 2); } }