balmet.com

style.scss (5806B)

---

 $primary-color: #24b0a6;
 $hover-color: #19837c;
 $border-color: #00a7e5;
 $border-hover-color: #19837c;
 $progress-color: #2576a4;
 
 $item-current-color: #df7739;
 $item-completed-color: #6ab255;
 
 .feedback-wrapper {
     // z-index: 600000;
     position: relative;
 }
 
 .redux-templates-feedback {
     padding: 20px;
     width: 600px;
     .panel {
         display: flex;
         flex-direction: column;
         flex: 1;
         transition: max-height 0.5s ease-out, opacity 0.5s ease-out;
         max-height: 300px;
         opacity: 1;
         &.fade {
             max-height: 0;
             opacity: 0;
         }
         .field {
             display: flex;
             margin-bottom: 15px;
             align-items: center;
             &.top {
                 align-items: top;
             }
             label {
                 margin-right: 15px;
             }
             label + input,
             textarea {
                 padding: 5px 10px;
                 width: 375px;
             }
             input[type="checkbox"],
             input[type="radio"] {
                 margin-top: 0;
                 margin-right: 0.5rem;
             }
         }
         button {
             align-self: center;
             margin-top: 1rem;
         }
     }
     h4 {
         margin: 0.5rem 0;
     }
     .error-panel {
         color: #f00;
         margin-bottom: 10px;
     }
 }
 .redux-templates-feedback-modal-wrapper {
     display: flex;
     flex-direction: column;
     background: #fff;
     .redux-templates-modal-header {
         border-bottom: 1px solid #ddd;
         width: 100%;
         flex: 0 0 60px;
         padding: 10px 15px;
         display: flex;
         align-items: center;
         justify-content: space-between;
         box-sizing: border-box;
 
         h3 {
             margin: 0;
             font-size: 1.2rem;
         }
 
         button {
             border: none;
             cursor: pointer;
         }
 
         .redux-templates-modal-close {
             font-size: 20px;
             background: transparent;
             color: #9b9b9b;
         }
 
     }
 }
 
 .feedback-popup-wrapper {
     border-radius: 4px;
 }
 
 .less-margin .feedback-popup-content {
     padding: 20px 25px;
 }
 .feedback-popup-content {
     box-sizing: border-box;
     padding: 30px 40px;
     -webkit-font-smoothing: antialiased;
 }
 
 .feedback-popup-content h3 {
     color: $primary-color;
     margin: 0 0 20px;
     font-size: 24px;
     font-family: "Helvetica Neue";
     font-weight: 500;
 }
 
 .feedback-popup-content p {
     font-size: 16px;
     margin: 0 0 22px;
 }
 
 .feedback-popup-content b {
     font-weight: 500;
 }
 
 .feedback-popup-content textarea {
     box-shadow: none;
     resize: none;
     margin-bottom: 21px;
     width: 100%;
     min-height: 100px;
 }
 
 .feedback-popup-content label {
     font-size: 13.8px;
     display: block;
     margin-bottom: 23px;
 }
 
 .feedback-popup-content input[type="checkbox"] {
     margin-right: 8px;
 }
 
 .feedback-popup-content .rating-stars {
     color: #fdb72c;
     font-size: 18px;
     font-weight: bold;
 }
 
 .feedback-popup-close .fa-times {
     font-size: 20px;
     color: #777;
     float: right;
     margin: 15px;
     border-radius: 50%;
     cursor: pointer;
 }
 
 .feedback-popup-btn {
     display: inline-block;
     border-radius: 4px;
     cursor: pointer;
     text-decoration: none;
     text-align: center;
     vertical-align: middle;
     white-space: nowrap;
     box-shadow: none;
     font-size: 15px;
     font-weight: 600;
     padding: 14px 25px;
     border: 1px solid $border-color;
     background-color: $primary-color;
     color: #fff;
 
     &:hover {
         border: 1px solid $border-hover-color;
         background-color: $hover-color;
         color: #fff;
     }
 
     .dashicons-external {
         margin-left: 6px;
     }
 }
 
 .feedback-popup-content {
     p {
         font-size: 14px;
     }
     textarea {
         margin-bottom: 10px;
     }
     label {
         font-size: 13px;
         margin-bottom: 15px;
     }
     .components-base-control .components-base-control__field {
         display: flex;
     }
     .error-message {
         color: #f00;
     }
 }
 
 .redux-templates-modal-wrapper.feedback-popup-wrapper {
     height: auto;
 }
 
 .feedback-popup-content {
     label.control-label {
         margin-bottom: 5px;
     }
     .form-group.field {
         margin-bottom: 10px;
     }
     .fixed-control {
         input,
         select {
             width: 100%;
         }
     }
 }
 
 
 .feedback-popup-header {
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     height: 130px;
     width: 100%;
     background-color: #eee;
     border-top-left-radius: 2px;
     border-top-right-radius: 2px;
 
     .header-background {
         width: 75px;
         height: 75px;
     }
     i.header-icon {
         font-size: 50px;
     }
 
     .feedback-popup-close {
         position: absolute;
         top: 5px;
         right: 5px;
     }
 }
 
 .feedback-popup-content {
     .col-wrapper {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
         form {
             width: 100%;
         }
     }
 
 
     .redux-templates-block-preview-hover {
         position: absolute;
         z-index: 9;
         cursor: default;
         height: 100%;
         background: transparent;
         right: 0;
         bottom: 0;
         left: 0;
         top: 0;
     }
     .preview-panel {
         height: 250px;
         overflow-y: auto;
         overflow-x: hidden;
         cursor: default;
         background: #fff;
         position: relative;
         margin: 0 0 0 20px;
         outline: 3px solid transparent;
         -webkit-transition: outline 0.3s ease-in-out;
         transition: outline 0.3s ease-in-out;
         -webkit-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1);
         box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1);
         border-radius: 3px;
     }
 }