Home Explore Help
Register Sign In
wilson.silva
/
AdminLte
mirror of https://github.com/almasaeed2010/AdminLTE
1
0
Fork 0
Files Issues 0 Wiki
Browse Source

widgets.html page added

Daniel 3 years ago
parent
01e5b1ce2c
commit
20a53c6c95
8 changed files with 553 additions and 11 deletions
Split View Show Diff Stats
  1. 4 4
      src/index.html
  2. 7 7
      src/index2.html
  3. 419 0
      src/pages/widgets.html
  4. 9 0
      src/partials/dashboard/_sidenav.html
  5. 81 0
      src/scss/_colors.scss
  6. 1 0
      src/scss/_mixins.scss
  7. 31 0
      src/scss/mixins/_backgrounds.scss
  8. 1 0
      src/scss/parts/_miscellaneous.scss

+ 4 - 4
src/index.html
View File 

@@ -31,7 +31,7 @@
 
             <div class="row">
 
               <div class="col-lg-3 col-6">
 
                 <!-- small box -->
 
-                <div class="small-box bg-primary text-light">
 
+                <div class="small-box bg-primary">
 
                   <div class="inner">
 
                     <h3>150</h3>
 
 
@@ -46,7 +46,7 @@
 
               <!-- ./col -->
 
               <div class="col-lg-3 col-6">
 
                 <!-- small box -->
 
-                <div class="small-box bg-success text-light">
 
+                <div class="small-box bg-success">
 
                   <div class="inner">
 
                     <h3>53<sup class="fs-5">%</sup></h3>
 
 
@@ -61,7 +61,7 @@
 
               <!-- ./col -->
 
               <div class="col-lg-3 col-6">
 
                 <!-- small box -->
 
-                <div class="small-box bg-warning text-light">
 
+                <div class="small-box bg-warning">
 
                   <div class="inner">
 
                     <h3>44</h3>
 
 
@@ -76,7 +76,7 @@
 
               <!-- ./col -->
 
               <div class="col-lg-3 col-6">
 
                 <!-- small box -->
 
-                <div class="small-box bg-danger text-light">
 
+                <div class="small-box bg-danger">
 
                   <div class="inner">
 
                     <h3>65</h3>

+ 7 - 7
src/index2.html
View File 

@@ -30,7 +30,7 @@
 
             <div class="row">
 
               <div class="col-12 col-sm-6 col-md-3">
 
                 <div class="info-box">
 
-                  <span class="info-box-icon bg-info text-light"><i class="fas fa-cog"></i></span>
 
+                  <span class="info-box-icon bg-primary shadow-sm"><i class="fas fa-cog"></i></span>
 
 
                   <div class="info-box-content">
 
                     <span class="info-box-text">CPU Traffic</span>
 
@@ -45,8 +45,8 @@
 
               </div>
 
               <!-- /.col -->
 
               <div class="col-12 col-sm-6 col-md-3">
 
-                <div class="info-box mb-3">
 
-                  <span class="info-box-icon bg-danger text-light"><i class="fas fa-thumbs-up"></i></span>
 
+                <div class="info-box">
 
+                  <span class="info-box-icon bg-danger shadow-sm"><i class="fas fa-thumbs-up"></i></span>
 
 
                   <div class="info-box-content">
 
                     <span class="info-box-text">Likes</span>
 
@@ -62,8 +62,8 @@
 
               <!-- <div class="clearfix hidden-md-up"></div> -->
 
 
               <div class="col-12 col-sm-6 col-md-3">
 
-                <div class="info-box mb-3">
 
-                  <span class="info-box-icon bg-success text-light"><i class="fas fa-shopping-cart"></i></span>
 
+                <div class="info-box">
 
+                  <span class="info-box-icon bg-success shadow-sm"><i class="fas fa-shopping-cart"></i></span>
 
 
                   <div class="info-box-content">
 
                     <span class="info-box-text">Sales</span>
 
@@ -75,8 +75,8 @@
 
               </div>
 
               <!-- /.col -->
 
               <div class="col-12 col-sm-6 col-md-3">
 
-                <div class="info-box mb-3">
 
-                  <span class="info-box-icon bg-warning text-light"><i class="fas fa-users"></i></span>
 
