opdavies/rebuilding-uis
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Extract more CSS components

Browse source
This commit is contained in:
Oliver Davies 2019-03-21 18:01:56 +00:00
parent 895adaa35c
commit 728a4a4f39
2 changed files with 38 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/components/Environment/ActionCards.vue
View file

@ -12,13 +12,13 @@
<svg slot="icon" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__code"></use></svg> <svg slot="icon" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__code"></use></svg>
<ul slot="buttons" class="button-list"> <ul slot="buttons" class="button-list">
<li class="button-list-item"> <li>
<action-card-button label="Deploy"> <action-card-button label="Deploy">
<svg role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__fork"></use></svg> <svg role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__fork"></use></svg>
</action-card-button> </action-card-button>
</li> </li>
<li class="button-list-item"> <li>
<action-card-button label="Switch"> <action-card-button label="Switch">
<svg role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__switch"></use></svg> <svg role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__switch"></use></svg>
</action-card-button> </action-card-button>
@ -32,19 +32,19 @@
<svg slot="icon" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__database"></use></svg> <svg slot="icon" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__database"></use></svg>
<ul slot="buttons" class="button-list"> <ul slot="buttons" class="button-list">
<li class="button-list-item"> <li>
<action-card-button label="Copy"> <action-card-button label="Copy">
<svg role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__copy"></use></svg> <svg role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__copy"></use></svg>
</action-card-button> </action-card-button>
</li> </li>
<li class="button-list-item"> <li>
<action-card-button label="Back up"> <action-card-button label="Back up">
<svg role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__backup"></use></svg> <svg role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__backup"></use></svg>
</action-card-button> </action-card-button>
</li> </li>
<li class="button-list-item"> <li>
<action-card-button label="Restore" :disabled="isProduction" :class="{ <action-card-button label="Restore" :disabled="isProduction" :class="{
'text-blue-300': !isProduction, 'text-blue-300': !isProduction,
'text-grey-500 cursor-not-allowed': isProduction 'text-grey-500 cursor-not-allowed': isProduction
@ -61,7 +61,7 @@
<svg slot="icon" class="h-8 w-8 fill-current text-teal" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__environment"></use></svg> <svg slot="icon" class="h-8 w-8 fill-current text-teal" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__environment"></use></svg>
<ul slot="buttons" class="button-list"> <ul slot="buttons" class="button-list">
<li class="button-list-item"> <li>
<action-card-button label="Copy"> <action-card-button label="Copy">
<svg role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__copy"></use></svg> <svg role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__copy"></use></svg>
</action-card-button> </action-card-button>
@ -110,7 +110,7 @@ export default {
@apply flex -ml-px @apply flex -ml-px
} }
.button-list-item { .button-list > li {
@apply w-1/2 flex-1 text-center border-l border-grey-400 @apply w-1/2 flex-1 text-center border-l border-grey-400
} }
</style> </style>

40
src/components/Environment/EnvironmentCards.vue
View file

@ -21,25 +21,25 @@
</div> </div>
<div> <div>
<button type="button" class="flex items-center justify-between text-white pl-1 bg-blue-200 hover:bg-blue-400 focus:bg-blue-400 focus:outline-none focus:underline text-sm w-full text-left py-1"> <button type="button" class="card-button py-1">
<svg class="h-6 w-5 text-white mr-2 fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__grip-handle"></use></svg> <svg role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__grip-handle"></use></svg>
<span class="flex-1">Code</span> <span class="flex-1">Code</span>
<span class="border-l border-grey-400 p-2"> <span class="border-l border-grey-400 p-2">
<svg class="h-6 w-6 text-white fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__switch"></use></svg> <svg role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__switch"></use></svg>
</span> </span>
</button> </button>
<button type="button" class="flex items-center justify-between text-white pl-1 bg-blue-200 hover:bg-blue-400 focus:bg-blue-400 focus:outline-none focus:underline text-sm w-full text-left py-1 border-t border-grey-400"> <button type="button" class="card-button py-1 border-t border-grey-400">
<svg class="h-6 w-5 text-white mr-2 fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__grip-handle"></use></svg> <svg role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__grip-handle"></use></svg>
<span class="flex-1">Databases</span> <span class="flex-1">Databases</span>
<span class="border-l border-grey-400 p-2"> <span class="border-l border-grey-400 p-2">
<svg class="h-6 w-6 text-white fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__backup"></use></svg> <svg role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__backup"></use></svg>
</span> </span>
</button> </button>
<button type="button" class="flex items-center text-white bg-blue-200 hover:bg-blue-400 focus:bg-blue-400 focus:outline-none focus:underline px-1 py-3 text-sm w-full text-left py-1 border-t border-grey-400"> <button type="button" class="card-button border-t border-grey-400 py-3 block">
<svg class="h-6 w-5 text-white mr-2 fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__grip-handle"></use></svg> <svg role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__grip-handle"></use></svg>
Files <span class="flex-1">Files</span>
</button> </button>
</div> </div>
</div> </div>
@ -56,3 +56,25 @@ export default {
}, },
} }
</script> </script>
<style type="postcss" scoped>
.card-button {
@apply flex items-center justify-between text-white pl-1 bg-blue-200 text-sm w-full text-left;
&:hover {
@apply bg-blue-400
}
&:focus {
@apply bg-blue-400 outline-none underline
}
}
.card-button > svg {
@apply h-6 w-5 text-white mr-2 fill-current
}
.card-button span svg {
@apply h-6 w-6 text-white fill-current
}
</style>