Component 0 - Copy this Angular, Css Component to your project

/*! * AdminLTE v2.4.0 * Author: Almsaeed Studio * Website: Almsaeed Studio <https://adminlte.io> * License: Open source MIT * Please visit http://opensource.org/licenses/MIT for more information */ html, body { height: 100%; } .layout boxed html, .layout boxed body { height: 100%; } body { font family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans serif; font weight: 400; overflow x: hidden; overflow y: auto; } .wrapper { height: 100%; position: relative; overflow x: hidden; overflow y: auto; } .wrapper:before, .wrapper:after { content: " "; display: table; } .wrapper:after { clear: both; } .layout boxed .wrapper { max width: 1250px; margin: 0 auto; min height: 100%; box shadow: 0 0 8px rgba(0, 0, 0, 0.5); position: relative; } .layout boxed { background: url("../img/boxed bg.jpg") repeat fixed; } .content wrapper, .main footer { webkit transition: webkit transform 0.3s ease in out, margin 0.3s ease in out; moz transition: moz transform 0.3s ease in out, margin 0.3s ease in out; o transition: o transform 0.3s ease in out, margin 0.3s ease in out; transition: transform 0.3s ease in out, margin 0.3s ease in out; margin left: 230px; z index: 820; } .layout top nav .content wrapper, .layout top nav .main footer { margin left: 0; } @media (max width: 767px) { .content wrapper, .main footer { margin left: 0; } } @media (min width: 768px) { .sidebar collapse .content wrapper, .sidebar collapse .main footer { margin left: 0; } } @media (max width: 767px) { .sidebar open .content wrapper, .sidebar open .main footer { webkit transform: translate(230px, 0); ms transform: translate(230px, 0); o transform: translate(230px, 0); transform: translate(230px, 0); } } .content wrapper { min height: 100%; background color: #ecf0f5; z index: 800; } .main footer { background: #fff; padding: 15px; color: #444; border top: 1px solid #d2d6de; } .fixed .main header, .fixed .main sidebar, .fixed .left side { position: fixed; } .fixed .main header { top: 0; right: 0; left: 0; } .fixed .content wrapper, .fixed .right side { padding top: 50px; } @media (max width: 767px) { .fixed .content wrapper, .fixed .right side { padding top: 100px; } } .fixed.layout boxed .wrapper { max width: 100%; } .fixed .wrapper { overflow: hidden; } .hold transition .content wrapper, .hold transition .right side, .hold transition .main footer, .hold transition .main sidebar, .hold transition .left side, .hold transition .main header .navbar, .hold transition .main header .logo, .hold transition .menu open .fa angle left { webkit transition: none; o transition: none; transition: none; } .content { min height: 250px; padding: 15px; margin right: auto; margin left: auto; padding left: 15px; padding right: 15px; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font family: "Source Sans Pro", sans serif; } a { color: #91b8cf; } a:hover, a:active, a:focus { outline: none; text decoration: none; color: #72afd2; } .page header { margin: 10px 0 20px 0; font size: 22px; } .page header > small { color: #666; display: block; margin top: 5px; } .main header { position: relative; max height: 100px; z index: 1030; } .main header .navbar { webkit transition: margin left 0.3s ease in out; o transition: margin left 0.3s ease in out; transition: margin left 0.3s ease in out; margin bottom: 0; margin left: 230px; border: none; min height: 50px; border radius: 0; } .layout top nav .main header .navbar { margin left: 0; } .main header #navbar search input.form control { background: rgba(255, 255, 255, 0.2); border color: transparent; } .main header #navbar search input.form control:focus, .main header #navbar search input.form control:active { border color: rgba(0, 0, 0, 0.1); background: rgba(255, 255, 255, 0.9); } .main header #navbar search input.form control:: moz placeholder { color: #ccc; opacity: 1; } .main header #navbar search input.form control: ms input placeholder { color: #ccc; } .main header #navbar search input.form control:: webkit input placeholder { color: #ccc; } .main header .navbar custom menu, .main header .navbar right { float: right; } @media (max width: 991px) { .main header .navbar custom menu a, .main header .navbar right a { color: inherit; background: transparent; } } @media (max width: 767px) { .main header .navbar right { float: none; } .navbar collapse .main header .navbar right { margin: 7.5px 15px; } .main header .navbar right > li { color: inherit; border: 0; } } .main header .sidebar toggle { float: left; background color: transparent; background image: none; padding: 15px 15px; font family: fontAwesome; } .main header .sidebar toggle:before { content: "\f0c9"; } .main header .sidebar toggle:hover { color: #fff; } .main header .sidebar toggle:focus, .main header .sidebar toggle:active { background: transparent; } .main header .sidebar toggle .icon bar { display: none; } .main header .navbar .nav > li.user > a > .fa, .main header .navbar .nav > li.user > a > .glyphicon, .main header .navbar .nav > li.user > a > .ion { margin right: 5px; } .main header .navbar .nav > li > a > .label { position: absolute; top: 9px; right: 7px; text align: center; font size: 9px; padding: 2px 3px; line height: 0.9; } .main header .logo { webkit transition: width 0.3s ease in out; o transition: width 0.3s ease in out; transition: width 0.3s ease in out; display: block; float: left; height: 50px; font size: 20px; line height: 50px; text align: center; width: 230px; font family: "Helvetica Neue", Helvetica, Arial, sans serif; padding: 0 15px; font weight: 300; overflow: hidden; } .main header .logo .logo lg { display: block; background color: darkcyan; } .main header .logo .logo mini { display: none; } .main header .navbar brand { color: #fff; } .content header { position: relative; padding: 15px 15px 0 15px; } .content header > h1 { margin: 0; font size: 24px; } .content header > h1 > small { font size: 15px; display: inline block; padding left: 4px; font weight: 300; } .content header > .breadcrumb { float: right; background: transparent; margin top: 0; margin bottom: 0; font size: 12px; padding: 7px 5px; position: absolute; top: 15px; right: 10px; border radius: 2px; } .content header > .breadcrumb > li > a { color: #444; text decoration: none; display: inline block; } .content header > .breadcrumb > li > a > .fa, .content header > .breadcrumb > li > a > .glyphicon, .content header > .breadcrumb > li > a > .ion { margin right: 5px; } .content header > .breadcrumb > li + li:before { content: ">\00a0"; } @media (max width: 991px) { .content header > .breadcrumb { position: relative; margin top: 5px; top: 0; right: 0; float: none; background: #d2d6de; padding left: 10px; } .content header > .breadcrumb li:before { color: #97a0b3; } } .navbar toggle { color: #fff; border: 0; margin: 0; padding: 15px 15px; } @media (max width: 991px) { .navbar custom menu .navbar nav > li { float: left; } .navbar custom menu .navbar nav { margin: 0; float: left; } .navbar custom menu .navbar nav > li > a { padding top: 15px; padding bottom: 15px; line height: 20px; } } @media (max width: 767px) { .main header { position: relative; } .main header .logo, .main header .navbar { width: 100%; float: none; } .main header .navbar { margin: 0; } .main header .navbar custom menu { float: right; } } @media (max width: 991px) { .navbar collapse.pull left { float: none !important; } .navbar collapse.pull left + .navbar custom menu { display: block; position: absolute; top: 0; right: 40px; } } .main sidebar { position: absolute; top: 0; left: 0; padding top: 50px; min height: 100%; width: 230px; z index: 810; webkit transition: webkit transform 0.3s ease in out, width 0.3s ease in out; moz transition: moz transform 0.3s ease in out, width 0.3s ease in out; o transition: o transform 0.3s ease in out, width 0.3s ease in out; transition: transform 0.3s ease in out, width 0.3s ease in out; } @media (max width: 767px) { .main sidebar { padding top: 100px; } } @media (max width: 767px) { .main sidebar { webkit transform: translate( 230px, 0); ms transform: translate( 230px, 0); o transform: translate( 230px, 0); transform: translate( 230px, 0); } } @media (min width: 768px) { .sidebar collapse .main sidebar { webkit transform: translate( 230px, 0); ms transform: translate( 230px, 0); o transform: translate( 230px, 0); transform: translate( 230px, 0); } } @media (max width: 767px) { .sidebar open .main sidebar { webkit transform: translate(0, 0); ms transform: translate(0, 0); o transform: translate(0, 0); transform: translate(0, 0); } } .sidebar { padding bottom: 10px; } .sidebar form input:focus { border color: transparent; } .user panel { position: relative; width: 100%; padding: 10px; overflow: hidden; } .user panel:before, .user panel:after { content: " "; display: table; } .user panel:after { clear: both; } .user panel > .image > img { width: 100%; max width: 45px; height: auto; } .user panel > .info { padding: 5px 5px 5px 15px; line height: 1; position: absolute; left: 55px; } .user panel > .info > p { font weight: 600; margin bottom: 9px; } .user panel > .info > a { text decoration: none; padding right: 5px; margin top: 3px; font size: 11px; } .user panel > .info > a > .fa, .user panel > .info > a > .ion, .user panel > .info > a > .glyphicon { margin right: 3px; } .sidebar menu { list style: none; margin: 0; padding: 0; } .sidebar menu > li { position: relative; margin: 0; padding: 0; } .sidebar menu > li > a { padding: 12px 5px 12px 15px; display: block; } .sidebar menu > li > a > .fa, .sidebar menu > li > a > .glyphicon, .sidebar menu > li > a > .ion { width: 20px; } .sidebar menu > li .label, .sidebar menu > li .badge { margin right: 5px; }