mirror of
https://github.com/Universal-Omega/PortableInfobox.git
synced 2024-11-15 11:59:56 +00:00
Make PI styling more responsive
This commit is contained in:
Luqgreg
parent
d7d3906ff1
commit
57f053f803
|
|
@ -11,57 +11,62 @@
|
|||
background: var(--pi-background);
|
||||
clear: right;
|
||||
float: right;
|
||||
font-size: .85em;
|
||||
margin: 0 0 var(--pi-margin) var(--pi-margin);
|
||||
width: var(--pi-width);
|
||||
|
||||
.pi-border-color {
|
||||
border-color: var(--pi-border-color);
|
||||
}
|
||||
.pi-secondary-background {
|
||||
background-color: var(--pi-secondary-background);
|
||||
}
|
||||
.pi-secondary-font {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.pi-item-spacing {
|
||||
padding: var(--pi-item-spacing);
|
||||
}
|
||||
|
||||
.pi-title {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
font-family: inherit;
|
||||
font-size: 1.75em;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.pi-header {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
font-family: inherit;
|
||||
font-size: 1.2em;
|
||||
font-weight: bold;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.pi-title {
|
||||
border: 0;
|
||||
.pi-image {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
line-height: 28px;
|
||||
max-width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.pi-data-label {
|
||||
padding-top: 0;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
.pi-data-value {
|
||||
>* {
|
||||
>:not(ul), li {
|
||||
margin: 0;
|
||||
}
|
||||
li {
|
||||
margin: 0;
|
||||
line-height: 19px;
|
||||
}
|
||||
ol, ul {
|
||||
ol {
|
||||
list-style-position: inside;
|
||||
}
|
||||
}
|
||||
>.pi-item:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.pi-secondary-font {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
line-height: 18px;
|
||||
margin-top: 0;
|
||||
}
|
||||
.pi-item-spacing {
|
||||
padding: var(--pi-item-spacing);
|
||||
}
|
||||
}
|
||||
.pi {
|
||||
&-secondary-background {
|
||||
background-color: var(--pi-secondary-background);
|
||||
}
|
||||
&-border-color {
|
||||
border-color: var(--pi-border-color);
|
||||
}
|
||||
&-image {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
&-thumbnail{
|
||||
max-width: var(--pi-width);
|
||||
height: auto;
|
||||
|
|
@ -105,9 +110,8 @@
|
|||
-ms-hyphens: auto;
|
||||
hyphens: auto;
|
||||
color: #808080;
|
||||
font-size: 12px;
|
||||
font-size: 1em;
|
||||
font-style: italic;
|
||||
text-align: left;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
&-data {
|
||||
|
|
@ -139,19 +143,17 @@
|
|||
word-wrap: break-word;
|
||||
}
|
||||
&-value {
|
||||
-ms-flex: 1;
|
||||
-webkit-flex: 1;
|
||||
-moz-flex: 1;
|
||||
flex: 1;
|
||||
-webkit-hyphens: auto;
|
||||
-moz-hyphens: auto;
|
||||
-ms-hyphens: auto;
|
||||
hyphens: auto;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
padding-left: 0;
|
||||
word-break: break-word;
|
||||
&:not(:first-child) {
|
||||
-ms-flex-preferred-size: 180px;
|
||||
-webkit-flex-basis: 180px;
|
||||
-moz-flex-basis: 180px;
|
||||
flex-basis: 180px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
|
|
@ -171,6 +173,9 @@
|
|||
.pi-header {
|
||||
text-align: left;
|
||||
}
|
||||
thead + tbody .pi-data-value {
|
||||
padding-top: 0;
|
||||
}
|
||||
.pi-horizontal-group-item {
|
||||
vertical-align: top;
|
||||
&:not(:first-child) {
|
||||
|
|
@ -184,11 +189,7 @@
|
|||
}
|
||||
&-smart {
|
||||
&-data {
|
||||
&-label:not(:first-child) {
|
||||
border-color: var(--pi-border-color);
|
||||
border-left-style: solid;
|
||||
border-left-width: 1px;
|
||||
}
|
||||
&-label:not(:first-child),
|
||||
&-value:not(:first-child) {
|
||||
border-color: var(--pi-border-color);
|
||||
border-left-style: solid;
|
||||
|
|
@ -204,11 +205,14 @@
|
|||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
&-body {
|
||||
display: flex;
|
||||
}
|
||||
&-head {
|
||||
display: flex;
|
||||
& + .pi-smart-group-body .pi-data-value {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
&-body {
|
||||
display: flex;
|
||||
}
|
||||
.pi-smart-data-label {
|
||||
padding-bottom: 0;
|
||||
|
|
@ -225,54 +229,94 @@
|
|||
.pi-data {
|
||||
display: block;
|
||||
}
|
||||
.pi-data-value {
|
||||
.pi-data-value:not(:only-child) {
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
&-collapse {
|
||||
.pi-header {
|
||||
&:first-child {
|
||||
padding-right: 25px;
|
||||
position: relative;
|
||||
&::after {
|
||||
border-color: currentColor;
|
||||
border-style: solid;
|
||||
border-width: 2px 2px 0 0;
|
||||
content: '';
|
||||
display: block;
|
||||
height: 5px;
|
||||
right: 10px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 5px;
|
||||
-webkit-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
margin-top: -3px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@media screen and (min-width: 720px) {
|
||||
.pi-collapse .pi-header:first-child {
|
||||
padding-right: 25px;
|
||||
position: relative;
|
||||
&::after {
|
||||
border-color: currentColor;
|
||||
border-style: solid;
|
||||
border-width: 2px 2px 0 0;
|
||||
content: '';
|
||||
display: block;
|
||||
height: 5px;
|
||||
right: 10px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 5px;
|
||||
-webkit-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
margin-top: -3px;
|
||||
}
|
||||
&-closed {
|
||||
.pi-header:first-child::after {
|
||||
transform: rotate(135deg);
|
||||
-webkit-transform: rotate(135deg);
|
||||
-moz-transform: rotate(135deg);
|
||||
-ms-transform: rotate(135deg);
|
||||
margin-top: -5px;
|
||||
}
|
||||
> :nth-child(n+2) {
|
||||
}
|
||||
.pi-collapse-closed {
|
||||
.pi-header:first-child::after {
|
||||
transform: rotate(135deg);
|
||||
-webkit-transform: rotate(135deg);
|
||||
-moz-transform: rotate(135deg);
|
||||
-ms-transform: rotate(135deg);
|
||||
margin-top: -5px;
|
||||
}
|
||||
> :nth-child(n+2) {
|
||||
display: none;
|
||||
}
|
||||
.pi-horizontal-group {
|
||||
thead {
|
||||
display: none;
|
||||
}
|
||||
.pi-horizontal-group {
|
||||
thead {
|
||||
display: none;
|
||||
}
|
||||
tbody {
|
||||
display: none;
|
||||
}
|
||||
tbody {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 720px) {
|
||||
.portable-infobox {
|
||||
float: none;
|
||||
width: initial;
|
||||
font-size: initial;
|
||||
margin: 0;
|
||||
|
||||
.skin-minerva & {
|
||||
margin: 0 -16px;
|
||||
}
|
||||
|
||||
.pi-title {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.skin-minerva {
|
||||
.pi-caption {
|
||||
margin: var(--pi-item-spacing);
|
||||
}
|
||||
|
||||
.pi-horizontal-group {
|
||||
display: table;
|
||||
margin: 0;
|
||||
width: 100% !important;
|
||||
|
||||
.pi-header {
|
||||
display: table-caption;
|
||||
}
|
||||
}
|
||||
|
||||
.pi-navigation {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* PI errors */
|
||||
p.pi-error-info {
|
||||
background-color: #f33;
|
||||
color: #fff;
|
||||
|
|
|
|||
Loading…
Reference in a new issue