addtheme

user/themes/lecampus/scss/configurations/_mixins.scss

@@ -0,0 +1,77 @@
+@mixin breakpoint($point) {
+  @if $point == 2x {
+    @media (min-width:$size-2x) {
+      @content;
+    }
+  } @else if $point == xl {
+    @media (max-width: $size-xl) {
+      @content;
+    }
+
+  } @else if $point == lg {
+    @media (max-width: $size-lg) {
+      @content;
+    }
+  } @else if $point == md {
+    @media (max-width: $size-md) {
+      @content;
+    }
+  } @else if $point == sm {
+    @media (max-width: $size-sm) {
+      @content;
+    }
+  } @else if $point == xs {
+    @media (max-width: $size-xs) {
+      @content;
+    }
+  }  @else {
+    @warn "Breakpoint mixin supports: xs, sm, md, lg, xl, 2x";
+  }
+}
+
+@mixin vertical-align($position: relative) {
+  position: $position;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+@mixin button-primary() {
+  background: $primary-color;
+  border-color: $primary-color-dark;
+  color: $light-color;
+  &:focus,
+  &:hover {
+    background: darken($primary-color-dark, 2%);
+    border-color: darken($primary-color-dark, 5%);
+    color: $light-color;
+  }
+  &:active,
+  &.active {
+    background: darken($primary-color-dark, 4%);
+    border-color: darken($primary-color-dark, 7%);
+    color: $light-color;
+  }
+}
+
+@function strip-unit($value) {
+  @return $value / ($value * 0 + 1);
+}
+
+@mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) {
+  $u1: unit($min-vw);
+  $u2: unit($max-vw);
+  $u3: unit($min-font-size);
+  $u4: unit($max-font-size);
+
+  @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
+    & {
+      font-size: $min-font-size;
+      @media screen and (min-width: $min-vw) {
+        font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
+      }
+      @media screen and (min-width: $max-vw) {
+        font-size: $max-font-size;
+      }
+    }
+  }
+}

user/themes/lecampus/scss/configurations/_variables.scss

@@ -0,0 +1,77 @@
+@mixin breakpoint($point) {
+  @if $point == 2x {
+    @media (min-width:$size-2x) {
+      @content;
+    }
+  } @else if $point == xl {
+    @media (max-width: $size-xl) {
+      @content;
+    }
+
+  } @else if $point == lg {
+    @media (max-width: $size-lg) {
+      @content;
+    }
+  } @else if $point == md {
+    @media (max-width: $size-md) {
+      @content;
+    }
+  } @else if $point == sm {
+    @media (max-width: $size-sm) {
+      @content;
+    }
+  } @else if $point == xs {
+    @media (max-width: $size-xs) {
+      @content;
+    }
+  }  @else {
+    @warn "Breakpoint mixin supports: xs, sm, md, lg, xl, 2x";
+  }
+}
+
+@mixin vertical-align($position: relative) {
+  position: $position;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+@mixin button-primary() {
+  background: $primary-color;
+  border-color: $primary-color-dark;
+  color: $light-color;
+  &:focus,
+  &:hover {
+    background: darken($primary-color-dark, 2%);
+    border-color: darken($primary-color-dark, 5%);
+    color: $light-color;
+  }
+  &:active,
+  &.active {
+    background: darken($primary-color-dark, 4%);
+    border-color: darken($primary-color-dark, 7%);
+    color: $light-color;
+  }
+}
+
+@function strip-unit($value) {
+  @return $value / ($value * 0 + 1);
+}
+
+@mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) {
+  $u1: unit($min-vw);
+  $u2: unit($max-vw);
+  $u3: unit($min-font-size);
+  $u4: unit($max-font-size);
+
+  @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
+    & {
+      font-size: $min-font-size;
+      @media screen and (min-width: $min-vw) {
+        font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
+      }
+      @media screen and (min-width: $max-vw) {
+        font-size: $max-font-size;
+      }
+    }
+  }
+}

user/themes/lecampus/scss/theme.scss

@@ -0,0 +1,13 @@
+// Core variables and mixins
+@import 'configurations/variables';
+@import 'configurations/mixins';
+
+@import 'theme/animation';
+@import 'theme/typography';;
+
+@import 'theme/header';
+@import 'theme/menu';
+@import 'theme/footer';
+
+// Extra Skeleton Styling
+@import 'theme/blog';

user/themes/lecampus/scss/theme/_animation.scss

