app.css (1661B)
1 @tailwind base; 2 @tailwind components; 3 @tailwind utilities; 4 5 /* Adding CSS classes should be done with consideration and rarely */ 6 .extendify-sdk *, .extendify-sdk *:after, .extendify-sdk *:before { 7 box-sizing: border-box; 8 border: 0 solid #e5e7eb; 9 } 10 .extendify-sdk .button-focus { 11 @apply focus:ring-2 focus:ring-wp-theme-500 ring-offset-1 outline-none; 12 } 13 .extendify-sdk .button-focus-big-green { 14 @apply focus:ring-4 focus:ring-offset-4 focus:ring-extendify-main outline-none; 15 } 16 .extendify-sdk select.button-focus, 17 .extendify-sdk input.button-focus { 18 @apply focus:border-transparent focus:outline-none; 19 } 20 21 .button-extendify-main { 22 @apply bg-extendify-main button-focus cursor-pointer transition duration-200 p-1.5 px-3 text-white hover:text-white no-underline hover:bg-gray-900 active:bg-gray-900 active:text-white focus:text-white whitespace-nowrap; 23 } 24 #extendify-search-input:focus ~ svg, 25 #extendify-search-input:not(:placeholder-shown) ~ svg { 26 @apply hidden; 27 } 28 #extendify-search-input::-webkit-textfield-decoration-container { 29 @apply mr-3; 30 } 31 32 /* WP tweaks and overrides */ 33 .extendify-sdk .components-panel__body > .components-panel__body-title { 34 /* Override WP aggressive boder:none and border:0 */ 35 border-bottom: 1px solid #e0e0e0 !important; 36 @apply bg-transparent; 37 } 38 .extendify-sdk .components-modal__header { 39 @apply border-b border-gray-300; 40 } 41 42 /* Special input animation */ 43 .extendify-special-input:placeholder-shown ~ label { 44 @apply top-1.5; 45 @apply text-sm; 46 @apply text-gray-600; 47 } 48 .extendify-special-input:focus ~ label { 49 @apply -top-4; 50 @apply text-xs; 51 @apply text-extendify-main; 52 }