+                <div class="info-box">
 
+                  <span class="info-box-icon bg-warning shadow-sm"><i class="fas fa-users"></i></span>
 
 
                   <div class="info-box-content">
 
                     <span class="info-box-text">New Members</span>

+ 419 - 0
src/pages/widgets.html
View File 

@@ -0,0 +1,419 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<!-- For RTL verison -->
 
+<!-- <html lang="en" dir="rtl"> -->
 
+  <head>
 
+    @@include('./_head.html', {
 
+      "path": "../",
 
+      "title": "AdminLTE 4 | General Form Elements"
 
+    })
 
+    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
 
+  </head>
 
+  <body class="layout-fixed">
 
+    <div class="wrapper">
 
+      @@include('./dashboard/_topbar.html', {
 
+        "path": "../"
 
+      })
 
+
 
+      @@include('./dashboard/_sidenav.html', {
 
+        "mainPage": "pages",
 
+        "page": "widgets",
 
+        "path": "../"
 
+      })
 
+      <!-- Main content -->
 
+      <div class="content-wrapper">
 
+        @@include('./dashboard/_content-header.html', {
 
+          "header_name": "Widgets"
 
+        })
 
+        <!-- Main content -->
 
+        <div class="content">
 
+          <div class="container-fluid">
 
+            <h5 class="mb-2">Info Box</h5>
 
+            <div class="row">
 
+              <div class="col-12 col-sm-6 col-md-3">
 
+                <div class="info-box">
 
+                  <span class="info-box-icon bg-primary shadow-sm"><i class="fas fa-cog"></i></span>
 
+
 
+                  <div class="info-box-content">
 
+                    <span class="info-box-text">CPU Traffic</span>
 
+                    <span class="info-box-number">
 
+                      10
 
+                      <small>%</small>
 
+                    </span>
 
+                  </div>
 
+                  <!-- /.info-box-content -->
 
+                </div>
 
+                <!-- /.info-box -->
 
+              </div>
 
+              <!-- /.col -->
 
+
 
+              <div class="col-12 col-sm-6 col-md-3">
 
+                <div class="info-box">
 
+                  <span class="info-box-icon bg-success shadow-sm"><i class="fas fa-shopping-cart"></i></span>
 
+
 
+                  <div class="info-box-content">
 
+                    <span class="info-box-text">Sales</span>
 
+                    <span class="info-box-number">760</span>
 
+                  </div>
 
+                  <!-- /.info-box-content -->
 
+                </div>
 
+                <!-- /.info-box -->
 
+              </div>
 
+              <!-- /.col -->
 
+
 
+              <!-- fix for small devices only -->
 
+              <!-- <div class="clearfix hidden-md-up"></div> -->
 
+
 
+              <div class="col-12 col-sm-6 col-md-3">
 
+                <div class="info-box">
 
+                  <span class="info-box-icon bg-warning shadow-sm"><i class="fas fa-users"></i></span>
 
+
 
+                  <div class="info-box-content">
 
+                    <span class="info-box-text">New Members</span>
 
+                    <span class="info-box-number">2,000</span>
 
+                  </div>
 
+                  <!-- /.info-box-content -->
 
+                </div>
 
+                <!-- /.info-box -->
 
+              </div>
 
+              <!-- /.col -->
 
+
 
+              <div class="col-12 col-sm-6 col-md-3">
 
+                <div class="info-box">
 
+                  <span class="info-box-icon bg-danger shadow-sm"><i class="fas fa-thumbs-up"></i></span>
 
+
 
+                  <div class="info-box-content">
 
+                    <span class="info-box-text">Likes</span>
 
+                    <span class="info-box-number">41,410</span>
 
+                  </div>
 
+                  <!-- /.info-box-content -->
 
+                </div>
 
+                <!-- /.info-box -->
 
+              </div>
 
+              <!-- /.col -->
 
+            </div>
 
+            <!-- /.row -->
 
+
 
+            <!-- =========================================================== -->
 
+            <h5 class="mb-2">Info Box With Custom Shadows <small><i>Using Bootstrap's Shadow Utility</i></small></h5>
 
+            <div class="row">
 
+              <div class="col-12 col-sm-6 col-md-3">
 
