В моём проекте добавился небольшой playground, в котором можно кастомизировать внешний компонент, подгружаемый от нас через внешний script src + те самые стили.
Я написал на sass (компилировал через gulp) когда их писал. Сейчас я отдаю их юзеру от сервера jsonом. Кода немного поэтому я для небольшой экономии времени (сроки итп) написал требуемый формат чуть подредактировав минификацию css через online tools.
"value": ".at-360-popup {\r\n\twidth: 353px;\r\n\tbackground-color: #fff;\r\n\tborder: 1px solid #e2e2e2;\r\n\tdisplay: flex;\r\n\tflex-direction: column\r\n}\r\n.at-360-popup__content {\r\n\tdisplay: flex;\r\n\tjustify-content:space-between\r\n}\r\n.at-360-popup__column {\r\n\tdisplay: flex;\r\n\tflex-direction: column\r\n}\r\n.at-360-popup__column--mr-25 {\r\n\tmargin-right: 25px\t\n}\r\n.at-360-popup__column--start-x {\r\n\talign-items: flex-start\r\n}\r\n.at-360-popup__phone {\r\n\tfont-size: 30px;\r\n\tcolor: #363636;\r\n\ttext-transform: uppercase;\r\n\tfont-weight: 500;\r\n\tmargin-bottom: 9px\r\n}\r\n.at-360-popup__section {\r\n\tpadding: 24px;\r\n\torder: 2\r\n}\r\n.at-360-popup__section--times {\r\n\torder: 1;\r\n\tborder-bottom: 1px solid #e2e2e2\r\n}\r\n.at-360-popup__btn {\r\n\tborder: 1px solid #b9b9b9;\r\n\tborder-radius: 2px;\r\n\twidth: 43px;\r\n\theight: 44px;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: center\r\n}\r\n.at-360-popup__btn svg {\r\n\twidth: 60%;\r\n\theight: 60%\r\n}\r\n.at-360-popup__btn svg path {\r\n\tfill: #b9b9b9\r\n}\r\n.at-360-popup__time {\r\n\tdisplay: flex;\r\n\tfont-size:14px;\r\n\tfont-weight:300;\r\n\tcolor: #757575;\r\n\tmargin-right: 8px\r\n}\r\n.at-360-popup__weektime {\r\n\tmargin-right: 8px\r\n}\r\n.at-360-popup__address {\r\n\tcolor: #757575;\r\n\tfont-size: 16px;\r\n\tfont-weight: 300\n\r\t}\r\n.at-360-popup__spoiler {\r\n\tfont-size: 13px;\r\n\tfont-weight:300\r\n}\r\n.at-360-popup__spoiler--opened .at-360-popup__sp-content {\r\n\tdisplay: flex\r\n}\r\n.at-360-popup__sp-toggler {\r\n\tcursor: pointer;\r\n\tdisplay: inline-flex;\r\n\tmargin-bottom: 6px;\r\n\tcolor: #24b861;\r\n\tposition: relative\r\n}\r\n.at-360-popup__sp-toggler:after {\r\n\tcontent: '';\r\n\twidth: 8px;\r\n\theight: 8px;\r\n\tposition: absolute;\r\n\tright: -15px;\r\n\tbottom: 3px;\r\n\ttop: 0;\r\n\ttransform: rotate(135deg);\r\n\tmargin: auto;\r\n\tborder-right: 1px solid #24b861;\r\n\tborder-top: 1px solid #24b861\r\n}\r\n.at-360-popup__sp-content {\r\n\tpadding-bottom:6px;\r\n\tdisplay:none\r\n}\r\n.at-360-popup__footer {\r\n\torder: 3;\r\n\twidth:calc(100% + 2px);\r\n\tpadding: 8px;\r\n\tmargin-left: -1px;\r\n\tmargin-right: -1px;\r\n\tmargin-bottom: -1px;\r\n\tbackground-color: #24b861;\r\n\tcolor: #fefefe;\r\n\tfont-size: 10px;\r\n\tfont-weight: 500;\r\n\ttext-decoration: underline;\r\n\ttext-transform: uppercase;\r\n\ttext-align: center;\r\n\tcursor:default\r\n}"
Помимо минификации пришлось расставить символы табуляции чтоб в кодовом редакторе всё это имело редактируемый вид. В этом основная загвоздка, я смотрел апи minity uglify и не нашёл подобных usecase
Простой
Средний
Простой
