.create-shortcut-dialog { @apply px-4; > .dialog-container { @apply w-128 max-w-full; > .dialog-content-container { @apply flex flex-col justify-start items-start; > .form-item-container { @apply w-full mt-2 py-1 flex flex-row justify-start items-start; > .normal-text { @apply block flex-shrink-0 w-12 mr-3 text-right text-sm leading-8; color: gray; } > .title-input { @apply w-full py-1 px-2 h-9 text-sm rounded border shadow-inner; } > .filters-wrapper { @apply w-full flex flex-col justify-start items-start; > .create-filter-btn { @apply text-sm py-1 px-2 rounded shadow flex flex-row justify-start items-center border cursor-pointer text-blue-500 hover:opacity-80; } } } } > .dialog-footer-container { @apply w-full mt-0 flex flex-row justify-between items-center; > .btns-container { @apply flex flex-row justify-start items-center; > .tip-text { @apply text-sm text-gray-400 mr-2; } > .btn { @apply text-base px-4 py-1 leading-7 rounded shadow hover:opacity-80; &.save-btn { @apply bg-green-600 text-white; &.requesting { @apply cursor-wait opacity-80; } } } } } } } .memo-filter-input-wrapper { @apply w-full mb-3 shrink-0 flex flex-row justify-start items-center; > .selector-wrapper { @apply mr-1 h-9 grow-0 shrink-0; &.relation-selector { @apply w-16; margin-left: -68px; } &.type-selector { @apply w-24; } &.operator-selector { @apply w-20; } &.value-selector { @apply grow; } } > input.value-inputer { max-width: calc(100% - 152px); @apply h-9 px-2 shrink-0 grow mr-1 text-sm rounded border bg-transparent hover:bg-gray-50; } > input.datetime-selector { max-width: calc(100% - 152px); @apply h-9 px-2 shrink-0 grow mr-1 text-sm rounded border bg-transparent hover:bg-gray-50; } > .remove-btn { @apply w-4 h-auto ml-1 cursor-pointer opacity-60 hover:opacity-80; } }