+                <div class="info-box shadow-none">
 
+                  <span class="info-box-icon bg-primary shadow-sm"><i class="fas fa-cog"></i></span>
 
+
 
+                  <div class="info-box-content">
 
+                    <span class="info-box-text">CPU Traffic</span>
 
+                    <span class="info-box-number">
 
+                      10
 
+                      <small>%</small>
 
+                    </span>
 
+                  </div>
 
+                  <!-- /.info-box-content -->
 
+                </div>
 
+                <!-- /.info-box -->
 
+              </div>
 
+              <!-- /.col -->
 
+
 
+              <div class="col-12 col-sm-6 col-md-3">
 
+                <div class="info-box shadow-sm">
 
+                  <span class="info-box-icon bg-success shadow-sm"><i class="fas fa-shopping-cart"></i></span>
 
+
 
+                  <div class="info-box-content">
 
+                    <span class="info-box-text">Sales</span>
 
+                    <span class="info-box-number">760</span>
 
+                  </div>
 
+                  <!-- /.info-box-content -->
 
+                </div>
 
+                <!-- /.info-box -->
 
+              </div>
 
+              <!-- /.col -->
 
+
 
+              <!-- fix for small devices only -->
 
+              <!-- <div class="clearfix hidden-md-up"></div> -->
 
+
 
+              <div class="col-12 col-sm-6 col-md-3">
 
+                <div class="info-box shadow">
 
+                  <span class="info-box-icon bg-warning shadow-sm"><i class="fas fa-users"></i></span>
 
+
 
+                  <div class="info-box-content">
 
+                    <span class="info-box-text">New Members</span>
 
+                    <span class="info-box-number">2,000</span>
 
+                  </div>
 
+                  <!-- /.info-box-content -->
 
+                </div>
 
+                <!-- /.info-box -->
 
+              </div>
 
+              <!-- /.col -->
 
+
 
+              <div class="col-12 col-sm-6 col-md-3">
 
+                <div class="info-box shadow-lg">
 
+                  <span class="info-box-icon bg-danger shadow-sm"><i class="fas fa-thumbs-up"></i></span>
 
+
 
+                  <div class="info-box-content">
 
+                    <span class="info-box-text">Likes</span>
 
+                    <span class="info-box-number">41,410</span>
 
+                  </div>
 
+                  <!-- /.info-box-content -->
 
+                </div>
 
+                <!-- /.info-box -->
 
+              </div>
 
+              <!-- /.col -->
 
+            </div>
 
+            <!-- /.row -->
 
+
 
+            <!-- =========================================================== -->
 
+            <h5 class="mt-4 mb-2">Info Box With <code>bg-*</code></h5>
 
+            <div class="row">
 
+              <div class="col-md-3 col-sm-6 col-12">
 
+                <div class="info-box bg-primary">
 
+                  <span class="info-box-icon"><i class="far fa-bookmark"></i></span>
 
+
 
+                  <div class="info-box-content">
 
+                    <span class="info-box-text">Bookmarks</span>
 
+                    <span class="info-box-number">41,410</span>
 
+
 
+                    <div class="progress">
 
+                      <div class="progress-bar" style="width: 70%"></div>
 
+                    </div>
 
+                    <span class="progress-description">
 
+                      70% Increase in 30 Days
 
+                    </span>
 
+                  </div>
 
+                  <!-- /.info-box-content -->
 
+                </div>
 
+                <!-- /.info-box -->
 
+              </div>
 
+              <!-- /.col -->
 
+              <div class="col-md-3 col-sm-6 col-12">
 
+                <div class="info-box bg-success">
 
+                  <span class="info-box-icon"><i class="far fa-thumbs-up"></i></span>
 
+
 
+                  <div class="info-box-content">
 
+                    <span class="info-box-text">Likes</span>
 
+                    <span class="info-box-number">41,410</span>
 
+
 
+                    <div class="progress">
 
+                      <div class="progress-bar" style="width: 70%"></div>
 
+                    </div>
 
+                    <span class="progress-description">
 
+                      70% Increase in 30 Days
 
+                    </span>
 
+                  </div>
 
+                  <!-- /.info-box-content -->
 
+                </div>
 
