some mobile optimization
This commit is contained in:
@@ -132,24 +132,13 @@
|
||||
/*--------------------------------------------------------------
|
||||
# Content Tables
|
||||
--------------------------------------------------------------*/
|
||||
.cms_table{
|
||||
display: table;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
|
||||
.table_header, .table_content{margin: 0px -25px;}
|
||||
.table_header{
|
||||
display: table-header-group;
|
||||
}
|
||||
|
||||
.table_content{
|
||||
display: table-row-group;
|
||||
.cms_table {
|
||||
.table_header{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.table_row{
|
||||
display: table-row;
|
||||
position: relative;
|
||||
|
||||
background: white;
|
||||
@@ -159,64 +148,129 @@
|
||||
}
|
||||
|
||||
.table_cell {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
// display: table-cell;
|
||||
/* vertical-align: middle; */
|
||||
font-size: 13px;
|
||||
padding: 10px 15px;
|
||||
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
&.sortable:hover{cursor: pointer;}
|
||||
@media (min-width: @screen-sm-min) {
|
||||
.cms_table{
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-collapse: collapse;
|
||||
|
||||
&.align-center{text-align: center;}
|
||||
&.align-left{text-align: left;}
|
||||
&.align-right{text-align: right;}
|
||||
.table_header, .table_content{margin: 0px -25px;}
|
||||
.table_header{
|
||||
display: table-header-group;
|
||||
}
|
||||
|
||||
.table_content{
|
||||
display: table-row-group;
|
||||
}
|
||||
|
||||
.table_row{
|
||||
display: table-row;
|
||||
position: relative;
|
||||
|
||||
background: white;
|
||||
&:nth-child(even) {
|
||||
background: #f5f3f4;
|
||||
}
|
||||
}
|
||||
|
||||
.table_cell {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
font-size: 13px;
|
||||
padding: 10px 15px;
|
||||
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
&.sortable:hover{cursor: pointer;}
|
||||
|
||||
&.align-center{text-align: center;}
|
||||
&.align-left{text-align: left;}
|
||||
&.align-right{text-align: right;}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* === Other cell types === */
|
||||
/*.cell_checkbox {width:40px;}
|
||||
.cell_image {width:120px; line-height:0;} .cell_image img {width:100%;}
|
||||
.cell_title {position:relative;}
|
||||
.cell_title a {color:#000;} .cell_title a:hover {color:#28b78d;}*/
|
||||
|
||||
/*.cell_date {}
|
||||
.cell_author {}
|
||||
.cell_category {}
|
||||
.cell_status {position:relative; padding-left:20px;}
|
||||
|
||||
.cell_status:before {
|
||||
content:"";
|
||||
display:block;
|
||||
position:absolute;
|
||||
left:0px; top:50%;
|
||||
margin-top:-5px;
|
||||
width:12px; height:12px;
|
||||
border-radius:100%;
|
||||
background:#88c87a;
|
||||
}
|
||||
|
||||
.cell_status_online {color:#28b78d;} .cell_status_online:before {background-color:#28b78d;}
|
||||
.cell_status_offline {color:#ea5e5d;} .cell_status_offline:before {background-color:#ea5e5d;}
|
||||
.cell_status_remaining {color:#5fb1e9;} .cell_status_remaining:before {background-color:#5fb1e9;}
|
||||
.cell_status_expired {color:#eba760;} .cell_status_expired:before {background-color:#eba760;}
|
||||
*/
|
||||
|
||||
/* === Cell settings === */
|
||||
.cell_settings {
|
||||
.clearfix();
|
||||
|
||||
.actions_btn{
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* === Other cell types === */
|
||||
/*.cell_checkbox {width:40px;}
|
||||
.cell_image {width:120px; line-height:0;} .cell_image img {width:100%;}
|
||||
.cell_title {position:relative;}
|
||||
.cell_title a {color:#000;} .cell_title a:hover {color:#28b78d;}*/
|
||||
.icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/*.cell_date {}
|
||||
.cell_author {}
|
||||
.cell_category {}
|
||||
.cell_status {position:relative; padding-left:20px;}
|
||||
.actions_container{
|
||||
list-style-type: none;
|
||||
|
||||
.cell_status:before {
|
||||
content:"";
|
||||
display:block;
|
||||
position:absolute;
|
||||
left:0px; top:50%;
|
||||
margin-top:-5px;
|
||||
width:12px; height:12px;
|
||||
border-radius:100%;
|
||||
background:#88c87a;
|
||||
}
|
||||
.icon:hover{
|
||||
cursor: pointer;
|
||||
color: @cms_brand_primary;
|
||||
}
|
||||
}
|
||||
|
||||
.cell_status_online {color:#28b78d;} .cell_status_online:before {background-color:#28b78d;}
|
||||
.cell_status_offline {color:#ea5e5d;} .cell_status_offline:before {background-color:#ea5e5d;}
|
||||
.cell_status_remaining {color:#5fb1e9;} .cell_status_remaining:before {background-color:#5fb1e9;}
|
||||
.cell_status_expired {color:#eba760;} .cell_status_expired:before {background-color:#eba760;}
|
||||
*/
|
||||
li {
|
||||
display: inline-block;
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
/* === Cell settings === */
|
||||
.cell_settings {
|
||||
.clearfix();
|
||||
@media (min-width: @screen-sm-min) {
|
||||
.cell_settings {
|
||||
position: relative;
|
||||
width: 22.4px + 2*15px;
|
||||
text-align: right;
|
||||
overflow: visible;
|
||||
|
||||
.icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.actions_btn{
|
||||
position: relative;
|
||||
display: block;
|
||||
z-index: 20;
|
||||
&:hover{
|
||||
cursor: pointer;
|
||||
@@ -239,9 +293,6 @@
|
||||
border-radius: 20px;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
padding-right: 5px;
|
||||
|
||||
&:last-child{
|
||||
border-right: 1px solid white;
|
||||
padding-right: 10px;
|
||||
@@ -266,5 +317,5 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -38,7 +38,8 @@
|
||||
height:100%; /*overflow-y:scroll;*/
|
||||
|
||||
&>.inner {
|
||||
position:relative; width:auto;
|
||||
position:relative;
|
||||
width:auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -74,11 +74,11 @@ export default {
|
||||
}
|
||||
|
||||
img {
|
||||
width:32px;
|
||||
height:auto;
|
||||
margin:0 auto;
|
||||
padding-top:4px;
|
||||
display:block;
|
||||
display: block;
|
||||
width: 30px;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
padding-top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -165,10 +165,11 @@ export default {
|
||||
list-style-type: none;
|
||||
|
||||
li{
|
||||
.clearfix();
|
||||
.icon {
|
||||
float:left;
|
||||
float: left;
|
||||
width: 45px;
|
||||
line-height:45px;
|
||||
line-height: 45px;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
}
|
||||
@@ -178,16 +179,21 @@ export default {
|
||||
line-height: 45px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
a {color:#FFF; display:block; height:45px;}
|
||||
&:after {clear:both; content:""; display:block;}
|
||||
&:hover {background:rgba(40,183,141,0.3);}
|
||||
a {
|
||||
display: block;
|
||||
color: white;
|
||||
height: 45px;
|
||||
}
|
||||
&:hover {
|
||||
background: darken(@cms_brand_primary, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.open {
|
||||
.user_menu{display: block;}
|
||||
&>.trigger{background: rgba(40, 183, 141, 0.5);}
|
||||
&>.trigger{background: fade(@cms_brand_primary, 50%);}
|
||||
.trigger_btn .icon:before{transform: rotate(180deg);}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user