|
@@ -0,0 +1,180 @@
|
|
|
+.sub-collection.tags-box {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ min-height: 340px;
|
|
|
+ max-height: 360px;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ width: 332px;
|
|
|
+ padding: 20px 16px;
|
|
|
+ background: #ffffff;
|
|
|
+ border: 1px solid #ececec;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 8px;
|
|
|
+ box-shadow: 0px 0px 28px 0px rgba(0, 0, 0, 0.08);
|
|
|
+ z-index: 99;
|
|
|
+ .tags-list {
|
|
|
+ .tags-item {
|
|
|
+ float: left;
|
|
|
+ min-width: 44px;
|
|
|
+ padding: 0 8px;
|
|
|
+ margin: 10px 8px 0 0;
|
|
|
+ height: 24px;
|
|
|
+ line-height: 24px;
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid #ececec;
|
|
|
+ box-sizing: border-box;
|
|
|
+ color: #1d1d1d;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 14px;
|
|
|
+ background: #f5f6f7;
|
|
|
+ cursor: pointer;
|
|
|
+ &.tags-active{
|
|
|
+ padding: 0 8px 0 24px !important;
|
|
|
+ background: #2cb7ca
|
|
|
+ url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADPSURBVHgB7ZNREcIwDIYjYRImYRLmZHPAHAwHlUAdIAEJSKiESgjpEY7Qg7uFdXnKd5eXdMmfpX8BHMdxDEDEgSJQ9GANiU4UGZ9cwBISXPFNGWIAKyrxZLr+suq/xdkwV4oFlFBNR3ET4veS0zaJosGoqOtZ8EVUi4tGWbM+rklC/Ax7KH++dY18ZbmZuGi8iKbhxzdTJT5DSyo/LNXZSZxljV80A3T4aayR86vIJTzyjX8xZTATF0NIU24y5xFDSFNGU3ExxNzsmTmO4zAPYEiZdz83IV0AAAAASUVORK5CYII=)
|
|
|
+ no-repeat 6px center !important;
|
|
|
+ color: #fff !important;
|
|
|
+ background-size: 16px !important;
|
|
|
+ border: 0 !important;
|
|
|
+ }
|
|
|
+ &.disabled {
|
|
|
+ color: #8e8e8e !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tags-inputs .tag-input::-webkit-scrollbar {
|
|
|
+ width: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tags-inputs .tag-input::-webkit-scrollbar-thumb {
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: #ececec;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tags-list::-webkit-scrollbar {
|
|
|
+ width: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tags-list::-webkit-scrollbar-thumb {
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: #ececec;
|
|
|
+ }
|
|
|
+ .tag-close {
|
|
|
+ display: inline-block;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ margin-left: 8px;
|
|
|
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEwSURBVHgB7ZWxDYMwEEXPER1NRmEFJggUiJpJQiahRhSECViBUdzQIYgdgYQIPnwXmkT+DcbY/s9n3wHg5PTPKoriejRGYB+rqrpP0xT1fR9mWSaBaO77fiuEeCZJ8gAqwGyez68dBWIxV83gbSJEboK47HXWda1DF626Ar2gTUi35lo6iqbxuwBxHEvP80JF3lEg9sxhjp5pDnoHdCSGYWjVDj4W3B4HZo4dHQpgC8E1twI4gtANrrk1AAYxP1nmJAAEArjmZIADiI5TsC5AlJRS5zWcJVIEDLd9LXIUrCNgSjVqsWIBYHnOqZhrHR6BTZGhVEwSAKXCcSHEGebfQBjvAKe8cv6iRgC1i4ZijkHotUxz0TtQlmWuFrpxKtxyHOM4Nmma5sAVJaednH5SLxmyS6JIrGjkAAAAAElFTkSuQmCC);
|
|
|
+ background-position: center 2px;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: contain;
|
|
|
+ }
|
|
|
+ .tags-inputs {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .tag-input {
|
|
|
+ width: 100%;
|
|
|
+ padding: 0;
|
|
|
+ min-height: 34px;
|
|
|
+ max-height: 74px;
|
|
|
+ overflow-y: scroll;
|
|
|
+ display: inline-block;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: #fff;
|
|
|
+ cursor: text;
|
|
|
+ text-align: left;
|
|
|
+
|
|
|
+ .tag-labels {
|
|
|
+ display: inline;
|
|
|
+ vertical-align: middle;
|
|
|
+
|
|
|
+ .tag-label {
|
|
|
+ display: inline-block;
|
|
|
+ padding: 5px 12px;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 1.2;
|
|
|
+ margin: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+ border: 1px solid #ececec;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 4px;
|
|
|
+ background: #f5f6f7;
|
|
|
+ color: #1d1d1d;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .clear-input {
|
|
|
+ display: inline-block;
|
|
|
+ padding: 0 10px;
|
|
|
+ width: 160px;
|
|
|
+ height: 36px;
|
|
|
+ line-height: 1;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 2px;
|
|
|
+ vertical-align: middle;
|
|
|
+ border: none;
|
|
|
+ background-color: transparent;
|
|
|
+ box-shadow: none;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #1d1d1d;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tags-list {
|
|
|
+ margin-top: 12px;
|
|
|
+ overflow-y: auto;
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .add-tag-button {
|
|
|
+ margin-left: 16px;
|
|
|
+ color: #2cb7ca;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ white-space: nowrap;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tags-footer {
|
|
|
+ margin-top: 20px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tags-button {
|
|
|
+ padding: 3px 17px;
|
|
|
+ color: #1d1d1d;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid #e0e0e0;
|
|
|
+ text-shadow: 0px 0px 28px 0px rgba(0, 0, 0, 0.08);
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .button-confirm {
|
|
|
+ margin-right: 16px;
|
|
|
+ color: #fff;
|
|
|
+ background: #2cb7ca;
|
|
|
+ border-color: #2cb7ca;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tag-placeholder {
|
|
|
+ position: absolute;
|
|
|
+ top: 12px;
|
|
|
+ left: 16px;
|
|
|
+ color: #bbb;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+}
|