+                <!-- /.info-box -->
 
+              </div>
 
+              <!-- /.col -->
 
+              <div class="col-md-3 col-sm-6 col-12">
 
+                <div class="info-box bg-warning">
 
+                  <span class="info-box-icon"><i class="far fa-calendar-alt"></i></span>
 
+
 
+                  <div class="info-box-content">
 
+                    <span class="info-box-text">Events</span>
 
+                    <span class="info-box-number">41,410</span>
 
+
 
+                    <div class="progress">
 
+                      <div class="progress-bar" style="width: 70%"></div>
 
+                    </div>
 
+                    <span class="progress-description">
 
+                      70% Increase in 30 Days
 
+                    </span>
 
+                  </div>
 
+                  <!-- /.info-box-content -->
 
+                </div>
 
+                <!-- /.info-box -->
 
+              </div>
 
+              <!-- /.col -->
 
+              <div class="col-md-3 col-sm-6 col-12">
 
+                <div class="info-box bg-danger">
 
+                  <span class="info-box-icon"><i class="fas fa-comments"></i></span>
 
+
 
+                  <div class="info-box-content">
 
+                    <span class="info-box-text">Comments</span>
 
+                    <span class="info-box-number">41,410</span>
 
+
 
+                    <div class="progress">
 
+                      <div class="progress-bar" style="width: 70%"></div>
 
+                    </div>
 
+                    <span class="progress-description">
 
+                      70% Increase in 30 Days
 
+                    </span>
 
+                  </div>
 
+                  <!-- /.info-box-content -->
 
+                </div>
 
+                <!-- /.info-box -->
 
+              </div>
 
+              <!-- /.col -->
 
+            </div>
 
+            <!-- /.row -->
 
+
 
+            <!-- =========================================================== -->
 
+            <h5 class="mt-4 mb-2">Info Box With <code>bg-gradient</code></h5>
 
+            <div class="row">
 
+              <div class="col-md-3 col-sm-6 col-12">
 
+                <div class="info-box bg-primary bg-gradient">
 
+                  <span class="info-box-icon"><i class="far fa-bookmark"></i></span>
 
+
 
+                  <div class="info-box-content">
 
+                    <span class="info-box-text">Bookmarks</span>
 
+                    <span class="info-box-number">41,410</span>
 
+
 
+                    <div class="progress">
 
+                      <div class="progress-bar" style="width: 70%"></div>
 
+                    </div>
 
+                    <span class="progress-description">
 
+                      70% Increase in 30 Days
 
+                    </span>
 
+                  </div>
 
+                  <!-- /.info-box-content -->
 
+                </div>
 
+                <!-- /.info-box -->
 
+              </div>
 
+              <!-- /.col -->
 
+              <div class="col-md-3 col-sm-6 col-12">
 
+                <div class="info-box bg-success bg-gradient">
 
+                  <span class="info-box-icon"><i class="far fa-thumbs-up"></i></span>
 
+
 
+                  <div class="info-box-content">
 
+                    <span class="info-box-text">Likes</span>
 
+                    <span class="info-box-number">41,410</span>
 
+
 
+                    <div class="progress">
 
+                      <div class="progress-bar" style="width: 70%"></div>
 
+                    </div>
 
+                    <span class="progress-description">
 
+                      70% Increase in 30 Days
 
+                    </span>
 
+                  </div>
 
+                  <!-- /.info-box-content -->
 
+                </div>
 
+                <!-- /.info-box -->
 
+              </div>
 
+              <!-- /.col -->
 
+              <div class="col-md-3 col-sm-6 col-12">
 
+                <div class="info-box bg-warning bg-gradient">
 
+                  <span class="info-box-icon"><i class="far fa-calendar-alt"></i></span>
 
+
 
+                  <div class="info-box-content">
 
+                    <span class="info-box-text">Events</span>
 
+                    <span class="info-box-number">41,410</span>
 
+
 
+                    <div class="progress">
 
+                      <div class="progress-bar" style="width: 70%"></div>
 
+                    </div>
 
+                    <span class="progress-description">
 
+                      70% Increase in 30 Days
 
+                    </span>
 
+                  </div>
 
+                  <!-- /.info-box-content -->
 
+                </div>
 
