Fix media object

This commit is contained in:
Jeremy Thomas
2016-10-30 17:35:39 +00:00
parent 36822ed3fb
commit 4a40ad0059
12 changed files with 198 additions and 434 deletions

View File

@@ -662,7 +662,7 @@ a.box:active {
.button:focus, .button.is-focused {
border-color: #00d1b2;
box-shadow: 0 0 0.5em rgba(0, 209, 178, 0.5);
box-shadow: 0 0 0.5em rgba(0, 209, 178, 0.25);
color: #363636;
}
@@ -698,7 +698,7 @@ a.box:active {
.button.is-white:focus, .button.is-white.is-focused {
border-color: transparent;
box-shadow: 0 0 0.5em rgba(255, 255, 255, 0.5);
box-shadow: 0 0 0.5em rgba(255, 255, 255, 0.25);
color: #0a0a0a;
}
@@ -749,7 +749,7 @@ a.box:active {
.button.is-black:focus, .button.is-black.is-focused {
border-color: transparent;
box-shadow: 0 0 0.5em rgba(10, 10, 10, 0.5);
box-shadow: 0 0 0.5em rgba(10, 10, 10, 0.25);
color: white;
}
@@ -800,7 +800,7 @@ a.box:active {
.button.is-light:focus, .button.is-light.is-focused {
border-color: transparent;
box-shadow: 0 0 0.5em rgba(245, 245, 245, 0.5);
box-shadow: 0 0 0.5em rgba(245, 245, 245, 0.25);
color: #363636;
}
@@ -851,7 +851,7 @@ a.box:active {
.button.is-dark:focus, .button.is-dark.is-focused {
border-color: transparent;
box-shadow: 0 0 0.5em rgba(54, 54, 54, 0.5);
box-shadow: 0 0 0.5em rgba(54, 54, 54, 0.25);
color: whitesmoke;
}
@@ -902,7 +902,7 @@ a.box:active {
.button.is-primary:focus, .button.is-primary.is-focused {
border-color: transparent;
box-shadow: 0 0 0.5em rgba(0, 209, 178, 0.5);
box-shadow: 0 0 0.5em rgba(0, 209, 178, 0.25);
color: #fff;
}
@@ -953,7 +953,7 @@ a.box:active {
.button.is-info:focus, .button.is-info.is-focused {
border-color: transparent;
box-shadow: 0 0 0.5em rgba(50, 115, 220, 0.5);
box-shadow: 0 0 0.5em rgba(50, 115, 220, 0.25);
color: #fff;
}
@@ -1004,7 +1004,7 @@ a.box:active {
.button.is-success:focus, .button.is-success.is-focused {
border-color: transparent;
box-shadow: 0 0 0.5em rgba(35, 209, 96, 0.5);
box-shadow: 0 0 0.5em rgba(35, 209, 96, 0.25);
color: #fff;
}
@@ -1055,7 +1055,7 @@ a.box:active {
.button.is-warning:focus, .button.is-warning.is-focused {
border-color: transparent;
box-shadow: 0 0 0.5em rgba(255, 221, 87, 0.5);
box-shadow: 0 0 0.5em rgba(255, 221, 87, 0.25);
color: rgba(0, 0, 0, 0.7);
}
@@ -1106,7 +1106,7 @@ a.box:active {
.button.is-danger:focus, .button.is-danger.is-focused {
border-color: transparent;
box-shadow: 0 0 0.5em rgba(255, 56, 96, 0.5);
box-shadow: 0 0 0.5em rgba(255, 56, 96, 0.25);
color: #fff;
}
@@ -2592,7 +2592,7 @@ a.box:active {
}
.subtitle + .title {
margin-top: -1.4rem;
margin-top: -1.5rem;
}
.subtitle.is-1 {
@@ -2751,10 +2751,17 @@ a.box:active {
}
.number {
align-items: center;
background-color: whitesmoke;
border-radius: 290486px;
display: inline-block;
display: inline-flex;
font-size: 1.25rem;
height: 2em;
justify-content: center;
margin-right: 1.5rem;
min-width: 2.5em;
padding: 0.25rem 0.5rem;
text-align: center;
vertical-align: top;
}
@@ -2762,16 +2769,15 @@ a.box:active {
align-items: stretch;
box-shadow: 0 1px 2px rgba(10, 10, 10, 0.1);
display: flex;
min-height: 40px;
}
.card-header-title {
align-items: flex-start;
align-items: center;
color: #363636;
display: flex;
flex-grow: 1;
font-weight: bold;
padding: 10px;
font-weight: 700;
padding: 0.75rem;
}
.card-header-icon {
@@ -2779,7 +2785,7 @@ a.box:active {
cursor: pointer;
display: flex;
justify-content: center;
width: 40px;
padding: 0.75rem;
}
.card-image {
@@ -2788,11 +2794,11 @@ a.box:active {
}
.card-content {
padding: 20px;
padding: 1.5rem;
}
.card-content .title + .subtitle {
margin-top: -20px;
margin-top: -1.5rem;
}
.card-footer {
@@ -2805,8 +2811,9 @@ a.box:active {
align-items: center;
display: flex;
flex-grow: 1;
flex-shrink: 0;
justify-content: center;
padding: 10px;
padding: 0.75rem;
}
.card-footer-item:not(:last-child) {
@@ -2819,15 +2826,10 @@ a.box:active {
color: #4a4a4a;
max-width: 100%;
position: relative;
width: 300px;
}
.card .media:not(:last-child) {
margin-bottom: 10px;
}
.card.is-fullwidth {
width: 100%;
margin-bottom: 0.75rem;
}
.card.is-rounded {
@@ -3059,6 +3061,12 @@ a.box:active {
color: #2aa198;
}
.level-item {
align-items: center;
display: flex;
justify-content: center;
}
.level-item .title,
.level-item .subtitle {
margin-bottom: 0;
@@ -3066,13 +3074,13 @@ a.box:active {
@media screen and (max-width: 768px) {
.level-item:not(:last-child) {
margin-bottom: 10px;
margin-bottom: 0.75rem;
}
}
.level-left .level-item:not(:last-child),
.level-right .level-item:not(:last-child) {
margin-right: 10px;
margin-right: 0.75rem;
}
.level-left .level-item.is-flexible,
@@ -3080,24 +3088,31 @@ a.box:active {
flex-grow: 1;
}
.level-left {
align-items: center;
justify-content: flex-start;
}
@media screen and (max-width: 768px) {
.level-left + .level-right {
margin-top: 20px;
margin-top: 1.5rem;
}
}
@media screen and (min-width: 769px) {
.level-left {
align-items: center;
display: flex;
}
}
.level-right {
align-items: center;
justify-content: flex-end;
}
@media screen and (min-width: 769px) {
.level-right {
align-items: center;
display: flex;
justify-content: flex-end;
}
}
@@ -3140,33 +3155,18 @@ a.box:active {
}
}
.media-number,
.media-left,
.media-right {
flex-grow: 0;
flex-shrink: 0;
}
.media-number {
background-color: whitesmoke;
border-radius: 290486px;
display: inline-block;
font-size: 1.25rem;
height: 32px;
line-height: 24px;
margin-right: 1rem;
min-width: 32px;
padding: 4px 8px;
text-align: center;
vertical-align: top;
}
.media-left {
margin-right: 1rem;
margin-right: 0.75rem;
}
.media-right {
margin-left: 1rem;
margin-left: 0.75rem;
}
.media-content {
@@ -3188,7 +3188,7 @@ a.box:active {
.media .media {
border-top: 1px solid rgba(219, 219, 219, 0.5);
display: flex;
padding-top: 10px;
padding-top: 0.75rem;
}
.media .media .content:not(:last-child),
@@ -3211,14 +3211,8 @@ a.box:active {
}
.media.is-large + .media {
margin-top: 1.4rem;
padding-top: 1.4rem;
}
@media screen and (min-width: 769px) {
.media.is-large .media-number {
margin-right: 1.4rem;
}
margin-top: 1.5rem;
padding-top: 1.5rem;
}
.menu-nav a {
@@ -6342,7 +6336,7 @@ html.route-index #carbon {
}
.example + .highlight:not(:last-child) {
margin-bottom: 3rem;
margin-bottom: 1.5rem;
}
.structure {