Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- .add-teacher-wrapper {
- .add-teacher-button {
- @extend .button;
- @extend .typography-heading;
- display: inline-block;
- width: 170px;
- height: 45px;
- span {
- display: inline-block;
- vertical-align: middle;
- line-height: 45px;
- }
- }
- .popup {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background-color: rgba(0, 0, 0, 0.5);
- -webkit-backdrop-filter: saturate(150%) blur(10px);
- z-index: 10;
- //display: none;
- opacity: 0;
- visibility: hidden;
- transition: 250ms all;
- .popup-inner {
- width: 400px;
- box-sizing: border-box;
- padding: 20px;
- background: #fff;
- position: absolute;
- border-radius: 8px;
- left: 50%;
- top: 50%;
- transform: translate(-50%, -50%);
- .popup-title {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 20px;
- .popup-close-btn {
- @extend .typography-body;
- cursor: pointer;
- background: #eee;
- display: block;
- line-height: 30px;
- padding: 0 15px;
- font-size: 14px;
- color: #222;
- border-radius: 3px;
- }
- }
- .popup-content {
- ul {
- li {
- margin-bottom: 10px;
- &:last-child {
- margin-bottom: 0;
- }
- input {
- width: 100%;
- border: 1px solid #ddd;
- border-radius: 3px;
- line-height: 34px;
- padding: 0 15px;
- font-size: 14px;
- box-sizing: border-box;
- }
- .add-button {
- @extend .button;
- @extend .typography-heading;
- width: 100%;
- height: 40px;
- }
- }
- }
- }
- }
- .transparent-label {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: -1;
- cursor: pointer;
- }
- }
- >input {
- display: none;
- &:checked + .popup {
- opacity: 1;
- visibility: visible;
- .popup-inner {
- top: 50%;
- }
- }
- }
- }
- @supports not (-webkit-backdrop-filter: blur()) {
- .add-teacher-wrapper .popup {
- background-color: rgba(0, 0, 0, 0.8);
- backdrop-filter: blur(5px);
- }
- }
Add Comment
Please, Sign In to add comment