Commit 4a26a8eb authored by Clarissa Lima Borges's avatar Clarissa Lima Borges Committed by Clarissa Lima Borges
Browse files

buttons: Changes gnome-blue related classes to be default and adds new buttons types

parent 680d7917
......@@ -21,10 +21,11 @@
},
"peerDependencies": {
"autoprefixer": "^9.4.5",
"postcss-nested": "^4.1.1"
"postcss-nested": "^4.1.1",
"postcss": "^7.0.0"
},
"repository": {
"type": "git",
"url": "git@gitlab.gnome.org:Teams/Engagement/websites/general-website-resources.git"
}
}
}
\ No newline at end of file
......@@ -13,7 +13,7 @@
<h2 class="mb-4">Buttons</h2>
<div class="container flex-grow">
<h3 class="py-2">Default</h3>
<button class="btn gnome-blue mr-2 my-2">GNOME Blue</button>
<button class="btn mr-2 my-2">GNOME Blue</button>
<button class="btn red mr-2 my-2">Red</button>
<button class="btn orange mr-2 my-2">Orange</button>
<button class="btn yellow mr-2 my-2">Yellow</button>
......@@ -21,7 +21,7 @@
</div>
<div class="container flex-grow">
<h3 class="py-2">Outline</h3>
<button class="btn outline-gnome-blue mr-2 my-2">GNOME Blue</button>
<button class="btn outline mr-2 my-2">GNOME Blue</button>
<button class="btn outline-red mr-2 my-2">Red</button>
<button class="btn outline-orange mr-2 my-2">Orange</button>
<button class="btn outline-yellow mr-2 my-2">Yellow</button>
......@@ -29,7 +29,7 @@
</div>
<div class="container flex-grow">
<h3 class="py-2">Squared</h3>
<button class="btn gnome-blue squared mr-2 my-2">GNOME Blue</button>
<button class="btn squared mr-2 my-2">GNOME Blue</button>
<button class="btn red squared mr-2 my-2">Red</button>
<button class="btn outline-orange squared mr-2 my-2">Orange</button>
<button class="btn outline-yellow squared mr-2 my-2">Yellow</button>
......@@ -37,19 +37,47 @@
</div>
<div class="container flex-grow">
<h3 class="py-2">Other sizes</h3>
<button class="btn gnome-blue small mr-2 my-2">Small</button>
<button class="btn small mr-2 my-2">Small</button>
<button class="btn red small mr-2 my-2">Small</button>
<button class="btn outline-orange small squared mr-2 my-2">Small</button>
<button class="btn outline-yellow small squared mr-2 my-2">Small</button>
<button class="btn outline-green small mr-2 my-2">Small</button>
</div>
<div class="container flex-grow">
<button class="btn gnome-blue large mr-2 my-2">Large</button>
<button class="btn large mr-2 my-2">Large</button>
<button class="btn red large mr-2 my-2">Large</button>
<button class="btn outline-orange large squared mr-2 my-2">Large</button>
<button class="btn outline-yellow large squared mr-2 my-2">Large</button>
<button class="btn outline-green large mr-2 my-2">Large</button>
</div>
<div class="container flex-grow">
<h3 class="py-2">Disabled</h3>
<button class="btn disabled small mr-2 my-2">Disabled</button>
<button class="btn disabled small mr-2 my-2">Disabled</button>
<button class="btn disabled squared mr-2 my-2">Disabled</button>
<button class="btn disabled large squared mr-2 my-2">Disabled</button>
<button class="btn disabled large mr-2 my-2">Disabled</button>
</div>
<div class="container flex-grow">
<h3 class="py-2">Links & text</h3>
<button class="link mr-2 my-2">Link</button>
<button class="link gnome-blue mr-2 my-2">Link</button>
<button class="link red mr-2 my-2">Link</button>
<button class="link orange mr-2 my-2">Link</button>
<button class="link yellow mr-2 my-2">Link</button>
<button class="link green mr-2 my-2">Link</button>
<button class="link white mr-2 my-2">Link</button>
</div>
<div class="container flex-grow">
<h3 class="py-2">Customized width</h3>
<div class="flex-col w-64 mx-auto">
<button class="btn mr-2 my-2 w-full">GNOME Blue</button>
<button class="btn red mr-2 my-2 w-full">Red</button>
<button class="btn orange mr-2 my-2 w-full">Orange</button>
<button class="btn yellow mr-2 my-2 w-full">Yellow</button>
<button class="btn green my-2 w-full">Green</button>
</div>
</div>
</div>
</body>
......
.btn {
@apply px-4 py-2 border-solid border-3 border-transparent shadow font-semibold text-white rounded-md transition duration-200 ease-in-out;
background-color: theme('colors.gnome-blue.500');
&:hover {
&:hover,
&:focus {
@apply shadow-lg;
}
......@@ -9,20 +11,18 @@
@apply shadow-xs;
}
&.gnome-blue {
background-color: theme('colors.gnome-blue.500');
&:hover,
&:active {
&:hover,
&:active,
&:focus {
background-color: theme('colors.gnome-blue.300');
}
}
&.red {
background-color: theme('colors.red.500');
&:hover,
&:active {
&:active,
&:focus {
background-color: theme('colors.red.300');
}
}
......@@ -31,7 +31,8 @@
background-color: theme('colors.orange.500');
&:hover,
&:active {
&:active,
&:focus {
background-color: theme('colors.orange.300');
}
}
......@@ -40,7 +41,8 @@
background-color: theme('colors.yellow.500');
&:hover,
&:active {
&:active,
&:focus {
background-color: theme('colors.yellow.300');
}
}
......@@ -49,17 +51,19 @@
background-color: theme('colors.green.500');
&:hover,
&:active {
&:active,
&:focus {
background-color: theme('colors.green.300');
}
}
&.outline-gnome-blue {
&.outline {
background-color: theme('colors.transparent');
@apply border-gnome-blue-500 text-gnome-blue-500;
&:hover,
&:active {
&:active,
&:focus {
@apply text-white;
background-color: theme('colors.gnome-blue.500');
}
......@@ -70,7 +74,8 @@
@apply border-red-500 text-red-500;
&:hover,
&:active {
&:active,
&:focus {
@apply text-white;
background-color: theme('colors.red.500');
}
......@@ -81,7 +86,8 @@
@apply border-orange-500 text-orange-500;
&:hover,
&:active {
&:active,
&:focus {
@apply text-white;
background-color: theme('colors.orange.500');
}
......@@ -92,7 +98,8 @@
@apply border-yellow-500 text-yellow-500;
&:hover,
&:active {
&:active,
&:focus {
@apply text-white;
background-color: theme('colors.yellow.500');
}
......@@ -103,7 +110,8 @@
@apply border-green-500 text-green-500;
&:hover,
&:active {
&:active,
&:focus {
@apply text-white;
background-color: theme('colors.green.500');
}
......@@ -120,4 +128,86 @@
&.large {
@apply px-6 py-3 text-xl;
}
&.disabled {
background-color: theme('colors.gray.200');
@apply text-gray-800 shadow-none cursor-not-allowed;
&:hover,
&:active,
&:focus {
@apply shadow-none;
}
}
}
.link {
background-color: theme('colors.transparent');
@apply px-1 font-semibold border-solid border-3 border-transparent;
&:hover,
&:active,
&:focus {
border-bottom: 3px solid theme('colors.black');
}
&.gnome-blue {
@apply text-gnome-blue-500;
&:hover,
&:active,
&:focus {
border-bottom: 3px solid theme('colors.gnome-blue.500');
}
}
&.red {
@apply text-red-500;
&:hover,
&:active,
&:focus {
border-bottom: 3px solid theme('colors.red.500');
}
}
&.orange {
@apply text-orange-500;
&:hover,
&:active,
&:focus {
border-bottom: 3px solid theme('colors.orange.500');
}
}
&.yellow {
@apply text-yellow-500;
&:hover,
&:active,
&:focus {
border-bottom: 3px solid theme('colors.yellow.500');
}
}
&.green {
@apply text-green-500;
&:hover,
&:active,
&:focus {
border-bottom: 3px solid theme('colors.green.500');
}
}
&.white {
@apply text-white;
&:hover,
&:active,
&:focus {
border-bottom: 3px solid theme('colors.white');
}
}
}
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment