github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

Fixed media queries

pull/229/head
almasaeed2010 2015-02-02 17:09:59 -05:00
parent e219f5c692
commit 6a44a9dc04
8 changed files with 187 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
build/less/404_500_errors.less
View File

@ -5,7 +5,7 @@
.error-page {
width: 600px;
margin: 20px auto 0 auto;
@media screen and (max-width: @screen-sm) {
@media (max-width: @screen-sm-max) {
width: 100%;
}
//For the error number e.g: 404
@ -13,7 +13,7 @@
float: left;
font-size: 100px;
font-weight: 300;
@media screen and (max-width: @screen-sm) {
@media (max-width: @screen-sm-max) {
float: none;
text-align: center;
}
@ -21,13 +21,13 @@
//For the message
> .error-content {
margin-left: 190px;
@media screen and (max-width: @screen-sm) {
@media (max-width: @screen-sm-max) {
margin-left: 0;
}
> h3 {
font-weight: 300;
font-size: 25px;
@media screen and (max-width: @screen-sm) {
@media(max-width: @screen-sm-max) {
text-align: center;
}
}

5
build/less/header.less
View File

@ -8,11 +8,12 @@
max-height: 100px;
z-index: 1030;
//Navbar
.navbar {
> .navbar {
margin-bottom: 0;
margin-left: @sidebar-width;
border: none;
min-height: @navbar-height;
border-radius: 0;
}
//Navbar Right Menu
.navbar-custom-menu,
@ -124,7 +125,7 @@
}
}
@media screen and (max-width: @screen-sm) {
@media (max-width: @screen-sm-max) {
> .breadcrumb {
position: relative;
margin-top: 5px;

2
build/less/lockscreen.less
View File

@ -27,7 +27,7 @@
font-size: 90px;
}
@media screen and (max-width: @screen-xs) {
@media (max-width: @screen-xs-max) {
.lockscreen .headline {
font-size: 60px;
margin-bottom: 40px;

2
build/less/mailbox.less
View File

@ -43,7 +43,7 @@
}
}
@media screen and (max-width: @screen-sm) {
@media (max-width: @screen-sm-max) {
.nav-stacked {
> li:not(.header) {
float: left;

3
build/less/small-box.less
View File

@ -75,7 +75,7 @@
}
}
@media screen and (max-width: @screen-xs) {
@media (max-width: @screen-xs-max) {
// No need for icons on very small devices
.small-box {
text-align: center;
@ -86,5 +86,4 @@
font-size: 12px;
}
}
}

19
dist/css/AdminLTE.css vendored
View File

@ -203,11 +203,12 @@ a:focus {
max-height: 100px;
z-index: 1030;
}
.main-header .navbar {
.main-header > .navbar {
margin-bottom: 0;
margin-left: 230px;
border: none;
min-height: 50px;
border-radius: 0;
}
.main-header .navbar-custom-menu,
.main-header .navbar-right {
@ -308,7 +309,7 @@ a:focus {
.content-header > .breadcrumb > li + li:before {
content: '>\00a0';
}
@media screen and (max-width: 768px) {
@media (max-width: 991px) {
.content-header > .breadcrumb {
position: relative;
margin-top: 5px;
@ -1133,7 +1134,7 @@ a:focus {
.small-box:hover .icon {
font-size: 95px;
}
@media screen and (max-width: 480px) {
@media (max-width: 767px) {
.small-box {
text-align: center;
}
@ -2525,7 +2526,7 @@ table.text-center th {
.mailbox .table-mailbox tr > td > a {
color: #444;
}
@media screen and (max-width: 768px) {
@media (max-width: 991px) {
.mailbox .nav-stacked > li:not(.header) {
float: left;
width: 50%;
@ -2563,7 +2564,7 @@ table.text-center th {
margin: 10px 0 30px 0;
font-size: 90px;
}
@media screen and (max-width: 480px) {
@media (max-width: 767px) {
.lockscreen .headline {
font-size: 60px;
margin-bottom: 40px;
@ -2681,7 +2682,7 @@ table.text-center th {
width: 600px;
margin: 20px auto 0 auto;
}
@media screen and (max-width: 768px) {
@media (max-width: 991px) {
.error-page {
width: 100%;
}
@ -2691,7 +2692,7 @@ table.text-center th {
font-size: 100px;
font-weight: 300;
}
@media screen and (max-width: 768px) {
@media (max-width: 991px) {
.error-page > .headline {
float: none;
text-align: center;
@ -2701,7 +2702,7 @@ table.text-center th {
margin-left: 190px;
display: block;
}
@media screen and (max-width: 768px) {
@media (max-width: 991px) {
.error-page > .error-content {
margin-left: 0;
}
@ -2710,7 +2711,7 @@ table.text-center th {
font-weight: 300;
font-size: 25px;
}
@media screen and (max-width: 768px) {
@media (max-width: 991px) {
.error-page > .error-content > h3 {
text-align: center;
}

2
dist/css/AdminLTE.min.css vendored
View File

File diff suppressed because one or more lines are too long

172
documentation/index.html
View File

@ -25,6 +25,7 @@
}
.content-wrapper {
background: #f9f9f9;
padding: 0 10px;
}
.page-header {
border: 0;
@ -61,6 +62,21 @@
font-size: 16px;
font-weight: 400;
}
.eg{
position: absolute;
top: 0;
left: 0;
display: inline-block;
background: #f4f4f4;
padding: 5px;
border-bottom-right-radius: 3px;
border-top-left-radius: 3px;
border-bottom: 1px solid #eee;
border-right: 1px solid #eee;
}
.eg + * {
margin-top: 30px;
}
.content {
padding: 10px 25px;
}
@ -105,6 +121,10 @@
pre .atn, code .atn { color: #404 }
pre .atv, code .atv { color: #060 }
}
.sidebar {
margin-top: 0;
padding-top: 0!important;
}
</style>
</head>
<body class="skin-blue fixed" data-spy="scroll" data-target="#scrollspy">
@ -270,13 +290,12 @@ AdminLTE/
<section id='layout'>
<h2 class='page-header'><span>Layout</span></h2>
<p class='lead'>The first thing that you probably want to do is understanding the layout
of AdminLTE. The layout consists of four major parts:</p>
<p class='lead'>The layout consists of four major parts:</p>
<ul>
<li>Wrapper <code>.wrapper</code></li>
<li>Main Header <code>.main-header</code></li>
<li>Sidebar <code>.sidebar-wrapper</code></li>
<li>Content <code>.content-wrapper</code></li>
<li>Wrapper <code>.wrapper</code>. A div that wraps the whole site.</li>
<li>Main Header <code>.main-header</code>. Contains the logo and navbar.</li>
<li>Sidebar <code>.sidebar-wrapper</code>. Contains the user panel and sidebar menu.</li>
<li>Content <code>.content-wrapper</code>. Contains the page header and content.</li>
</ul>
<p>A full layout example for a quick start</p>
<pre class='prettyprint'>
@ -398,6 +417,145 @@ AdminLTE/
navbar differs slightly from Bootstrap because it has components that Bootstrap doesn't provide.
The navbar can be constructed in two way. This an example for the normal navbar and next we will provide an example for
the top nav layout.</p>
<div class="box box-solid">
<div class="box-body" style="position: relative;">
<span class="eg">Main Header Example</span>
<header class="main-header" style="position: relative;">
<!-- Logo -->
<a href="index2.html" class="logo">AdminLTE</a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar" role="navigation" style="border: 0;">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
<span class="sr-only">Toggle navigation</span>
</a>
<!-- Navbar Right Menu -->
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<!-- Messages: style can be found in dropdown.less-->
<li class="dropdown messages-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-envelope-o"></i>
<span class="label label-success">4</span>
</a>
<ul class="dropdown-menu">
<li class="header">You have 4 messages</li>
<li>
<!-- inner menu: contains the actual data -->
<ul class="menu">
<li><!-- start message -->
<a href="#">
<div class="pull-left">
<img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image"/>
</div>
<h4>
Support Team
<small><i class="fa fa-clock-o"></i> 5 mins</small>
</h4>
<p>Why not buy a new awesome theme?</p>
</a>
</li><!-- end message -->
</ul>
</li>
<li class="footer"><a href="#">See All Messages</a></li>
</ul>
</li>
<!-- Notifications: style can be found in dropdown.less -->
<li class="dropdown notifications-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-bell-o"></i>
<span class="label label-warning">10</span>
</a>
<ul class="dropdown-menu">
<li class="header">You have 10 notifications</li>
<li>
<!-- inner menu: contains the actual data -->
<ul class="menu">
<li>
<a href="#">
<i class="ion ion-ios-people info"></i> 5 new members joined today
</a>
</li>
</ul>
</li>
<li class="footer"><a href="#">View all</a></li>
</ul>
</li>
<!-- Tasks: style can be found in dropdown.less -->
<li class="dropdown tasks-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-flag-o"></i>
<span class="label label-danger">9</span>
</a>
<ul class="dropdown-menu">
<li class="header">You have 9 tasks</li>
<li>
<!-- inner menu: contains the actual data -->
<ul class="menu">
<li><!-- Task item -->
<a href="#">
<h3>
Design some buttons
<small class="pull-right">20%</small>
</h3>
<div class="progress xs">
<div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">20% Complete</span>
</div>
</div>
</a>
</li><!-- end task item -->
</ul>
</li>
<li class="footer">
<a href="#">View all tasks</a>
</li>
</ul>
</li>
<!-- User Account: style can be found in dropdown.less -->
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img src="../dist/img/user2-160x160.jpg" class="user-image" alt="User Image"/>
<span class="hidden-xs">Alexander Pierce</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header">
<img src="../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image" />
<p>
Alexander Pierce - Web Developer
<small>Member since Nov. 2012</small>
</p>
</li>
<!-- Menu Body -->
<li class="user-body">
<div class="col-xs-4 text-center">
<a href="#">Followers</a>
</div>
<div class="col-xs-4 text-center">
<a href="#">Sales</a>
</div>
<div class="col-xs-4 text-center">
<a href="#">Friends</a>
</div>
</li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="#" class="btn btn-default btn-flat">Profile</a>
</div>
<div class="pull-right">
<a href="#" class="btn btn-default btn-flat">Sign out</a>
</div>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</header>
</div>
</div>
<pre class='prettyprint'>
&LT;header class="main-header">
&LT;a href="../../index2.html" class="logo">
@ -587,6 +745,8 @@ AdminLTE/
&LT;/nav>
&LT;/header>
</pre>
</section>
<!-- ============================================================= -->