+                <!-- /.info-box -->
 
+              </div>
 
+              <!-- /.col -->
 
+              <div class="col-md-3 col-sm-6 col-12">
 
+                <div class="info-box bg-danger bg-gradient">
 
+                  <span class="info-box-icon"><i class="fas fa-comments"></i></span>
 
+
 
+                  <div class="info-box-content">
 
+                    <span class="info-box-text">Comments</span>
 
+                    <span class="info-box-number">41,410</span>
 
+
 
+                    <div class="progress">
 
+                      <div class="progress-bar" style="width: 70%"></div>
 
+                    </div>
 
+                    <span class="progress-description">
 
+                      70% Increase in 30 Days
 
+                    </span>
 
+                  </div>
 
+                  <!-- /.info-box-content -->
 
+                </div>
 
+                <!-- /.info-box -->
 
+              </div>
 
+              <!-- /.col -->
 
+            </div>
 
+            <!-- /.row -->
 
+
 
+            <!-- =========================================================== -->
 
+
 
+            <!-- Small Box (Stat card) -->
 
+            <h5 class="mb-2 mt-4">Small Box</h5>
 
+            <div class="row">
 
+              <div class="col-lg-3 col-6">
 
+                <!-- small box -->
 
+                <div class="small-box bg-primary">
 
+                  <div class="inner">
 
+                    <h3>150</h3>
 
+
 
+                    <p>New Orders</p>
 
+                  </div>
 
+                  <div class="icon">
 
+                    <i class="inner-icon ion ion-bag"></i>
 
+                  </div>
 
+                  <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
 
+                </div>
 
+              </div>
 
+              <!-- ./col -->
 
+              <div class="col-lg-3 col-6">
 
+                <!-- small box -->
 
+                <div class="small-box bg-success">
 
+                  <div class="inner">
 
+                    <h3>53<sup class="fs-5">%</sup></h3>
 
+
 
+                    <p>Bounce Rate</p>
 
+                  </div>
 
+                  <div class="icon">
 
+                    <i class="inner-icon ion ion-stats-bars"></i>
 
+                  </div>
 
+                  <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
 
+                </div>
 
+              </div>
 
+              <!-- ./col -->
 
+              <div class="col-lg-3 col-6">
 
+                <!-- small box -->
 
+                <div class="small-box bg-warning">
 
+                  <div class="inner">
 
+                    <h3>44</h3>
 
+
 
+                    <p>User Registrations</p>
 
+                  </div>
 
+                  <div class="icon">
 
+                    <i class="inner-icon ion ion-person-add"></i>
 
+                  </div>
 
+                  <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
 
+                </div>
 
+              </div>
 
+              <!-- ./col -->
 
+              <div class="col-lg-3 col-6">
 
+                <!-- small box -->
 
+                <div class="small-box bg-danger">
 
+                  <div class="inner">
 
+                    <h3>65</h3>
 
+
 
+                    <p>Unique Visitors</p>
 
+                  </div>
 
+                  <div class="icon">
 
+                    <i class="inner-icon ion ion-pie-graph"></i>
 
+                  </div>
 
+                  <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
 
+                </div>
 
+              </div>
 
+              <!-- ./col -->
 
+            </div>
 
+            <!-- /.row -->
 
+          </div><!-- /.container-fluid -->
 
+        </div>
 
+        <!-- /.content -->
 
+      </div>
 
+      <!-- /.content-wrapper -->
 
+
 
+      @@include('./dashboard/_footer.html', {
 
+        "path": "../"
 
+      })
 
+    </div>
 
+    <!--  ./wrapper -->
 
+
 
+    @@include('./_scripts.html', {
 
+      "path": "../"
 
+    })
 
+  </body>
 
+</html>

+ 9 - 0
src/partials/dashboard/_sidenav.html
View File 

@@ -47,6 +47,15 @@
 
             </li>
 
           </ul>
 
         </li>
 
+        <li class="nav-item">
 
+          <a href="@@path/pages/widgets.html" class="nav-link @@if (context.page === 'widgets') {active}">
 
+            <i class="nav-icon fas fa-circle"></i>
 
+            <p>
 
+              Widgets
 
+              <span class="right badge bg-danger">New</span>
 
