1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
- <title>Helper Classes | Bootstrap Based Admin Template - Material Design</title>
-
- <link rel="icon" href="../favicon.ico" type="image/x-icon">
-
- <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&subset=latin,cyrillic-ext" rel="stylesheet" type="text/css">
- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">
-
- <link href="../plugins/bootstrap/css/bootstrap.css" rel="stylesheet">
-
- <link href="../plugins/node-waves/waves.css" rel="stylesheet" />
-
- <link href="../plugins/animate-css/animate.css" rel="stylesheet" />
-
- <link href="../css/style.css" rel="stylesheet">
-
- <link href="../css/themes/all-themes.css" rel="stylesheet" />
- </head>
- <body class="theme-red">
-
- <div class="page-loader-wrapper">
- <div class="loader">
- <div class="preloader">
- <div class="spinner-layer pl-red">
- <div class="circle-clipper left">
- <div class="circle"></div>
- </div>
- <div class="circle-clipper right">
- <div class="circle"></div>
- </div>
- </div>
- </div>
- <p>Please wait...</p>
- </div>
- </div>
-
-
- <div class="overlay"></div>
-
-
- <div class="search-bar">
- <div class="search-icon">
- <i class="material-icons">search</i>
- </div>
- <input type="text" placeholder="START TYPING...">
- <div class="close-search">
- <i class="material-icons">close</i>
- </div>
- </div>
-
-
- <nav class="navbar">
- <div class="container-fluid">
- <div class="navbar-header">
- <a href="javascript:void(0);" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false"></a>
- <a href="javascript:void(0);" class="bars"></a>
- <a class="navbar-brand" href="widgets/../../index.html">ADMINBSB - MATERIAL DESIGN</a>
- </div>
- <div class="collapse navbar-collapse" id="navbar-collapse">
- <ul class="nav navbar-nav navbar-right">
-
- <li><a href="javascript:void(0);" class="js-search" data-close="true"><i class="material-icons">search</i></a></li>
-
-
- <li class="dropdown">
- <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button">
- <i class="material-icons">notifications</i>
- <span class="label-count">7</span>
- </a>
- <ul class="dropdown-menu">
- <li class="header">NOTIFICATIONS</li>
- <li class="body">
- <ul class="menu">
- <li>
- <a href="javascript:void(0);">
- <div class="icon-circle bg-light-green">
- <i class="material-icons">person_add</i>
- </div>
- <div class="menu-info">
- <h4>12 new members joined</h4>
- <p>
- <i class="material-icons">access_time</i> 14 mins ago
- </p>
- </div>
- </a>
- </li>
- <li>
- <a href="javascript:void(0);">
- <div class="icon-circle bg-cyan">
- <i class="material-icons">add_shopping_cart</i>
- </div>
- <div class="menu-info">
- <h4>4 sales made</h4>
- <p>
- <i class="material-icons">access_time</i> 22 mins ago
- </p>
- </div>
- </a>
- </li>
- <li>
- <a href="javascript:void(0);">
- <div class="icon-circle bg-red">
- <i class="material-icons">delete_forever</i>
- </div>
- <div class="menu-info">
- <h4><b>Nancy Doe</b> deleted account</h4>
- <p>
- <i class="material-icons">access_time</i> 3 hours ago
- </p>
- </div>
- </a>
- </li>
- <li>
- <a href="javascript:void(0);">
- <div class="icon-circle bg-orange">
- <i class="material-icons">mode_edit</i>
- </div>
- <div class="menu-info">
- <h4><b>Nancy</b> changed name</h4>
- <p>
- <i class="material-icons">access_time</i> 2 hours ago
- </p>
- </div>
- </a>
- </li>
- <li>
- <a href="javascript:void(0);">
- <div class="icon-circle bg-blue-grey">
- <i class="material-icons">comment</i>
- </div>
- <div class="menu-info">
- <h4><b>John</b> commented your post</h4>
- <p>
- <i class="material-icons">access_time</i> 4 hours ago
- </p>
- </div>
- </a>
- </li>
- <li>
- <a href="javascript:void(0);">
- <div class="icon-circle bg-light-green">
- <i class="material-icons">cached</i>
- </div>
- <div class="menu-info">
- <h4><b>John</b> updated status</h4>
- <p>
- <i class="material-icons">access_time</i> 3 hours ago
- </p>
- </div>
- </a>
- </li>
- <li>
- <a href="javascript:void(0);">
- <div class="icon-circle bg-purple">
- <i class="material-icons">settings</i>
- </div>
- <div class="menu-info">
- <h4>Settings updated</h4>
- <p>
- <i class="material-icons">access_time</i> Yesterday
- </p>
- </div>
- </a>
- </li>
- </ul>
- </li>
- <li class="footer">
- <a href="javascript:void(0);">View All Notifications</a>
- </li>
- </ul>
- </li>
-
-
- <li class="dropdown">
- <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button">
- <i class="material-icons">flag</i>
- <span class="label-count">9</span>
- </a>
- <ul class="dropdown-menu">
- <li class="header">TASKS</li>
- <li class="body">
- <ul class="menu tasks">
- <li>
- <a href="javascript:void(0);">
- <h4>
- Footer display issue
- <small>32%</small>
- </h4>
- <div class="progress">
- <div class="progress-bar bg-pink" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 32%">
- </div>
- </div>
- </a>
- </li>
- <li>
- <a href="javascript:void(0);">
- <h4>
- Make new buttons
- <small>45%</small>
- </h4>
- <div class="progress">
- <div class="progress-bar bg-cyan" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
- </div>
- </div>
- </a>
- </li>
- <li>
- <a href="javascript:void(0);">
- <h4>
- Create new dashboard
- <small>54%</small>
- </h4>
- <div class="progress">
- <div class="progress-bar bg-teal" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 54%">
- </div>
- </div>
- </a>
- </li>
- <li>
- <a href="javascript:void(0);">
- <h4>
- Solve transition issue
- <small>65%</small>
- </h4>
- <div class="progress">
- <div class="progress-bar bg-orange" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 65%">
- </div>
- </div>
- </a>
- </li>
- <li>
- <a href="javascript:void(0);">
- <h4>
- Answer GitHub questions
- <small>92%</small>
- </h4>
- <div class="progress">
- <div class="progress-bar bg-purple" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 92%">
- </div>
- </div>
- </a>
- </li>
- </ul>
- </li>
- <li class="footer">
- <a href="javascript:void(0);">View All Tasks</a>
- </li>
- </ul>
- </li>
-
- <li class="pull-right"><a href="javascript:void(0);" class="js-right-sidebar" data-close="true"><i class="material-icons">more_vert</i></a></li>
- </ul>
- </div>
- </div>
- </nav>
-
- <section>
-
- <aside id="leftsidebar" class="sidebar">
-
- <div class="user-info">
- <div class="image">
- <img src="../images/user.png" width="48" height="48" alt="User" />
- </div>
- <div class="info-container">
- <div class="name" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">John Doe</div>
- <div class="email">john.doe@example.com</div>
- <div class="btn-group user-helper-dropdown">
- <i class="material-icons" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">keyboard_arrow_down</i>
- <ul class="dropdown-menu pull-right">
- <li><a href="javascript:void(0);"><i class="material-icons">person</i>Profile</a></li>
- <li role="seperator" class="divider"></li>
- <li><a href="javascript:void(0);"><i class="material-icons">group</i>Followers</a></li>
- <li><a href="javascript:void(0);"><i class="material-icons">shopping_cart</i>Sales</a></li>
- <li><a href="javascript:void(0);"><i class="material-icons">favorite</i>Likes</a></li>
- <li role="seperator" class="divider"></li>
- <li><a href="javascript:void(0);"><i class="material-icons">input</i>Sign Out</a></li>
- </ul>
- </div>
- </div>
- </div>
-
-
- <div class="menu">
- <ul class="list">
- <li class="header">MAIN NAVIGATION</li>
- <li>
- <a href="../index.html">
- <i class="material-icons">home</i>
- <span>Home</span>
- </a>
- </li>
- <li>
- <a href="../pages/typography.html">
- <i class="material-icons">text_fields</i>
- <span>Typography</span>
- </a>
- </li>
- <li class="active">
- <a href="../pages/helper-classes.html">
- <i class="material-icons">layers</i>
- <span>Helper Classes</span>
- </a>
- </li>
- <li>
- <a href="javascript:void(0);" class="menu-toggle">
- <i class="material-icons">widgets</i>
- <span>Widgets</span>
- </a>
- <ul class="ml-menu">
- <li>
- <a href="javascript:void(0);" class="menu-toggle">
- <span>Cards</span>
- </a>
- <ul class="ml-menu">
- <li>
- <a href="../pages/widgets/cards/basic.html">Basic</a>
- </li>
- <li>
- <a href="../pages/widgets/cards/colored.html">Colored</a>
- </li>
- <li>
- <a href="../pages/widgets/cards/no-header.html">No Header</a>
- </li>
- </ul>
- </li>
- <li>
- <a href="javascript:void(0);" class="menu-toggle">
- <span>Infobox</span>
- </a>
- <ul class="ml-menu">
- <li>
- <a href="../pages/widgets/infobox/infobox-1.html">Infobox-1</a>
- </li>
- <li>
- <a href="../pages/widgets/infobox/infobox-2.html">Infobox-2</a>
- </li>
- <li>
- <a href="../pages/widgets/infobox/infobox-3.html">Infobox-3</a>
- </li>
- <li>
- <a href="../pages/widgets/infobox/infobox-4.html">Infobox-4</a>
- </li>
- <li>
- <a href="../pages/widgets/infobox/infobox-5.html">Infobox-5</a>
- </li>
- </ul>
- </li>
- </ul>
- </li>
- <li>
- <a href="javascript:void(0);" class="menu-toggle">
- <i class="material-icons">swap_calls</i>
- <span>User Interface (UI)</span>
- </a>
- <ul class="ml-menu">
- <li>
- <a href="../pages/ui/alerts.html">Alerts</a>
- </li>
- <li>
- <a href="../pages/ui/animations.html">Animations</a>
- </li>
- <li>
- <a href="../pages/ui/badges.html">Badges</a>
- </li>
- <li>
- <a href="../pages/ui/breadcrumbs.html">Breadcrumbs</a>
- </li>
- <li>
- <a href="../pages/ui/buttons.html">Buttons</a>
- </li>
- <li>
- <a href="../pages/ui/collapse.html">Collapse</a>
- </li>
- <li>
- <a href="../pages/ui/colors.html">Colors</a>
- </li>
- <li>
- <a href="../pages/ui/dialogs.html">Dialogs</a>
- </li>
- <li>
- <a href="../pages/ui/icons.html">Icons</a>
- </li>
- <li>
- <a href="../pages/ui/labels.html">Labels</a>
- </li>
- <li>
- <a href="../pages/ui/list-group.html">List Group</a>
- </li>
- <li>
- <a href="../pages/ui/media-object.html">Media Object</a>
- </li>
- <li>
- <a href="../pages/ui/modals.html">Modals</a>
- </li>
- <li>
- <a href="../pages/ui/notifications.html">Notifications</a>
- </li>
- <li>
- <a href="../pages/ui/pagination.html">Pagination</a>
- </li>
- <li>
- <a href="../pages/ui/preloaders.html">Preloaders</a>
- </li>
- <li>
- <a href="../pages/ui/progressbars.html">Progress Bars</a>
- </li>
- <li>
- <a href="../pages/ui/range-sliders.html">Range Sliders</a>
- </li>
- <li>
- <a href="../pages/ui/sortable-nestable.html">Sortable & Nestable</a>
- </li>
- <li>
- <a href="../pages/ui/tabs.html">Tabs</a>
- </li>
- <li>
- <a href="../pages/ui/thumbnails.html">Thumbnails</a>
- </li>
- <li>
- <a href="../pages/ui/tooltips-popovers.html">Tooltips & Popovers</a>
- </li>
- <li>
- <a href="../pages/ui/waves.html">Waves</a>
- </li>
- </ul>
- </li>
- <li>
- <a href="javascript:void(0);" class="menu-toggle">
- <i class="material-icons">assignment</i>
- <span>Forms</span>
- </a>
- <ul class="ml-menu">
- <li>
- <a href="../pages/forms/basic-form-elements.html">Basic Form Elements</a>
- </li>
- <li>
- <a href="../pages/forms/advanced-form-elements.html">Advanced Form Elements</a>
- </li>
- <li>
- <a href="../pages/forms/form-examples.html">Form Examples</a>
- </li>
- <li>
- <a href="../pages/forms/form-validation.html">Form Validation</a>
- </li>
- <li>
- <a href="../pages/forms/form-wizard.html">Form Wizard</a>
- </li>
- <li>
- <a href="../pages/forms/editors.html">Editors</a>
- </li>
- </ul>
- </li>
- <li>
- <a href="javascript:void(0);" class="menu-toggle">
- <i class="material-icons">view_list</i>
- <span>Tables</span>
- </a>
- <ul class="ml-menu">
- <li>
- <a href="../pages/tables/normal-tables.html">Normal Tables</a>
- </li>
- <li>
- <a href="../pages/tables/jquery-datatable.html">Jquery Datatables</a>
- </li>
- <li>
- <a href="../pages/tables/editable-table.html">Editable Tables</a>
- </li>
- </ul>
- </li>
- <li>
- <a href="javascript:void(0);" class="menu-toggle">
- <i class="material-icons">perm_media</i>
- <span>Medias</span>
- </a>
- <ul class="ml-menu">
- <li>
- <a href="../pages/medias/image-gallery.html">Image Gallery</a>
- </li>
- <li>
- <a href="../pages/medias/carousel.html">Carousel</a>
- </li>
- </ul>
- </li>
- <li>
- <a href="javascript:void(0);" class="menu-toggle">
- <i class="material-icons">pie_chart</i>
- <span>Charts</span>
- </a>
- <ul class="ml-menu">
- <li>
- <a href="../pages/charts/morris.html">Morris</a>
- </li>
- <li>
- <a href="../pages/charts/flot.html">Flot</a>
- </li>
- <li>
- <a href="../pages/charts/chartjs.html">ChartJS</a>
- </li>
- <li>
- <a href="../pages/charts/sparkline.html">Sparkline</a>
- </li>
- <li>
- <a href="../pages/charts/jquery-knob.html">Jquery Knob</a>
- </li>
- </ul>
- </li>
- <li>
- <a href="javascript:void(0);" class="menu-toggle">
- <i class="material-icons">content_copy</i>
- <span>Example Pages</span>
- </a>
- <ul class="ml-menu">
- <li>
- <a href="../pages/examples/sign-in.html">Sign In</a>
- </li>
- <li>
- <a href="../pages/examples/sign-up.html">Sign Up</a>
- </li>
- <li>
- <a href="../pages/examples/forgot-password.html">Forgot Password</a>
- </li>
- <li>
- <a href="../pages/examples/blank.html">Blank Page</a>
- </li>
- <li>
- <a href="../pages/examples/404.html">404 - Not Found</a>
- </li>
- <li>
- <a href="../pages/examples/500.html">500 - Server Error</a>
- </li>
- </ul>
- </li>
- <li>
- <a href="javascript:void(0);" class="menu-toggle">
- <i class="material-icons">map</i>
- <span>Maps</span>
- </a>
- <ul class="ml-menu">
- <li>
- <a href="../pages/maps/google.html">Google Map</a>
- </li>
- <li>
- <a href="../pages/maps/yandex.html">YandexMap</a>
- </li>
- <li>
- <a href="../pages/maps/jvectormap.html">jVectorMap</a>
- </li>
- </ul>
- </li>
- <li>
- <a href="javascript:void(0);" class="menu-toggle">
- <i class="material-icons">trending_down</i>
- <span>Multi Level Menu</span>
- </a>
- <ul class="ml-menu">
- <li>
- <a href="javascript:void(0);">
- <span>Menu Item</span>
- </a>
- </li>
- <li>
- <a href="javascript:void(0);">
- <span>Menu Item - 2</span>
- </a>
- </li>
- <li>
- <a href="javascript:void(0);" class="menu-toggle">
- <span>Level - 2</span>
- </a>
- <ul class="ml-menu">
- <li>
- <a href="javascript:void(0);">
- <span>Menu Item</span>
- </a>
- </li>
- <li>
- <a href="javascript:void(0);" class="menu-toggle">
- <span>Level - 3</span>
- </a>
- <ul class="ml-menu">
- <li>
- <a href="javascript:void(0);">
- <span>Level - 4</span>
- </a>
- </li>
- </ul>
- </li>
- </ul>
- </li>
- </ul>
- </li>
- <li>
- <a href="changelogs.html">
- <i class="material-icons">update</i>
- <span>Changelogs</span>
- </a>
- </li>
- <li class="header">LABELS</li>
- <li>
- <a href="javascript:void(0);">
- <i class="material-icons col-red">donut_large</i>
- <span>Important</span>
- </a>
- </li>
- <li>
- <a href="javascript:void(0);">
- <i class="material-icons col-amber">donut_large</i>
- <span>Warning</span>
- </a>
- </li>
- <li>
- <a href="javascript:void(0);">
- <i class="material-icons col-light-blue">donut_large</i>
- <span>Information</span>
- </a>
- </li>
- </ul>
- </div>
-
-
- <div class="legal">
- <div class="copyright">
- © 2016 - 2017 <a href="javascript:void(0);">AdminBSB - Material Design</a>.
- </div>
- <div class="version">
- <b>Version: </b> 1.0.5
- </div>
- </div>
-
- </aside>
-
-
- <aside id="rightsidebar" class="right-sidebar">
- <ul class="nav nav-tabs tab-nav-right" role="tablist">
- <li role="presentation" class="active"><a href="#skins" data-toggle="tab">SKINS</a></li>
- <li role="presentation"><a href="#settings" data-toggle="tab">SETTINGS</a></li>
- </ul>
- <div class="tab-content">
- <div role="tabpanel" class="tab-pane fade in active in active" id="skins">
- <ul class="demo-choose-skin">
- <li data-theme="red" class="active">
- <div class="red"></div>
- <span>Red</span>
- </li>
- <li data-theme="pink">
- <div class="pink"></div>
- <span>Pink</span>
- </li>
- <li data-theme="purple">
- <div class="purple"></div>
- <span>Purple</span>
- </li>
- <li data-theme="deep-purple">
- <div class="deep-purple"></div>
- <span>Deep Purple</span>
- </li>
- <li data-theme="indigo">
- <div class="indigo"></div>
- <span>Indigo</span>
- </li>
- <li data-theme="blue">
- <div class="blue"></div>
- <span>Blue</span>
- </li>
- <li data-theme="light-blue">
- <div class="light-blue"></div>
- <span>Light Blue</span>
- </li>
- <li data-theme="cyan">
- <div class="cyan"></div>
- <span>Cyan</span>
- </li>
- <li data-theme="teal">
- <div class="teal"></div>
- <span>Teal</span>
- </li>
- <li data-theme="green">
- <div class="green"></div>
- <span>Green</span>
- </li>
- <li data-theme="light-green">
- <div class="light-green"></div>
- <span>Light Green</span>
- </li>
- <li data-theme="lime">
- <div class="lime"></div>
- <span>Lime</span>
- </li>
- <li data-theme="yellow">
- <div class="yellow"></div>
- <span>Yellow</span>
- </li>
- <li data-theme="amber">
- <div class="amber"></div>
- <span>Amber</span>
- </li>
- <li data-theme="orange">
- <div class="orange"></div>
- <span>Orange</span>
- </li>
- <li data-theme="deep-orange">
- <div class="deep-orange"></div>
- <span>Deep Orange</span>
- </li>
- <li data-theme="brown">
- <div class="brown"></div>
- <span>Brown</span>
- </li>
- <li data-theme="grey">
- <div class="grey"></div>
- <span>Grey</span>
- </li>
- <li data-theme="blue-grey">
- <div class="blue-grey"></div>
- <span>Blue Grey</span>
- </li>
- <li data-theme="black">
- <div class="black"></div>
- <span>Black</span>
- </li>
- </ul>
- </div>
- <div role="tabpanel" class="tab-pane fade" id="settings">
- <div class="demo-settings">
- <p>GENERAL SETTINGS</p>
- <ul class="setting-list">
- <li>
- <span>Report Panel Usage</span>
- <div class="switch">
- <label><input type="checkbox" checked><span class="lever"></span></label>
- </div>
- </li>
- <li>
- <span>Email Redirect</span>
- <div class="switch">
- <label><input type="checkbox"><span class="lever"></span></label>
- </div>
- </li>
- </ul>
- <p>SYSTEM SETTINGS</p>
- <ul class="setting-list">
- <li>
- <span>Notifications</span>
- <div class="switch">
- <label><input type="checkbox" checked><span class="lever"></span></label>
- </div>
- </li>
- <li>
- <span>Auto Updates</span>
- <div class="switch">
- <label><input type="checkbox" checked><span class="lever"></span></label>
- </div>
- </li>
- </ul>
- <p>ACCOUNT SETTINGS</p>
- <ul class="setting-list">
- <li>
- <span>Offline</span>
- <div class="switch">
- <label><input type="checkbox"><span class="lever"></span></label>
- </div>
- </li>
- <li>
- <span>Location Permission</span>
- <div class="switch">
- <label><input type="checkbox" checked><span class="lever"></span></label>
- </div>
- </li>
- </ul>
- </div>
- </div>
- </div>
- </aside>
-
- </section>
- <section class="content">
- <div class="container-fluid">
- <div class="block-header">
- <h2>HELPER CLASSES</h2>
- </div>
-
- <div class="row clearfix">
- <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
- <div class="card">
- <div class="header">
- <h2>
- TEXT STYLES
- <small>You can use classes which names are <code>.font-bold, .font-italic, .font-underline, .font-line-through, .font-overline</code></small>
- </h2>
- <ul class="header-dropdown m-r--5">
- <li class="dropdown">
- <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
- <i class="material-icons">more_vert</i>
- </a>
- <ul class="dropdown-menu pull-right">
- <li><a href="javascript:void(0);">Action</a></li>
- <li><a href="javascript:void(0);">Another action</a></li>
- <li><a href="javascript:void(0);">Something else here</a></li>
- </ul>
- </li>
- </ul>
- </div>
- <div class="body">
- <div class="row clearfix">
- <div class="col-lg-2 col-md-2 col-sm-6 col-xs-6">
- <p>
- <b>Normal</b>
- </p>
- <p>Default text</p>
- <p class="col-pink">Text pink color</p>
- <p class="col-cyan">Text cyan color</p>
- <p class="col-teal">Text teal color</p>
- <p class="col-orange">Text orange color</p>
- <p class="col-blue-grey">Text blue grey color</p>
- </div>
- <div class="col-lg-2 col-md-2 col-sm-6 col-xs-6">
- <p>
- <b>Bold</b>
- </p>
- <p class="font-bold">Default text</p>
- <p class="font-bold col-pink">Text pink color</p>
- <p class="font-bold col-cyan">Text cyan color</p>
- <p class="font-bold col-teal">Text teal color</p>
- <p class="font-bold col-orange">Text orange color</p>
- <p class="font-bold col-blue-grey">Text blue grey color</p>
- </div>
- <div class="col-lg-2 col-md-2 col-sm-6 col-xs-6">
- <p>
- <b>Italic</b>
- </p>
- <p class="font-italic">Default text</p>
- <p class="font-italic col-pink">Text pink color</p>
- <p class="font-italic col-cyan">Text cyan color</p>
- <p class="font-italic col-teal">Text teal color</p>
- <p class="font-italic col-orange">Text orange color</p>
- <p class="font-italic col-blue-grey">Text blue grey color</p>
- </div>
- <div class="col-lg-2 col-md-2 col-sm-6 col-xs-6">
- <p>
- <b>Underline</b>
- </p>
- <p class="font-underline">Default text</p>
- <p class="font-underline col-pink">Text pink color</p>
- <p class="font-underline col-cyan">Text cyan color</p>
- <p class="font-underline col-teal">Text teal color</p>
- <p class="font-underline col-orange">Text orange color</p>
- <p class="font-underline col-blue-grey">Text blue grey color</p>
- </div>
- <div class="col-lg-2 col-md-2 col-sm-6 col-xs-6">
- <p>
- <b>Line Through</b>
- </p>
- <p class="font-line-through">Default text</p>
- <p class="font-line-through col-pink">Text pink color</p>
- <p class="font-line-through col-cyan">Text cyan color</p>
- <p class="font-line-through col-teal">Text teal color</p>
- <p class="font-line-through col-orange">Text orange color</p>
- <p class="font-line-through col-blue-grey">Text blue grey color</p>
- </div>
- <div class="col-lg-2 col-md-2 col-sm-6 col-xs-6">
- <p>
- <b>Overline</b>
- </p>
- <p class="font-overline">Default text</p>
- <p class="font-overline col-pink">Text pink color</p>
- <p class="font-overline col-cyan">Text cyan color</p>
- <p class="font-overline col-teal">Text teal color</p>
- <p class="font-overline col-orange">Text orange color</p>
- <p class="font-overline col-blue-grey">Text blue grey color</p>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
-
-
- <div class="row clearfix">
- <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
- <div class="card">
- <div class="header">
- <h2>
- FONT SIZES
- <small>You can use the classes which samples are <code>.font-6, .font-10, .font-24</code> The number of can use between 6 - 50px which are near the <b>.font-</b></small>
- </h2>
- <ul class="header-dropdown m-r--5">
- <li class="dropdown">
- <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
- <i class="material-icons">more_vert</i>
- </a>
- <ul class="dropdown-menu pull-right">
- <li><a href="javascript:void(0);">Action</a></li>
- <li><a href="javascript:void(0);">Another action</a></li>
- <li><a href="javascript:void(0);">Something else here</a></li>
- </ul>
- </li>
- </ul>
- </div>
- <div class="body">
- <div class="row clearfix">
- <div class="col-md-2">
- <div class="font-6">font-6</div>
- </div>
- <div class="col-md-2">
- <div class="font-10">font-10</div>
- </div>
- <div class="col-md-2">
- <div class="font-12">font-12</div>
- </div>
- <div class="col-md-2">
- <div class="font-15">font-15</div>
- </div>
- <div class="col-md-2">
- <div class="font-20">font-20</div>
- </div>
- <div class="col-md-2">
- <div class="font-24">font-24</div>
- </div>
- </div>
- <div class="row clearfix">
- <div class="col-md-2">
- <div class="font-32">font-32</div>
- </div>
- <div class="col-md-2">
- <div class="font-40">font-40</div>
- </div>
- <div class="col-md-2">
- <div class="font-42">font-42</div>
- </div>
- <div class="col-md-2">
- <div class="font-45">font-45</div>
- </div>
- <div class="col-md-2">
- <div class="font-48">font-48</div>
- </div>
- <div class="col-md-2">
- <div class="font-50">font-50</div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
-
-
- <div class="row clearfix">
- <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
- <div class="card">
- <div class="header">
- <h2>
- TEXT ALIGNS
- <small>You can use classes which names are <code>.align-left, .align-center, .align-right, .align-justify</code></small>
- </h2>
- <ul class="header-dropdown m-r--5">
- <li class="dropdown">
- <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
- <i class="material-icons">more_vert</i>
- </a>
- <ul class="dropdown-menu pull-right">
- <li><a href="javascript:void(0);">Action</a></li>
- <li><a href="javascript:void(0);">Another action</a></li>
- <li><a href="javascript:void(0);">Something else here</a></li>
- </ul>
- </li>
- </ul>
- </div>
- <div class="body">
- <div class="row clearfix">
- <div class="col-md-3">
- <p class="align-left">
- <b>Align Left</b>
- </p>
- <div class="align-left">
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- </div>
- </div>
- <div class="col-md-3">
- <p class="align-center">
- <b>Align Center</b>
- </p>
- <div class="align-center">
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- </div>
- </div>
- <div class="col-md-3">
- <p class="align-right">
- <b>Align Right</b>
- </p>
- <div class="align-right">
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- </div>
- </div>
- <div class="col-md-3">
- <p class="align-justify">
- <b>Align Justify</b>
- </p>
- <div class="align-justify">
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
-
-
- <div class="row clearfix">
- <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
- <div class="card">
- <div class="header">
- <h2>
- MARGIN & PADDING SPACES
- <small>You can use classes which names are <code>.m-t-10, .m-t--10, .m-r-5, .p-t-10, .p-b-5</code></small>
- </h2>
- <ul class="header-dropdown m-r--5">
- <li class="dropdown">
- <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
- <i class="material-icons">more_vert</i>
- </a>
- <ul class="dropdown-menu pull-right">
- <li><a href="javascript:void(0);">Action</a></li>
- <li><a href="javascript:void(0);">Another action</a></li>
- <li><a href="javascript:void(0);">Something else here</a></li>
- </ul>
- </li>
- </ul>
- </div>
- <div class="body">
- <p>
- <b>Margins</b>
- </p>
- <div class="row clearfix">
- <div class="col-md-2">
- <span class="col-red font-bold">M</span>argin <span class="col-red font-bold">T</span>op <span class="col-red font-bold">10</span>px → <code>.m-t-10</code>
- </div>
- <div class="col-md-2">
- <span class="col-red font-bold">M</span>argin <span class="col-red font-bold">T</span>op <span class="col-red font-bold">0</span>px → <code>.m-t-0</code>
- </div>
- <div class="col-md-2">
- <span class="col-red font-bold">M</span>argin <span class="col-red font-bold">T</span>op <span class="col-red font-bold">-10</span>px → <code>.m-t--10</code>
- </div>
- <div class="col-md-2">
- <span class="col-red font-bold">M</span>argin <span class="col-red font-bold">L</span>eft <span class="col-red font-bold">35</span>px → <code>.m-l-35</code>
- </div>
- <div class="col-md-2">
- <span class="col-red font-bold">M</span>argin <span class="col-red font-bold">L</span>eft <span class="col-red font-bold">0</span>px → <code>.m-l-0</code>
- </div>
- <div class="col-md-2">
- <span class="col-red font-bold">M</span>argin <span class="col-red font-bold">L</span>eft <span class="col-red font-bold">-35</span>px → <code>.m-l--35</code>
- </div>
- <div class="col-md-2">
- <span class="col-red font-bold">M</span>argin <span class="col-red font-bold">B</span>ottom <span class="col-red font-bold">15</span>px → <code>.m-b-15</code>
- </div>
- <div class="col-md-2">
- <span class="col-red font-bold">M</span>argin <span class="col-red font-bold">B</span>ottom <span class="col-red font-bold">0</span>px → <code>.m-b-0</code>
- </div>
- <div class="col-md-2">
- <span class="col-red font-bold">M</span>argin <span class="col-red font-bold">B</span>ottom <span class="col-red font-bold">-20</span>px → <code>.m-b--20</code>
- </div>
- <div class="col-md-2">
- <span class="col-red font-bold">M</span>argin <span class="col-red font-bold">R</span>ight <span class="col-red font-bold">30</span>px → <code>.m-r-30</code>
- </div>
- <div class="col-md-2">
- <span class="col-red font-bold">M</span>argin <span class="col-red font-bold">R</span>ight <span class="col-red font-bold">0</span>px → <code>.m-r-0</code>
- </div>
- <div class="col-md-2">
- <span class="col-red font-bold">M</span>argin <span class="col-red font-bold">R</span>ight <span class="col-red font-bold">-30</span>px → <code>.m-r--30</code>
- </div>
- <div class="col-md-2">
- <span class="col-red font-bold">ALL M</span>argin <span class="col-red font-bold">0</span>px → <code>.margin-0</code>
- </div>
- </div>
- <p class="m-t-25">
- <b>Paddings</b>
- </p>
- <div class="row clearfix">
- <div class="col-md-2">
- <span class="col-red font-bold">P</span>adding <span class="col-red font-bold">T</span>op <span class="col-red font-bold">10</span>px → <code>.p-t-10</code>
- </div>
- <div class="col-md-2">
- <span class="col-red font-bold">P</span>adding <span class="col-red font-bold">T</span>op <span class="col-red font-bold">0</span>px → <code>.p-t-0</code>
- </div>
- <div class="col-md-2">
- <span class="col-red font-bold">P</span>adding <span class="col-red font-bold">L</span>eft <span class="col-red font-bold">35</span>px → <code>.p-l-35</code>
- </div>
- <div class="col-md-2">
- <span class="col-red font-bold">P</span>adding <span class="col-red font-bold">L</span>eft <span class="col-red font-bold">0</span>px → <code>.p-l-0</code>
- </div>
- <div class="col-md-2">
- <span class="col-red font-bold">P</span>adding <span class="col-red font-bold">B</span>ottom <span class="col-red font-bold">15</span>px → <code>.p-b-15</code>
- </div>
- <div class="col-md-2">
- <span class="col-red font-bold">P</span>adding <span class="col-red font-bold">B</span>ottom <span class="col-red font-bold">0</span>px → <code>.p-b-0</code>
- </div>
- <div class="col-md-2">
- <span class="col-red font-bold">P</span>adding <span class="col-red font-bold">R</span>ight <span class="col-red font-bold">30</span>px → <code>.p-r-30</code>
- </div>
- <div class="col-md-2">
- <span class="col-red font-bold">P</span>adding <span class="col-red font-bold">R</span>ight <span class="col-red font-bold">0</span>px → <code>.p-r-0</code>
- </div>
- <div class="col-md-2">
- <span class="col-red font-bold">ALL P</span>adding <span class="col-red font-bold">0</span>px → <code>.padding-0</code>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
-
-
- <div class="row clearfix">
- <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
- <div class="card">
- <div class="header">
- <h2>
- SPECIAL CLASSES FOR EVERY BROWSERS
- <small>When the user start the usage this theme, we put the browser info inside the <code>html</code> as class</small>
- </h2>
- <ul class="header-dropdown m-r--5">
- <li class="dropdown">
- <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
- <i class="material-icons">more_vert</i>
- </a>
- <ul class="dropdown-menu pull-right">
- <li><a href="javascript:void(0);">Action</a></li>
- <li><a href="javascript:void(0);">Another action</a></li>
- <li><a href="javascript:void(0);">Something else here</a></li>
- </ul>
- </li>
- </ul>
- </div>
- <div class="body">
- Putting classes are <code>.ie10, .ie11, .edge, .opera, .chrome, .firefox, .safari</code> to class inside of <code>html</code> element. So you can create new classes for run only you specified browser(s).
- <p class="m-t-25"><b>Example</b></p>
- <pre><code class="language-css"><b>/* It will be work only IE10 */</b>
- html.ie10 .menu .list {
- background-color: #CC0000;
- }
- <b>/* It will be work only Google Chrome */</b>
- html.chrome .right-sidebar .header {
- font-size: 15px;
- font-weight: bold;
- }</code></pre><p> </p>
- </div>
- </div>
- </div>
- </div>
-
- </div>
- </section>
-
- <script src="../plugins/jquery/jquery.min.js"></script>
-
- <script src="../plugins/bootstrap/js/bootstrap.js"></script>
-
- <script src="../plugins/bootstrap-select/js/bootstrap-select.js"></script>
-
- <script src="../plugins/jquery-slimscroll/jquery.slimscroll.js"></script>
-
- <script src="../plugins/node-waves/waves.js"></script>
-
- <script src="../js/admin.js"></script>
-
- <script src="../js/demo.js"></script>
- </body>
- </html>
|