v4 initial commit

src/assets/icons/icons.js

@@ -20,17 +20,10 @@ import {
   cibCcVisa,
   cibStripe,
   cibPaypal,
-  cibGooglePay, 
+  cibGooglePay,
   cibCcAmex
-} from '@coreui/icons'
-import {
-  cifUs,
-  cifBr,
-  cifIn,
-  cifFr,
-  cifEs,
-  cifPl
-} from '@coreui/icons'
+} from "@coreui/icons";
+import { cifUs, cifBr, cifIn, cifFr, cifEs, cifPl } from "@coreui/icons";
 import {
   cilArrowRight,
   cilBan,
@@ -44,6 +37,7 @@ import {
   cilChevronBottom,
   cilChevronTop,
   cilCheckCircle,
+  cilCode,
   cilCommentSquare,
   cilCursor,
   cilDrop,
@@ -62,6 +56,8 @@ import {
   cilLocationPin,
   cilLockLocked,
   cilMagnifyingGlass,
+  cilMediaPlay,
+  cilMenu,
   cilMoon,
   cilOptions,
   cilPencil,
@@ -77,9 +73,8 @@ import {
   cilUserFemale,
   cilUserFollow,
   cilXCircle
-
-} from '@coreui/icons'
-import { logo } from './logo'
+} from "@coreui/icons";
+import { logo } from "./logo";
 
 export const iconsSet = Object.assign(
   {},
@@ -97,6 +92,7 @@ export const iconsSet = Object.assign(
     cilChevronBottom,
     cilChevronTop,
     cilCheckCircle,
+    cilCode,
     cilCommentSquare,
     cilCursor,
     cilDrop,
@@ -115,6 +111,8 @@ export const iconsSet = Object.assign(
     cilLocationPin,
     cilLockLocked,
     cilMagnifyingGlass,
+    cilMediaPlay,
+    cilMenu,
     cilMoon,
     cilOptions,
     cilPencil,
@@ -157,11 +155,11 @@ export const iconsSet = Object.assign(
     cibBehance,
     cibReddit,
     cibVimeo,
-    cibCcMastercard, 
-    cibCcVisa, 
-    cibStripe, 
-    cibPaypal, 
+    cibCcMastercard,
+    cibCcVisa,
+    cibStripe,
+    cibPaypal,
     cibGooglePay,
     cibCcAmex
   }
-)
+);

src/assets/scss/_example.scss

@@ -0,0 +1,109 @@
+.example {
+  &:not(:first-child) {
+    margin-top: 1.5rem;
+  }
+
+  .tab-content {
+    background-color: $light-50 !important;
+
+    @at-root .dark-theme & {
+      background-color: rgba(255, 255, 255, .1) !important;
+    }
+  }
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    font-size: .875rem !important;
+  }
+
+  :not(pre) > code[class*="language-"],
+  pre[class*="language-"] {
+    background: transparent;
+  }
+
+  & + p {
+    margin-top: 1.5rem
+  }
+
+  // Components examples
+  .preview,
+  .preview .col {
+    + p {
+      margin-top: 2rem;
+    }
+
+    > .form-control {
+      + .form-control {
+        margin-top: .5rem;
+      }
+    }
+
+    > .nav + .nav,
+    > .alert + .alert,
+    > .navbar + .navbar,
+    > .progress + .progress {
+      margin-top: 1rem;
+    }
+
+    > .dropdown-menu {
+      position: static;
+      display: block;
+    }
+
+    > :last-child {
+      margin-bottom: 0;
+    }
+
+    // Images
+    > svg + svg,
+    > img + img {
+      margin-left: .5rem;
+    }
+
+    // Buttons
+    > .btn,
+    > .btn-group {
+      margin: .25rem .125rem;
+    }
+    > .btn-toolbar + .btn-toolbar {
+      margin-top: .5rem;
+    }
+
+    // List groups
+    > .list-group {
+      max-width: 400px;
+    }
+
+    > [class*="list-group-horizontal"] {
+      max-width: 100%;
+    }
+
+    // Navbars
+    .fixed-top,
+    .sticky-top {
+      position: static;
+      margin: -1rem -1rem 1rem;
+    }
+
+    .fixed-bottom {
+      position: static;
+      margin: 1rem -1rem -1rem;
+    }
+
+    @include media-breakpoint-up(sm) {
+      .fixed-top,
+      .sticky-top {
+        margin: -1.5rem -1.5rem 1rem;
+      }
+      .fixed-bottom {
+        margin: 1rem -1.5rem -1.5rem;
+      }
+    }
+
+    // Pagination
+    .pagination {
+      margin-top: .5rem;
+      margin-bottom: .5rem;
+    }
+  }
+}

src/assets/scss/_layout.scss

@@ -0,0 +1,6 @@
+.wrapper {
+  width: 100%;
+  @include ltr-rtl("padding-left", var(--cui-sidebar-occupy-start, 0));
+  will-change: auto;
+  @include transition(padding .15s);
+}

src/assets/scss/style.scss

@@ -1,17 +1,14 @@
 // If you want to override variables do it here
 @import "variables";
 
+$enable-ltr: true;
+$enable-rtl: true;
+
 // Import styles
 @import "~@coreui/coreui/scss/coreui";
 
+@import "layout";
+@import "example";
+
 // If you want to add something do it here
 @import "custom";
-
-.card-header:not(.content-center) > .c-icon:first-child {
-  margin-right: 0.1rem;
-  margin-top: 0.1rem;
-  vertical-align: top;
-  width: 1.2rem;
-  height: 1.2rem;
-  font-size: 1.2rem;
-}