+            </p>
 
+          </a>
 
+        </li>
 
         <li class="nav-item @@if (context.mainPage === 'forms') {menu-open}">
 
           <a href="#" class="nav-link @@if (context.mainPage === 'forms') {active}">
 
             <i class="nav-icon fas fa-circle"></i>

+ 81 - 0
src/scss/_colors.scss
View File 

@@ -0,0 +1,81 @@
 
+//
 
+// Misc: Colors
 
+//
 
+
 
+// Background colors (theme colors)
 
+@each $name, $color in $theme-colors {
 
+  @include background-variant($name, $color);
 
+}
 
+
 
+// Background colors (colors)
 
+@each $name, $color in $colors {
 
+  @include background-variant($name, $color);
 
+}
 
+
 
+.bg-gray {
 
+  background-color: $gray-500;
 
+  color: color-contrast($gray-500);
 
+}
 
+
 
+.bg-gray-light {
 
+  background-color: tint-color($gray-200, 3%);
 
+  color: color-contrast(tint-color($gray-200, 3%)) !important;
 
+}
 
+
 
+.bg-black {
 
+  background-color: $black;
 
+  color: color-contrast($black) !important;
 
+}
 
+
 
+.bg-white {
 
+  background-color: $white;
 
+  color: color-contrast($white) !important;
 
+}
 
+
 
+// Backgrund Color Disabled
 
+[class^="bg-"].disabled {
 
+  opacity: .65;
 
+}
 
+
 
+// Text muted hover
 
+a.text-muted:hover {
 
+  color: $primary !important;
 
+}
 
+
 
+// Link Styles
 
+.link-muted {
 
+  color: shade-color($gray-500, 30%);
 
+
 
+  &:hover,
 
+  &:focus {
 
+    color: shade-color($gray-500, 40%);
 
+  }
 
+}
 
+
 
+.link-black {
 
+  color: $gray-600;
 
+
 
+  &:hover,
 
+  &:focus {
 
+    color: tint-color($gray-500, 20%);
 
+  }
 
+}
 
+
 
+// // Accent colors (theme colors)
 
+// @each $name, $color in $theme-colors {
 
+//   @include accent-variant($name, $color);
 
+// }
 
+
 
+// // Accent colors (colors)
 
+// @each $name, $color in $colors {
 
+//   @include accent-variant($name, $color);
 
+// }
 
+
 
+// Accent button override fix
 
+[class*="accent-"] {
 
+  @each $name, $color in $theme-colors {
 
+    a.btn-#{$name} {
 
+      color: color-contrast($color);
 
+    }
 
+  }
 
+}

+ 1 - 0
src/scss/_mixins.scss
View File 

@@ -10,4 +10,5 @@
 
 @import "mixins/nav-treeview-dark";
 
 @import "mixins/nav-treeview-light";
 
 @import "mixins/cards";
 
+@import "mixins/backgrounds";
 
 @import "mixins/miscellaneous";

+ 31 - 0
src/scss/mixins/_backgrounds.scss
View File 

@@ -0,0 +1,31 @@
 
+//
 
+// Mixins: Backgrounds
 
+//
 
+
 
+// Background Variant
 
+@mixin background-variant($name, $color) {
 
+  .bg-#{$name} {
 
+    background-color: #{$color} !important;
 
+
 
+    &,
 
+    > a {
 
+      color: color-contrast($color) !important;
 
+    }
 
+
 
+    &.btn {
 
+      &:hover {
 
+        border-color: shade-color($color, 10%);
 
+        color: shade-color(color-contrast($color), 7.5%);
 
+      }
 
+
 
+      &:not(:disabled):not(.disabled):active,
 
+      &:not(:disabled):not(.disabled).active,
 
+      &:active,
 
+      &.active {
 
+        background-color: shade-color($color, 10%) !important;
 
+        border-color: shade-color($color, 12.5%);
 
+        color: color-contrast(shade-color($color, 10%));
 
+      }
 
+    }
 
+  }
 
+}

+ 1 - 0
src/scss/parts/_miscellaneous.scss
View File 

@@ -4,3 +4,4 @@
 
 
 @import "../miscellaneous";
 
 @import "../text";
 
+@import "../colors";