@@ -0,0 +1,23 @@
+.default-animation {
+  transition: all 0.5s ease;
+}
+
+// Pulse Animation
+.pulse {
+  animation-name: pulse_animation;
+  animation-duration: 2000ms;
+  transform-origin:70% 70%;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+
+@keyframes pulse_animation {
+  0% { transform: scale(1); }
+  30% { transform: scale(1); }
+  40% { transform: scale(1.08); }
+  50% { transform: scale(1); }
+  60% { transform: scale(1); }
+  70% { transform: scale(1.05); }
+  80% { transform: scale(1); }
+  100% { transform: scale(1); }
+}

user/themes/lecampus/scss/theme/_blog.scss

@@ -0,0 +1,113 @@
+/** Extra columns spacing **/
+.extra-spacing:not(.col-12), :not(.col12) > .e-content {
+  padding-right: 1rem;
+
+  @include breakpoint(md) {
+    padding-right: 0;
+  }
+}
+
+/** Breadcrumbs styling **/
+#breadcrumbs {
+  padding-left: 0;
+  display: flex;
+  align-items: center;
+  margin-top: -1rem;
+  margin-bottom: 1rem;
+
+
+  i {
+    display: none;
+  }
+
+  span, a {
+    padding: 0 0.5rem;
+    &:first-child {
+      padding-left: 0;
+    }
+  }
+
+  span, a {
+    &:not(:first-child)::before {
+      color: #e7e9ed;
+      content: "/";
+      padding-right: 1rem;
+    }
+  }
+}
+
+/** Blog Listing **/
+.blog-listing {
+
+  .bricklayer-column {
+    padding-left: 0px;
+    padding-right: 25px;
+
+  }
+  .card {
+    margin-bottom: 25px;
+    border: 0;
+    box-shadow: 0 10px 45px -9px rgba(0,0,0,0.1);
+  }
+
+  .card-footer {
+    text-align: right;
+  }
+
+  .blog-date {
+    font-size: 13px;
+  }
+
+  .label {
+
+  }
+}
+
+/** Blog Item **/
+.content-title {
+  margin-bottom: 2rem;
+
+  h2 {
+    margin-bottom: 0.5rem;
+  }
+}
+
+.label {
+  font-size: 12px;
+  text-transform: uppercase;
+}
+
+/** Pagination **/
+ul.pagination {
+  justify-content: center;
+}
+
+.prev-next {
+  margin-top: 4rem;
+}
+
+/** Sidebar specific tweaks **/
+#sidebar {
+
+  ul.related-pages {
+    box-shadow: none;
+    padding: 0;
+
+    li {
+      border-bottom: 1px solid $border-color;
+      &:last-child {
+        border-bottom: 0;
+      }
+    }
+
+  }
+
+  ul.archives {
+    list-style: none;
+    margin-left: 0;
+
+    .label {
+      vertical-align: text-top;
+    }
+  }
+}

user/themes/lecampus/scss/theme/_footer.scss

@@ -0,0 +1,17 @@
+// Sticky Footer solution
+body.sticky-footer {
+  height: 100%;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+
+  #page-wrapper {
+    flex: 1 0 auto;
+  }
+}
+
+#footer {
+  color: #acb3c2;
+  padding: 1rem $horiz-padding 0;
+  text-align: center;
+}

user/themes/lecampus/scss/theme/_header.scss

@@ -0,0 +1,101 @@
+#header {
+  width: 100%;
+  height: $header-height-large;
+  border-bottom: 1px solid rgba($gray-color, 0.2);
+  @extend .default-animation;
+
+  font-size: 0.7rem;
+  font-weight: 700;
+
+  background: $light-color;
+  color: $dark-color;
+
+  a {
+    color: $dark-color;
+  }
+
+  .logo svg path {
+    fill: $header-color-dark;
+  }
+
+  .header-dark &:not(.scrolled) {
+    background: $header-color-dark;
+    color: $light-color;
+    a {
+      color: rgba($light-color, 0.7) !important;
+    }
+    a.active {
+      color: $light-color !important;
+    }
+    .dropmenu ul ul a {
+        color: $dark-color !important;
+    }
+    .logo svg path {
+      fill: $light-color;
+    }
+  }
+
+  .header-dark.header-transparent &:not(.scrolled) {
+    background: rgba(#000, 0.05);
+  }
+
+  .header-transparent &:not(.scrolled) {
+    background: rgba(#fff, 0.05);
+    //border-bottom: 0 !important;
+  }
+
+  .navbar-section {
+    height: $header-height-large;
+    @extend .default-animation;
+
+    @include breakpoint(md) {
+      margin-right: 2rem;
+    }
+  }
+
+  .navbar-section.desktop-menu {
+    @include breakpoint(md) {
+      display: none;
+    }
+  }
+
+  .logo {
+    svg, img {
+      height: 42px;
+      display: inherit;
+      @extend .default-animation;
+    }
+  }
+
+  // Fixed Header solution
+  .header-fixed & {
+    position: fixed;
+    top: 0;
+    z-index: 2;
+  }
+}
+
+// Animate Fixed Header
+body.header-fixed.header-animated {
+  #header.scrolled {
+    height: $header-height-small;
+
+    .navbar-section {
+      height: $header-height-small;
+    }
+
+    .logo {
+      svg, img {
+        height: 28px;
+      }
+    }
+
+    ~ .mobile-menu .button_container {
+      top: 0.5rem;
+    }
+  }
+}
+
+.login-status-wrapper {
+  white-space: nowrap;
+}

user/themes/lecampus/scss/theme/_menu.scss

@@ -0,0 +1,94 @@
+.dropmenu {
+
+  @include breakpoint(md) {
+    display: none;
+  }
+
+  ul {
+    white-space: nowrap;
+    margin: 0;
+    display: flex;
+
+    li {
+      position: relative;
+      margin: 0;
+
+      a {
+        text-decoration: none;
+        padding: $dropmenu-vert-padding ($dropmenu-horiz-padding + $dropmenu-child-padding) $dropmenu-vert-padding $dropmenu-horiz-padding;
+        display: block;
+
+        &:hover, &:focus, &.active {
+          color: $dropmenu-hover-text !important;
+        }
+
+        &:before {
+          content: '\f107';
+          font-family: 'FontAwesome';
+          display: inline-block;
+          vertical-align: middle;
+          float: right;
+          margin-right: - (2 *$dropmenu-child-padding);
+        }
+
+        &:only-child {
+          //background: none;
+          padding-right: $dropmenu-horiz-padding;
+
+          &:before {
+            content: '';
+          }
+        }
+      }
+
+      &:hover {
+        & > ul {
+          display: block;
+          visibility: visible;
+        }
+      }
+    }
+
+    ul li a:before {
+      content: '\f105';
+    }
+
+    ul {
+      position: absolute;
+      top: 100%;
+      list-style: none;
+      background: $dropmenu-bg;
+      box-shadow: $dropmenu-shadow;
+      visibility: hidden;
+
+      ul {
+        position: absolute;
+        left: 100%;
+        top: 0;
+      }
+    }
+
+  }
+
+  & > ul > li {
+    display: inline-block;
+  }
+
+  // Animation options
+  &.animated {
+    ul li {
+      transition: background .7s, color 0.5s;
+    }
+
+    ul li:hover > ul {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    ul ul {
+      transition: transform .3s, opacity .5s;
+      opacity: 0;
+      transform: translateY(-10px);
+    }
+  }
+}

user/themes/lecampus/scss/theme/_typography.scss

@@ -0,0 +1,162 @@
+html {
+  @include fluid-type($size-xs, $size-xl, $min-responsive-font-size, $html-font-size);
+}
+
+// Header Overrides
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 2rem;
+  font-family: $title-font-family;
+  color: darken($body-font-color, 10%);
+}
+
+h1, .h1 {
+  font-size: 3rem;
+}
+
+h2, .h2 {
+  font-size: 1.8rem;
+}
+
+h6, .h6 {
+  font-weight: 400;
+}
+
+.title-center {
+  h1, h2 {
+    text-align: center;
+  }
+}
+
+.title-h1h2 {
+  h1  {
+    font-weight: 100;
+    margin-bottom: 0;
+    line-height: 1.1;
+
+    strong, bold {
+      font-weight: 400;
+    }
+  }
+  h1 + h2 {
+    line-height: 1.1;
+    margin-top: 0;
+  }
+
+}
+
+// Typography Hints
+.title-h1h2, .title-center {
+  h1 + h2 {
+    margin-bottom: 50px;
+    font-weight: 700;
+  }
+}
+
+a:focus {
+  outline: none !important;
+  box-shadow: none !important;
+}
+
+img {
+  max-width: 100%;
+}
+
+
+// Codeblocks
+pre code, pre.xdebug-var-dump{
+  background: #fafafa;
+  display: block;
+  padding: 1rem !important;
+  line-height: 1.5;
+  color: inherit;
+  border-radius: 2px;
+  overflow-x: auto;
+}
+
+pre {
+  code:not(.hljs) {
+    background: #f8f8f8;
+  }
+}
+
+// Icon Tweaks
+i.fa {
+
+
+  &.fa-heart, &.fa-heart-o {
+    &.pulse {
+      color: #920
+    }
+  }
+}
+
+// Font Weights
+b,
+strong {
+  font-weight: 700;
+}
+
+.heavy {
+  font-weight: 700;
+}
+
+.light {
+  font-weight: 200;
+}
+
+// Colors
+.text-light {
+  color: rgba($light-color, 0.8);
+
+  h1, h2, h3, h4, h5, h6 {
+    color: rgba($light-color, 0.9);
+  }
+}
+
+// Error configuration
+#error {
+  text-align: center;
+  position: relative;
+  margin-top: 5rem;
+
+  .icon {
+    font-size: 50px;
+  }
+}
+
+// Messages
+#messages {
+  margin-bottom: 1rem;
+
+  .icon {
+    font-size: 1rem;
+  }
+}
+
+// Lists
+ul,
+ol {
+  margin-left: $unit-8;
+
+  ul,
+  ol {
+    margin-left: $unit-8;
+  }
+}
+
+ul {
+  list-style: disc outside;
+}
+
+ol {
+  list-style: decimal outside;
+}
+
+// Notices
+.notices {
+  margin: 1.5rem 0;
+  p {
+    margin: 1rem 0;
+  }
+}
+