positionierung
This commit is contained in:
parent
9281ecfa76
commit
909a97a095
1 changed files with 54 additions and 36 deletions
|
@ -1,18 +1,25 @@
|
|||
#meta-box {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
display: inline-block;
|
||||
min-height: 1.95rem;
|
||||
max-width: 40%;
|
||||
float: right;
|
||||
display: inline-block;
|
||||
max-width: 40%;
|
||||
margin-top: 2px;
|
||||
|
||||
@media @screen_max-md {
|
||||
position: relative;
|
||||
top: -.5rem;
|
||||
right: auto;
|
||||
float: none;
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.tab-container {
|
||||
display: table;
|
||||
@media @screen_max-md{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.box-content {
|
||||
|
@ -23,12 +30,14 @@
|
|||
|
||||
ul.meta-tabs {
|
||||
list-style: none;
|
||||
background-color: @background_page-header;
|
||||
line-height: 160%;
|
||||
white-space: nowrap;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
@media @screen_max-md {
|
||||
background-color: #fff;
|
||||
}
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
|
@ -62,11 +71,16 @@
|
|||
padding: .3em 1rem .1em;
|
||||
margin-left: 4px;
|
||||
transition: @transition color, @transition background-color, @transition border-color;
|
||||
@media @screen_max-xs{
|
||||
padding: .3em .3rem .1em;
|
||||
|
||||
@media @screen_max-md{
|
||||
padding: .2em .3rem .1em;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
@media @screen_max-xs {
|
||||
min-height: 30px;
|
||||
}
|
||||
|
||||
* {
|
||||
cursor: pointer;
|
||||
color: inherit;
|
||||
|
@ -102,6 +116,10 @@
|
|||
border-color: @color-link;
|
||||
border-bottom-color: @color-content-bg;
|
||||
color: @color-link;
|
||||
|
||||
@media @screen_max-md {
|
||||
top: -1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -110,23 +128,30 @@
|
|||
.meta-content {
|
||||
.tab-pane {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: none;
|
||||
width: 100%;
|
||||
background-color: @color-content-bg;
|
||||
border: 1px solid @color-link;
|
||||
border-top-color: transparent;
|
||||
border-radius: 0 0 @fix_border-radius @fix_border-radius;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
@media @screen_min-xxlg {
|
||||
top: -1px;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: @color-link;
|
||||
}
|
||||
|
||||
@media @screen_max-xxlg {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
@media @screen_max-xlg {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
@media @screen_max-lg {
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
@media @screen_max-md {
|
||||
top: -2px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
|
@ -183,16 +208,13 @@
|
|||
position: relative;
|
||||
}
|
||||
|
||||
li {
|
||||
}
|
||||
|
||||
div.li {
|
||||
position: relative;
|
||||
padding: .15em 0;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: .3em;
|
||||
top: .6em;
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 4px;
|
||||
|
@ -217,20 +239,16 @@
|
|||
}
|
||||
|
||||
@media @screen_max-md {
|
||||
max-width: 100%;
|
||||
float: none;
|
||||
display: block;
|
||||
top: -1.1rem;
|
||||
position: relative;
|
||||
right: auto;
|
||||
.tab-container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
ul.meta-tabs {
|
||||
> li > a {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.meta-content {
|
||||
clear: both;
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue