mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-10-14 11:21:29 +00:00
feat: mobile terminal adaptation (#78)
This commit is contained in:
Fine0830
@@ -15,10 +15,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
.show-xs,
|
||||
.show-sm,
|
||||
.show-md,
|
||||
.show-lg {
|
||||
.show-xs {
|
||||
display: none !important;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
@@ -30,145 +27,6 @@
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) and (max-width: 1023px) {
|
||||
.show-sm {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.hide-sm {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) and (max-width: 1279px) {
|
||||
.show-md {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.hide-md {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
.show-lg {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.hide-lg {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.g-xs-1,
|
||||
.g-xs-2,
|
||||
.g-xs-3,
|
||||
.g-xs-4,
|
||||
.g-xs-5,
|
||||
.g-xs-6,
|
||||
.g-xs-7,
|
||||
.g-xs-8,
|
||||
.g-xs-9,
|
||||
.g-xs-10,
|
||||
.g-xs-11,
|
||||
.g-xs-12 {
|
||||
float: left;
|
||||
min-height: 1px;
|
||||
}
|
||||
|
||||
.g-xs-12 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.g-xs-11 {
|
||||
width: 91.666%;
|
||||
}
|
||||
|
||||
.g-xs-10 {
|
||||
width: 83.333%;
|
||||
}
|
||||
|
||||
.g-xs-9 {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.g-xs-8 {
|
||||
width: 66.666%;
|
||||
}
|
||||
|
||||
.g-xs-7 {
|
||||
width: 58.333%;
|
||||
}
|
||||
|
||||
.g-xs-6 {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.g-xs-5 {
|
||||
width: 41.666%;
|
||||
}
|
||||
|
||||
.g-xs-4 {
|
||||
width: 33.333%;
|
||||
}
|
||||
|
||||
.g-xs-3 {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.g-xs-2 {
|
||||
width: 16.666%;
|
||||
}
|
||||
|
||||
.g-xs-1 {
|
||||
width: 8.333%;
|
||||
}
|
||||
|
||||
.g-xs-space-12 {
|
||||
margin-left: 100%;
|
||||
}
|
||||
|
||||
.g-xs-space-11 {
|
||||
margin-left: 91.666%;
|
||||
}
|
||||
|
||||
.g-xs-space-10 {
|
||||
margin-left: 83.333%;
|
||||
}
|
||||
|
||||
.g-xs-space-9 {
|
||||
margin-left: 75%;
|
||||
}
|
||||
|
||||
.g-xs-space-8 {
|
||||
margin-left: 66.666%;
|
||||
}
|
||||
|
||||
.g-xs-space-7 {
|
||||
margin-left: 58.333%;
|
||||
}
|
||||
|
||||
.g-xs-space-6 {
|
||||
margin-left: 50%;
|
||||
}
|
||||
|
||||
.g-xs-space-5 {
|
||||
margin-left: 41.666%;
|
||||
}
|
||||
|
||||
.g-xs-space-4 {
|
||||
margin-left: 33.333%;
|
||||
}
|
||||
|
||||
.g-xs-space-3 {
|
||||
margin-left: 25%;
|
||||
}
|
||||
|
||||
.g-xs-space-2 {
|
||||
margin-left: 16.666%;
|
||||
}
|
||||
|
||||
.g-xs-space-1 {
|
||||
margin-left: 8.333%;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.g-sm-1,
|
||||
.g-sm-2,
|
||||
@@ -233,278 +91,4 @@
|
||||
.g-sm-1 {
|
||||
width: 8.333%;
|
||||
}
|
||||
|
||||
.g-sm-space-12 {
|
||||
margin-left: 100%;
|
||||
}
|
||||
|
||||
.g-sm-space-11 {
|
||||
margin-left: 91.666%;
|
||||
}
|
||||
|
||||
.g-sm-space-10 {
|
||||
margin-left: 83.333%;
|
||||
}
|
||||
|
||||
.g-sm-space-9 {
|
||||
margin-left: 75%;
|
||||
}
|
||||
|
||||
.g-sm-space-8 {
|
||||
margin-left: 66.666%;
|
||||
}
|
||||
|
||||
.g-sm-space-7 {
|
||||
margin-left: 58.333%;
|
||||
}
|
||||
|
||||
.g-sm-space-6 {
|
||||
margin-left: 50%;
|
||||
}
|
||||
|
||||
.g-sm-space-5 {
|
||||
margin-left: 41.666%;
|
||||
}
|
||||
|
||||
.g-sm-space-4 {
|
||||
margin-left: 33.333%;
|
||||
}
|
||||
|
||||
.g-sm-space-3 {
|
||||
margin-left: 25%;
|
||||
}
|
||||
|
||||
.g-sm-space-2 {
|
||||
margin-left: 16.666%;
|
||||
}
|
||||
|
||||
.g-sm-space-1 {
|
||||
margin-left: 8.333%;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.g-md-1,
|
||||
.g-md-2,
|
||||
.g-md-3,
|
||||
.g-md-4,
|
||||
.g-md-5,
|
||||
.g-md-6,
|
||||
.g-md-7,
|
||||
.g-md-8,
|
||||
.g-md-9,
|
||||
.g-md-10,
|
||||
.g-md-11,
|
||||
.g-md-12 {
|
||||
float: left;
|
||||
min-height: 1px;
|
||||
}
|
||||
|
||||
.g-md-12 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.g-md-11 {
|
||||
width: 91.666%;
|
||||
}
|
||||
|
||||
.g-md-10 {
|
||||
width: 83.333%;
|
||||
}
|
||||
|
||||
.g-md-9 {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.g-md-8 {
|
||||
width: 66.666%;
|
||||
}
|
||||
|
||||
.g-md-7 {
|
||||
width: 58.333%;
|
||||
}
|
||||
|
||||
.g-md-6 {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.g-md-5 {
|
||||
width: 41.666%;
|
||||
}
|
||||
|
||||
.g-md-4 {
|
||||
width: 33.333%;
|
||||
}
|
||||
|
||||
.g-md-3 {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.g-md-2 {
|
||||
width: 16.666%;
|
||||
}
|
||||
|
||||
.g-md-1 {
|
||||
width: 8.333%;
|
||||
}
|
||||
|
||||
.g-md-space-12 {
|
||||
margin-left: 100%;
|
||||
}
|
||||
|
||||
.g-md-space-11 {
|
||||
margin-left: 91.666%;
|
||||
}
|
||||
|
||||
.g-md-space-10 {
|
||||
margin-left: 83.333%;
|
||||
}
|
||||
|
||||
.g-md-space-9 {
|
||||
margin-left: 75%;
|
||||
}
|
||||
|
||||
.g-md-space-8 {
|
||||
margin-left: 66.666%;
|
||||
}
|
||||
|
||||
.g-md-space-7 {
|
||||
margin-left: 58.333%;
|
||||
}
|
||||
|
||||
.g-md-space-6 {
|
||||
margin-left: 50%;
|
||||
}
|
||||
|
||||
.g-md-space-5 {
|
||||
margin-left: 41.666%;
|
||||
}
|
||||
|
||||
.g-md-space-4 {
|
||||
margin-left: 33.333%;
|
||||
}
|
||||
|
||||
.g-md-space-3 {
|
||||
margin-left: 25%;
|
||||
}
|
||||
|
||||
.g-md-space-2 {
|
||||
margin-left: 16.666%;
|
||||
}
|
||||
|
||||
.g-md-space-1 {
|
||||
margin-left: 8.333%;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
.g-lg-1,
|
||||
.g-lg-2,
|
||||
.g-lg-3,
|
||||
.g-lg-4,
|
||||
.g-lg-5,
|
||||
.g-lg-6,
|
||||
.g-lg-7,
|
||||
.g-lg-8,
|
||||
.g-lg-9,
|
||||
.g-lg-10,
|
||||
.g-lg-11,
|
||||
.g-lg-12 {
|
||||
float: left;
|
||||
min-height: 1px;
|
||||
}
|
||||
|
||||
.g-lg-12 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.g-lg-11 {
|
||||
width: 91.666%;
|
||||
}
|
||||
|
||||
.g-lg-10 {
|
||||
width: 83.333%;
|
||||
}
|
||||
|
||||
.g-lg-9 {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.g-lg-8 {
|
||||
width: 66.666%;
|
||||
}
|
||||
|
||||
.g-lg-7 {
|
||||
width: 58.333%;
|
||||
}
|
||||
|
||||
.g-lg-6 {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.g-lg-5 {
|
||||
width: 41.666%;
|
||||
}
|
||||
|
||||
.g-lg-4 {
|
||||
width: 33.333%;
|
||||
}
|
||||
|
||||
.g-lg-3 {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.g-lg-2 {
|
||||
width: 16.666%;
|
||||
}
|
||||
|
||||
.g-lg-1 {
|
||||
width: 8.333%;
|
||||
}
|
||||
|
||||
.g-lg-space-12 {
|
||||
margin-left: 100%;
|
||||
}
|
||||
|
||||
.g-lg-space-11 {
|
||||
margin-left: 91.666%;
|
||||
}
|
||||
|
||||
.g-lg-space-10 {
|
||||
margin-left: 83.333%;
|
||||
}
|
||||
|
||||
.g-lg-space-9 {
|
||||
margin-left: 75%;
|
||||
}
|
||||
|
||||
.g-lg-space-8 {
|
||||
margin-left: 66.666%;
|
||||
}
|
||||
|
||||
.g-lg-space-7 {
|
||||
margin-left: 58.333%;
|
||||
}
|
||||
|
||||
.g-lg-space-6 {
|
||||
margin-left: 50%;
|
||||
}
|
||||
|
||||
.g-lg-space-5 {
|
||||
margin-left: 41.666%;
|
||||
}
|
||||
|
||||
.g-lg-space-4 {
|
||||
margin-left: 33.333%;
|
||||
}
|
||||
|
||||
.g-lg-space-3 {
|
||||
margin-left: 25%;
|
||||
}
|
||||
|
||||
.g-lg-space-2 {
|
||||
margin-left: 16.666%;
|
||||
}
|
||||
|
||||
.g-lg-space-1 {
|
||||
margin-left: 8.333%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -171,3 +171,21 @@
|
||||
color: #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
.scroll_bar_style::-webkit-scrollbar {
|
||||
width: 9px;
|
||||
height: 4px;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.scroll_bar_style::-webkit-scrollbar-track {
|
||||
background-color: #eee;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 0 6px #ccc;
|
||||
}
|
||||
|
||||
.scroll_bar_style::-webkit-scrollbar-thumb {
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 0 6px #ccc;
|
||||
background-color: #aaa;
|
||||
}
|
||||
|
||||
@@ -29,6 +29,7 @@ body {
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
div,
|
||||
|
||||
Reference in New Issue
Block a user