PHP Classes

File: assets/scss/admin-style.scss

Recommend this page to a friend!
  Classes of Adeleye Ayodeji   Customize Tawk.to Widget for WordPress   assets/scss/admin-style.scss   Download  
File: assets/scss/admin-style.scss
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: Customize Tawk.to Widget for WordPress
Customize the Tawk.to WordPress chat widget
Author: By
Last change:
Date: 2 months ago
Size: 6,325 bytes
 

Contents

Class file image Download
.customise-tawk-to-widget-container { padding: 10px; &--header { background: #f7f7f9; padding: 5px 20px; h3 { color: #545454; text-transform: uppercase !important; font-size: 16px; font-weight: 700; } } &--body { margin-top: 20px; display: flex; justify-content: normal; &--site-widget-status { display: flex; justify-content: space-between; align-items: center; } h4 { font-size: 14px; font-weight: 600; margin: 0px; margin-bottom: 10px; } &--site-widget-save { border: 1px solid #d9dbe4; border-radius: 5px; box-sizing: border-box; color: white; height: 40px; line-height: 38px; min-width: 40px; padding: 0px 50px; transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1); background: #03a84e !important; border-color: #03a84e !important; cursor: pointer; } &--site-widget-save:hover { background: #079346 !important; border-color: #ecf3ef !important; } } .customise-toggler { input[type="checkbox"] { height: 0; width: 0; visibility: hidden; display: none; } label { cursor: pointer; text-indent: -9999px; width: 40px; height: 20px; background: grey; display: block; border-radius: 100px; position: relative; } label:after { content: ""; position: absolute; top: 5px; left: 5px; width: 13px; height: 11px; background: #fff; border-radius: 90px; transition: 0.3s; } input:checked + label { background: #03a84e; } input:checked + label:after { left: calc(100% - 5px); transform: translateX(-100%); } label:active:after { width: 40px; } } .customise-tawk-to-widget-card { background: #fff; border: 1px solid #d9dbe4; border-radius: 5px; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); box-sizing: border-box; padding: 17px; max-width: 300px; } .cmt-3 { margin-top: 15px; } .cmb-1 { margin-bottom: 10px; } .cmt-1 { margin-top: 10px; } .customise-tawk-to-label { display: flex; justify-content: space-between; align-items: center; width: 100%; } .customise-tawk-to-main-body { width: 538px; display: flex; flex-direction: column; justify-content: normal; padding-left: 10px; } .customise-ads-area { width: 775px; } .customise-ads-header-title { font-size: 14px; font-weight: 600; margin: 0px; margin-bottom: 15px; color: #545454; } .customise-ads-image { height: auto; max-height: 170px; width: 100%; border-radius: 8px; } .customise-ads-actions { display: flex; justify-content: space-between; align-items: center; } .customise-ads { width: fit-content; padding: 7px; border: 1px solid lightgray; border-radius: 10px; a { height: fit-content !important; } } .trigger { text-align: center; padding: 7px 13px; background: #3e3e3e; color: #fff; font-size: 15px; outline: none; border: none; border-radius: 5px; font-family: cursive; } .modal { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transform: scale(1.1); transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s; } .modal-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 1rem 1.5rem; width: auto; border-radius: 0.5rem; .close-action { margin-top: -46px; margin-bottom: 50px; } } .close-button { float: right; width: 1.5rem; line-height: 1.5rem; text-align: center; cursor: pointer; border-radius: 0.25rem; background-color: lightgray; } .close-button:hover { background-color: darkgray; } .show-modal { opacity: 1; visibility: visible; transform: scale(1); transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s; } } .customise-tawk-to-notice { margin-bottom: 11px; margin-left: 0px; width: fit-content; } #wpcontent, #wpfooter { margin-left: 143px !important; } .customise-ads-sub-action { display: flex; justify-content: space-between; align-items: center; //first a a:first-child { margin-right: 10px; } } /* Extra small devices (phones, 600px and down) */ @media only screen and (max-width: 600px) { .customise-tawk-to-widget-container { &--body { display: block !important; } .customise-tawk-to-main-body { width: 100%; } .customise-ads-area { width: 100%; margin-top: 30px; } } } /* Small devices (portrait tablets and large phones, 600px and up) */ @media only screen and (min-width: 600px) { .customise-tawk-to-widget-container { &--body { display: block !important; } .customise-tawk-to-main-body { width: 100%; } .customise-ads-area { width: 100%; margin-top: 30px; } } } /* Medium devices (landscape tablets, 768px and up) */ @media only screen and (min-width: 768px) { .customise-tawk-to-widget-container { &--body { display: block !important; } .customise-tawk-to-main-body { width: 100%; } .customise-ads-area { width: 100%; margin-top: 30px; } } } /* Large devices (laptops/desktops, 992px and up) */ @media only screen and (min-width: 992px) { .customise-tawk-to-widget-container { &--body { display: flex !important; } .customise-tawk-to-main-body { width: 410px; } .customise-ads-area { width: 775px; margin-top: 0px; } } } /* Extra large devices (large laptops and desktops, 1200px and up) */ @media only screen and (min-width: 1200px) { .customise-tawk-to-widget-container { &--body { display: flex !important; } .customise-tawk-to-main-body { width: 410px; } .customise-ads-area { width: 775px; margin-top: 0px; } } }