react-help-desk-tailwindcss-ts/dist/style.css

Help desk component for React with Tailwindcss in TypeScript

.help-desk{position:relative}.help-desk button{cursor:pointer}.help-desk .help-desk__menu{position:fixed;z-index:10000;top:50%;right:0;transform:translateY(-50%);margin:0;padding:10px 15px;box-shadow:0 5px 16px #00000059;border:none;border-radius:3px 0 0 3px;outline:none;background:#3a6449;list-style:none;color:#fff;transition:all .4s cubic-bezier(.55,0,.1,1)}.help-desk .help-desk__content{position:fixed;z-index:9999;top:0;bottom:0;right:-100vw;width:100vw;background:#e9e9e9;transition:all .4s cubic-bezier(.55,0,.1,1)}@media (min-width: 450px){.help-desk .help-desk__content{right:-450px;width:450px}}.help-desk .help-desk__content>div{display:flex;flex-direction:column;height:100%}.help-desk .help-desk__content .help-desk__header{position:relative;padding:0 25px;background:#3a6449;box-shadow:0 1px 1px #0000001a;text-align:center;color:#fff}.help-desk .help-desk__content .help-desk__header h1{margin:0;font-size:16px;line-height:48px}.help-desk .help-desk__content .help-desk__label{font-weight:400;text-transform:uppercase;color:#aaa}.help-desk .help-desk__content .help-desk__input{width:100%;padding:14px 60px 14px 14px;border:none;outline:none;border-radius:3px;background:#fff;font:inherit;font-size:16px;line-height:1.4;transition:box-shadow .25s cubic-bezier(.55,0,.1,1)}.help-desk .help-desk__content .help-desk__input:focus{box-shadow:0 4px 10px #0000001a}.help-desk .help-desk__widgets .help-desk__widget:hover .box,.help-desk .help-desk__widgets .help-desk__widget:focus .box{transform:translateY(-4px);box-shadow:0 4px 10px #0000001a;background:#3a6449;color:#fff}.help-desk .help-desk__widgets .help-desk__widget .box{display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:3px;box-shadow:0 1px 1px #0000001a;background:#fff;color:#333;transition:all .25s cubic-bezier(.55,0,.1,1)}.help-desk .help-desk__widgets .help-desk__widget>p{margin-top:10px;font-size:12px;color:#595c5f}.help-desk.help-desk--expanded .help-desk__menu{transform:translate(-100vw) translateY(-50%);box-shadow:-6px 0 15px #00000026}.help-desk.help-desk--expanded .help-desk__content{transform:translate(-100vw)}@media (min-width: 450px){.help-desk.help-desk--expanded .help-desk__menu{transform:translate(450px) translateY(-50%);box-shadow:-6px 0 15px #00000026}.help-desk.help-desk--expanded .help-desk__content{transform:translate(-450px);box-shadow:-3px 0 15px #00000040}}.help-desk__back,.help-desk__close{display:flex;align-items:center;opacity:.6;position:absolute;top:0;height:48px;padding:0 25px;border:none;outline:none;background:none;font-size:32px;transition:opacity .2s}.help-desk__back svg,.help-desk__close svg{position:relative;top:-2px;width:14px;height:14px;fill:#fff}.help-desk__back:hover,.help-desk__back:focus,.help-desk__close:hover,.help-desk__close:focus{opacity:1}.help-desk__back{left:0}.help-desk__close{right:0}.help-desk__faq{display:flex;flex-direction:column;height:100%}.help-desk__search,.help-desk__faq-content{padding:25px}.help-desk__search label{display:none}.help-desk__faq-content{flex:1;overflow:hidden;background:#fff}.help-desk__faq-content.scrollable{overflow:auto}.help-desk__category,.help-desk__category-title,.help-desk__article-title{display:block;margin-bottom:20px;font-size:16px;color:inherit}.help-desk__category svg,.help-desk__category-title svg,.help-desk__article-title svg{width:10px;height:10px;margin-right:8px;fill:#333}.help-desk__category-title{color:inherit;cursor:pointer}.help-desk__category-title:hover,.help-desk__category-title:focus{text-decoration:none;color:#3a6449}.help-desk__article-title{text-decoration:underline;cursor:pointer}.help-desk__category>.help-desk__faq-items{display:none;margin-left:30px}.help-desk__category.expanded>.help-desk__category-title{font-weight:700}.help-desk__category.expanded>.help-desk__faq-items{display:block}.help-desk__article{position:absolute;overflow:auto;top:48px;left:25px;right:0;bottom:0;padding:25px;box-shadow:-4px 0 4px #0000000d;background:#f9f9f9;font-size:16px;line-height:1.6;animation:.2s ease-in-out helpDeskSlideIn;animation-fill-mode:forwards}.help-desk__article.exiting{animation:.2s ease-in-out helpDeskSlideOut}.help-desk__article h4{margin:0 0 20px;padding-right:35px;font-size:26px}.help-desk__article img,.help-desk__article iframe{width:100%}.help-desk__thumb-ratings{position:relative;margin:40px 0 25px;text-align:center}.help-desk__thumb-ratings.selected .help-desk__thumb-rating:not(.selected){opacity:.4;pointer-events:none}.help-desk__thumb-ratings .help-desk__thanks{position:absolute;top:-30px;left:50%;transform:translate(-50%);font-size:16px;color:#999}.help-desk__thumb-rating{width:48px;height:48px;margin-right:18px;padding:10px;border:3px solid #AAA;border-radius:50%;background:none;color:#aaa;transition:all .2s ease-in-out}.help-desk__thumb-rating:last-child{margin-right:0}.help-desk__thumb-rating.help-desk__thumb-rating--up{border-color:#39c5a5;color:#39c5a5}.help-desk__thumb-rating.help-desk__thumb-rating--up:hover,.help-desk__thumb-rating.help-desk__thumb-rating--up:focus,.help-desk__thumb-rating.help-desk__thumb-rating--up.selected{background:#39c5a5;color:#fff}.help-desk__thumb-rating.help-desk__thumb-rating--up svg{position:relative;top:-2px}.help-desk__thumb-rating.help-desk__thumb-rating--down{border-color:#ff7c7c;color:#ff7c7c}.help-desk__thumb-rating.help-desk__thumb-rating--down:hover,.help-desk__thumb-rating.help-desk__thumb-rating--down:focus,.help-desk__thumb-rating.help-desk__thumb-rating--down.selected{background:#ff7c7c;color:#fff}.help-desk__thumb-rating svg{width:24px;height:24px}.help-desk__empty-state{padding:30px 0;text-align:center}@keyframes helpDeskSlideIn{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes helpDeskSlideOut{0%{transform:translate(0)}to{transform:translate(100%)}}.help-desk__tutorials{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;overflow:auto;max-height:100%;padding:25px}.help-desk__tutorials-help{margin:0 25px 25px;font-size:1rem;text-align:center;color:#555}.help-desk__tutorial:hover .help-desk__tutorial-play,.help-desk__tutorial:focus .help-desk__tutorial-play{opacity:1}.help-desk__tutorial img{width:100%}.help-desk__tutorial p{flex:1;display:flex;align-items:center;margin:0}.help-desk__tutorial-thumbnail{position:relative;margin-bottom:8px}.help-desk__tutorial-play{opacity:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:30%;padding:8px;border-radius:50%;background:#0003;transition:opacity .15s ease-in-out;fill:#fff;stroke:transparent}.help-desk__tutorial-play polygon{transform:translate(8%)}