md2
Version:
Angular2 based Material Design components, directives and services are Accordion, Autocomplete, Chips(Tags), Collapse, Colorpicker, Data Table, Datepicker, Dialog(Modal), Menu, Multiselect, Select, Tabs, Tags(Chips), Toast and Tooltip.
1 lines • 4.15 kB
Source Map (JSON)
{"version":3,"sources":["tags/tags.scss"],"names":[],"mappings":"AAGA,MACE,QAAS,EACT,YAAa,KACb,oBAAqB,OAGvB,oBACE,SAAU,SACV,QAAS,MACT,UAAW,KACX,QAAS,IAAA,IAAA,IACT,cAAe,IAAI,MAAW,gBAC9B,WAAY,YACZ,UAAW,KACX,WAAY,KACZ,OAAQ,KATV,2BAAA,4BAYI,QAAS,MACT,QAAS,IAbb,2BAiBI,MAAO,KAIX,2BACE,eAAgB,IAChB,cAAe,IAAI,MAhCX,QAmCV,uCACE,MAAY,gBACZ,OAAQ,QAGV,6CACE,eAAgB,IAChB,cAAe,IAAI,MAAW,gBAGhC,SACE,SAAU,SACV,OAAQ,QACR,cAAe,KACf,QAAS,MACT,OAAQ,KACR,YAAa,KACb,OAAQ,IAAA,IAAA,EAAA,EACR,QAAS,EAAA,KAAA,EAAA,KACT,MAAO,KACP,WAAY,WACZ,UAAW,KACX,WAAY,QACZ,MAAO,QACP,YAAa,OACb,SAAU,OACV,cAAe,SAhBjB,gBAmBI,WAhEM,QAiEN,MAAY,sBApBhB,oBAuBM,MAAY,sBAvBlB,aA4BI,SAAU,SACV,IAAK,IACL,MAAO,IACP,OAAQ,QACR,QAAS,aACT,SAAU,OACV,KAAM,aACN,MAAY,gBAIhB,aACE,SAAU,SACV,QAAS,aACT,YAAa,IAGf,MACE,OAAQ,EACR,QAAS,EACT,WAAY,IACZ,OAAQ,KACR,YAAa,KACb,QAAS,EACT,MAAY,gBACZ,WAAY,EAAA,EAGd,sBACE,MAAY,gBAGd,eACE,SAAU,SACV,KAAM,EACN,IAAK,KACL,QAAS,MACT,QAAS,GACT,eAAgB,OAChB,MAAO,KACP,OAAQ,IAAA,EAAA,EACR,QAAS,IAAA,EACT,WAAY,EAAE,IAAI,IAAI,EAAO,cAAK,CAAQ,EAAE,IAAI,IAAI,EAAO,eAAK,CAAS,EAAE,IAAI,IAAK,KAAS,gBAC7F,WAAY,MACZ,WAAY,KACZ,WAAY,KACZ,UAAW,SACX,WAAY,KACZ,oBAAqB,OAhBvB,+BAmBI,OAAQ,QACR,SAAU,SACV,QAAS,MACT,MAAO,QACP,YAAa,OACb,MAAO,KACP,WAAY,WAAA,MAAA,OACZ,QAAS,KAAA,KACT,YAAa,KACb,WAAY,WACZ,UAAU,WA7Bd,uCAAA,qCAiCM,WAAY,KAjClB,oDAqCM,MAAO,KACP,UAAW,KAKjB,WACE,MAAO","file":"tags.css","sourcesContent":["$primary: #106cc8 !default;\n$warn: #f44336 !default;\n\n:host {\n outline: none;\n user-select: none;\n backface-visibility: hidden;\n}\n\n.md2-tags-container {\n position: relative;\n display: block;\n max-width: 100%;\n padding: 2px 2px 4px;\n border-bottom: 1px solid rgba(black, 0.12);\n box-sizing: content-box;\n min-width: 64px;\n min-height: 26px;\n cursor: text;\n\n &::before, &::after {\n display: table;\n content: ' ';\n }\n\n &::after {\n clear: both;\n }\n}\n\n.focus .md2-tags-container {\n padding-bottom: 3px;\n border-bottom: 2px solid $primary;\n}\n\n.md2-tags-disabled .md2-tags-container {\n color: rgba(black, 0.38);\n cursor: default;\n}\n\n.md2-tags-disabled.focus .md2-tags-container {\n padding-bottom: 4px;\n border-bottom: 1px solid rgba(black, 0.38);\n}\n\n.md2-tag {\n position: relative;\n cursor: default;\n border-radius: 16px;\n display: block;\n height: 32px;\n line-height: 32px;\n margin: 4px 4px 0 0;\n padding: 0 26px 0 12px;\n float: left;\n box-sizing: border-box;\n max-width: 100%;\n background: #e0e0e0;\n color: rgb(66, 66, 66);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n\n &.active {\n background: $primary;\n color: rgba(white, 0.87);\n\n svg {\n color: rgba(white, 0.87);\n }\n }\n\n svg {\n position: absolute;\n top: 4px;\n right: 2px;\n cursor: pointer;\n display: inline-block;\n overflow: hidden;\n fill: currentColor;\n color: rgba(black, 0.54);\n }\n}\n\n.md2-tag-add {\n position: relative;\n display: inline-block;\n margin-left: 4px;\n}\n\ninput {\n border: 0;\n outline: 0;\n margin-top: 6px;\n height: 30px;\n line-height: 30px;\n padding: 0;\n color: rgba(black, 0.87);\n background: 0 0;\n}\n\n.md2-tags-placeholder {\n color: rgba(black, 0.38);\n}\n\n.md2-tags-menu {\n position: absolute;\n left: 0;\n top: 100%;\n display: block;\n z-index: 10;\n flex-direction: column;\n width: 100%;\n margin: 6px 0 0;\n padding: 8px 0;\n box-shadow: 0 1px 3px 0 rgba(black, 0.2), 0 1px 1px 0 rgba(black, 0.14), 0 2px 1px -1px rgba(black, 0.12);\n max-height: 256px;\n min-height: 48px;\n overflow-y: auto;\n transform: scale(1);\n background: #fff;\n backface-visibility: hidden;\n\n .md2-tag-option {\n cursor: pointer;\n position: relative;\n display: block;\n color: #212121;\n align-items: center;\n width: auto;\n transition: background 150ms linear;\n padding: 12px 16px;\n line-height: 24px;\n box-sizing: border-box;\n word-wrap:break-word;\n\n &:hover,\n &.focused {\n background: #eeeeee;\n }\n\n .md2-tag-option-text {\n width: auto;\n font-size: 16px;\n }\n }\n}\n\n.highlight {\n color: #757575;\n}\n"]}