Add list of buttons

This commit is contained in:
Jeremy Thomas
2017-10-17 11:53:44 +01:00
parent 1523ce8527
commit 7c94b4e439
5 changed files with 331 additions and 13 deletions

View File

@@ -2475,6 +2475,75 @@ a.box:active {
pointer-events: none;
}
.buttons {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.buttons .button {
margin-bottom: 0.5rem;
}
.buttons .button:not(:last-child) {
margin-right: 0.5rem;
}
.buttons:last-child {
margin-bottom: -0.5rem;
}
.buttons:not(:last-child) {
margin-bottom: 1rem;
}
.buttons.has-addons .button:not(:first-child) {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
.buttons.has-addons .button:not(:last-child) {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
margin-right: -1px;
}
.buttons.has-addons .button:last-child {
margin-right: 0;
}
.buttons.has-addons .button:hover, .buttons.has-addons .button.is-hovered {
z-index: 2;
}
.buttons.has-addons .button:focus, .buttons.has-addons .button.is-focused, .buttons.has-addons .button:active, .buttons.has-addons .button.is-active, .buttons.has-addons .button.is-selected {
z-index: 3;
}
.buttons.has-addons .button:focus:hover, .buttons.has-addons .button.is-focused:hover, .buttons.has-addons .button:active:hover, .buttons.has-addons .button.is-active:hover, .buttons.has-addons .button.is-selected:hover {
z-index: 4;
}
.buttons.is-centered {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.buttons.is-right {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.container {
margin: 0 auto;
position: relative;
@@ -12387,25 +12456,25 @@ html.route-index .hero.is-primary a.column:hover .title strong {
@-webkit-keyframes rainbow {
0% {
background-position: 0% 80%;
background-position: 1% 80%;
}
50% {
background-position: 100% 20%;
background-position: 99% 20%;
}
100% {
background-position: 0% 80%;
background-position: 1% 80%;
}
}
@keyframes rainbow {
0% {
background-position: 0% 80%;
background-position: 1% 80%;
}
50% {
background-position: 100% 20%;
background-position: 99% 20%;
}
100% {
background-position: 0% 80%;
background-position: 1% 80%;
}
}