diff default/assets/scss/base/_base.scss @ 0:1d038bc9b3d2 default tip

Up:default
author Liny <dev@neowd.com>
date Sat, 31 May 2025 09:21:51 +0800
parents
children
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/default/assets/scss/base/_base.scss	Sat May 31 09:21:51 2025 +0800
@@ -0,0 +1,663 @@
+// main: ../style.scss
+/********************************
+ *********************************
+ BASE
+ *********************************
+ *********************************/
+html {
+  height: 100%;
+}
+
+.label {
+  @extend .badge;
+}
+
+body.rtl {
+  direction: rtl;
+  ol, ul { padding-right: rem(35)  }
+  .text-right-rtl { text-align: left !important }
+  .text-left-rtl { text-align: left !important }
+  .btn-group { direction: ltr }
+  .pagination,
+  .pager { padding-right: 0 }
+}
+
+.ltr {
+  direction: ltr !important;
+  body.rtl & {
+    text-align: right;
+  }
+}
+
+.badge {
+  letter-spacing: $headings-letter-spacing;
+  font-family: $headings-font-family;
+}
+
+a.badge:hover {
+  color: #fff;
+}
+
+hr {
+  &.border-0 {
+    border: 0;
+  }
+  &.tiny-hr {
+    border: 0;
+    position: relative;
+    &:after {
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 40px;
+      height: 1px;
+      background: $theme-border-color;
+    }
+  }
+}
+
+canvas {
+  max-width: 100%;
+}
+
+.material-icons {
+  font-size: rem(24);
+}
+
+.small, small { color: $text-muted; font-size: 85%; }
+
+.small.list-icon {
+  font-size: 18px;
+}
+
+.icon-muted {
+  color: $nav-icon-color;
+}
+
+a {
+  &:focus,
+  &:hover {
+    outline: none;
+  }
+}
+
+iframe { border: 0 }
+
+input:focus,
+select:focus,
+textarea:focus,
+button:focus,
+.btn.active.focus,
+.btn.active:focus,
+.btn.focus,
+.btn:active.focus,
+.btn:active:focus,
+.btn:focus {
+  outline: none;
+}
+
+input, textarea {
+  letter-spacing: 0;
+}
+
+img {
+  max-width: 100%;
+}
+
+h1, h2, h3, h4, h5, h6,
+.h1, .h2, .h3, .h4, .h5, .h6 {
+  margin: rem(20) 0 rem(10);
+  font-weight: 400;
+  letter-spacing: $headings-letter-spacing;
+
+  .material-icons {
+    position: relative;
+    top: -2px;
+  }
+
+  small {
+    font-size: 0.75em;
+  }
+}
+
+h6 { font-weight: 500 }
+p { margin-bottom: em(20, $font-size-base-px) }
+a { transition: $transition-base }
+
+.blockquote,
+blockquote {
+  padding: 10px 20px;
+  border: 1px solid #eee;
+  border-left: 5px solid $primary;
+  color: $headings-color;
+  letter-spacing: $headings-letter-spacing;
+  font-family: $headings-font-family;
+  font-size: $blockquote-font-size;
+  small {
+    font-size: 75%;
+    font-weight: 500;
+  }
+  small:before, footer:before, small:before {
+    content: '\2014 \00A0';
+  }
+
+  &.blockquote-reverse {
+    border: 1px solid #eee;
+    border-right: 5px solid $primary;
+  }
+
+  body.rtl & {
+    border-right: 5px solid $primary;
+    border-left: 0;
+
+    &.blockquote-reverse {
+      text-align: left;
+      border-left: 5px solid $primary;
+      border-right: 0;
+    }
+  }
+}
+
+dd {
+  margin-bottom: 5px;
+}
+
+.show-grid {
+  margin: 15px 0;
+
+  [class^="col-"] {
+    padding-top: 10px;
+    padding-bottom: 10px;
+    border: 1px solid rgba(120, 130, 140, 0.13);
+    background-color: #f7fafc;
+  }
+}
+
+.fancy-list {
+  li {
+    @include padding( 0 null 1em );
+  }
+
+  .list-icon {
+    font-size: em(18);
+    vertical-align: middle;
+  }
+}
+
+.list-icon {
+  font-size: rem(18);
+}
+
+.row {
+  &.columns-border-bw {
+    [class*="col-"] {
+      border-right: 1px solid $theme-border-color;
+    }
+  }
+}
+
+.headings-font-family,
+.heading-font-family { font-family: $headings-font-family }
+.content-font-family { font-family: $font-family-base }
+.sub-heading-font-family { font-family: $tertiary-font-family }
+.content-font-size { font-size: $font-size-base }
+.headings-color { color: $headings-color !important }
+
+.headings-letter-spacing { letter-spacing: $headings-letter-spacing !important }
+
+.wrapper {
+  position: relative;
+}
+
+.content-wrapper {
+  position: relative;
+
+  @media (min-width: #{$theme-breakpoint + 1px}) {
+    .sidebar-expand &,
+    .sidebar-collapse & {
+      padding-top: $nav-height;
+    }
+  }
+}
+
+.text-inverse {
+  &,
+  h1,h2,h3,h4,h5,h6,,
+  .h1,.h2,.h3,.h4,.h5,.h6, .list-icon, small,
+  a:not(.btn), a:not(.btn):hover {
+    color: white !important;
+  }
+  .text-muted {
+    color: rgba(255, 255, 255, .5) !important;
+  }
+}
+
+
+/* Material Icons
+========================*/
+.material-icons { position: relative; }
+.material-icons.md-18 { font-size: rem(18); }
+.material-icons.md-24 { font-size: rem(24); }
+.material-icons.md-36 { font-size: rem(36); }
+.material-icons.md-48 { font-size: rem(48); }
+
+.user-char-image {
+  border-radius: 100px;
+  display: inline-block;
+  text-align: center;
+  position: relative;
+  i {
+    @include position(absolute, 50% 50% null null);
+    transform: translateY(-50%) translateX(50%);
+    font-style: normal;
+    color: #fff;
+  }
+}
+
+/* Main Content Area
+========================*/
+.main-wrapper {
+  overflow: hidden;
+  padding: 0 $wrapper-pd-x rem(120);
+  background: $body-bg;
+
+  .sidebar-expand & {
+    margin-left: $sidebar-width;
+  }
+
+  body.rtl.sidebar-expand & {
+    margin-left: auto;
+    margin-right: $sidebar-width;
+  }
+
+  .sidebar-collapse & {
+    margin-left: $collapse-sidebar-width;
+  }
+
+  body.rtl.sidebar-collapse & {
+    margin-left: auto;
+    margin-right: $collapse-sidebar-width;
+  }
+}
+
+.neg-wrapper-padding {
+  margin-left: #{ -$wrapper-pd-x };
+  margin-right: #{ -$wrapper-pd-x };
+}
+
+
+/* Site Footer
+========================*/
+.footer {
+  bottom: 0;
+  left: 0;
+  color: $footer-color;
+  padding: $footer-padding-y $footer-padding-x;
+  position: absolute;
+  right: 0;
+  background: $footer-bg;
+  border-top: 1px solid $theme-border-color;
+
+  .sidebar-expand & {
+    margin-left: $sidebar-width;
+  }
+
+  .sidebar-collapse & {
+    margin-left: $collapse-sidebar-width;
+  }
+
+  body.rtl.sidebar-expand & {
+    margin-left: 0;
+    margin-right: $sidebar-width;
+  }
+
+  body.rtl.sidebar-collapse & {
+    margin-left: 0;
+    margin-right: $collapse-sidebar-width;
+  }
+}
+
+@media (max-width: $theme-breakpoint) {
+  .content-wrapper .main-wrapper,
+  body .wrapper .footer {
+    margin-left: 0;
+    margin-right: 0;
+  }
+  body.rtl.sidebar-expand .main-wrapper {
+    width: 100%;
+    margin-right: 0;
+  }
+  body.rtl.sidebar-collapse .main-wrapper {
+    width: 100%;
+    margin-right: 0;
+  }
+  body.rtl.sidebar-collapse .footer,
+  body.rtl.sidebar-expand .footer {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: #{$theme-breakpoint + 1px}) {
+  .sidebar-horizontal .fix-top .main-wrapper {
+    padding-top: 70px;
+  }
+}
+
+
+
+/* Thumbnail Image Sizes
+=======================*/
+[class*="thumb"] {
+  display: inline-block;
+}
+img, .user-char-image {
+  .thumb-xxs & { @include size(35px) }
+  .thumb-xs & { @include size(40px) }
+  .thumb-xs2 & { @include size(50px) }
+  .thumb-sm & { @include size(60px) }
+  .thumb-sm2 & { @include size(70px) }
+  .thumb-md & { @include size(110px) }
+  .thumb-md2 & { @include size(120px) }
+  .thumb-lg & { @include size(180px) }
+}
+
+img {
+  .thumb-xs &,
+  .thumb-sm &,
+  .thumb-md &,
+  .thumb-lg & { height: auto; max-width: 999px }
+}
+
+
+/* User Status
+========================*/
+[class*="user--"] {
+  position: relative;
+
+  &::after {
+    @include size(em(9));
+    display: block;
+    @include position(absolute, 0 10% null null);
+    border-radius: 100px;
+    content: "";
+    box-shadow: 0 0 0 2px $widget-bg;
+  }
+
+  &[class*="thumb-xs"]::after { right: rem(4); }
+  &[class*="thumb-xs2"]::after { right: rem(6); }
+  &[class*="thumb-sm"]::after { right: rem(8); }
+  &[class*="thumb-md"]::after { right: rem(12); top: rem(12) }
+  &[class*="thumb-lg"]::after { right: rem(20); }
+}
+
+.user--offline:after { background: $gray-300 }
+.user--online:after { background: $success }
+.user--away:after { background: $warning }
+.user--busy:after { background: $danger }
+
+
+/* Waves Effect on Click
+========================*/
+.ripple {
+  position: relative;
+  overflow: hidden;
+  transform: translate3d(0,0,0);
+
+  &::after {
+    content: "";
+    display: block !important;
+    @include position(absolute, 0);
+    width: auto;
+    height: auto;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    pointer-events: none;
+    background-image: radial-gradient(circle, #000 10%,transparent 10.01%);
+    background-repeat: no-repeat;
+    background-position: 50%;
+    transform: scale(10,10);
+    opacity: 0;
+    transition: transform .5s, opacity 1s;
+  }
+
+  &:active::after {
+    transform: scale(0,0);
+    opacity: .1;
+    transition: 0s;
+  }
+}
+
+
+/* Pulse Effect
+========================*/
+.pulse-status {
+  display: block;
+  width: rem(8);
+  height: rem(8);
+  border-radius: 50%;
+  background: $primary;
+  cursor: pointer;
+  box-shadow: 0 0 0 rgba(204,169,44, 0.6);
+  animation: pulse-status 1s infinite;
+  position: absolute;
+  top: 50%;
+  right: 0;
+  margin-top: -rem(10);
+  margin-right: rem(10);
+  transform: translateY(-50%);
+
+  &:hover {
+    animation: none
+  }
+}
+
+@-webkit-keyframes pulse-status {
+  0% { box-shadow: 0 0 0 0 rgba(204,169,44, 0.6)  }
+  70% { box-shadow: 0 0 0 10px rgba(204,169,44, 0)  }
+  100% { box-shadow: 0 0 0 0 rgba(204,169,44, 0)  }
+}
+
+@keyframes pulse-status {
+  0% { box-shadow: 0 0 0 0 rgba(204,169,44, 0.6)  }
+  70% { box-shadow: 0 0 0 10px rgba(204,169,44, 0)  }
+  100% { box-shadow: 0 0 0 0 rgba(204,169,44, 0)  }
+}
+
+/* Dropdown
+========================*/
+.dropdown-toggle {
+  li a {
+    line-height: $line-height-base;
+  }
+  .caret {
+    &:before {
+      content: '\e928';
+      font-family: 'feather';
+      font-feature-settings: 'liga';
+      vertical-align: middle;
+      font-size: 16px;
+      width: 1em;
+    }
+  }
+}
+
+.dropdown-menu {
+  .open > &,
+  .show > & {
+    display: block;
+  }
+  &.dropdown-left {
+    left: auto;
+    right: 0;
+  }
+  
+  body.rtl & {
+    text-align: right;
+  }
+}
+
+.dropdown-menu > .selected > a,
+.dropdown-menu > .active > a {
+  &, &:hover, &:focus {
+    background: $primary;
+    color: #fff;
+    outline: none;
+  }
+}
+
+.dropdown-item {
+  @include padding( em(5,$font-size-base-px) null );
+}
+
+body.rtl {
+  .dropdown-menu-left-rtl {
+  }
+}
+
+/* User Avatar List
+========================*/
+.user-avatar-list {
+  flex-direction: row-reverse;
+  display: flex;
+  text-align: right;
+  a {
+    position: relative;
+    display: inline-block;
+    margin-left: -5%;
+    img {
+      border: 1px solid $widget-bg;
+    }
+  }
+
+  a.more-link {
+    order: 1;
+    margin-left: auto;
+    display: inline-flex;
+    justify-content: center;;
+    align-items: center;
+    background: #fff;
+    border-radius: 100px;
+    color: $headings-color;
+    font-family: $headings-font-family;
+    font-size: em(12);
+  }
+}
+
+/* Main Content Area
+========================*/
+.img-thumbnail {
+  padding: .125em;
+  background: #fff;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.075);
+}
+
+/* Hover Helper 
+========================*/
+.hover-item {
+  display: none;
+  @include mobile { display: block }
+  @include tablet { display: block }
+}
+
+.hover-parent:hover .hover-item {
+  display: block;
+}
+
+/* Title Seperator 
+========================*/
+.title-seperator {
+  display: flex;
+  align-items: center;
+  margin-top: em(30);
+  margin-bottom: em(30);
+  span {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+  &:before,
+  &:after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    border-top: 1px solid $theme-border-color;
+    display: block;
+  }
+}
+
+/* Icons 
+========================*/
+[class*='size-icon'] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.size-icon-20 { @include size( rem(20) ); }
+.size-icon-30 { @include size( rem(30) ); }
+.size-icon-40 { @include size( rem(40) ); }
+.size-icon-50 { @include size( rem(50) ); }
+.size-icon-60 { @include size( rem(60) ); }
+.size-icon-70 { @include size( rem(70) ); }
+.size-icon-80 { @include size( rem(80) ); }
+.size-icon-90 { @include size( rem(90) ); }
+
+/* Star Ratings 
+========================*/
+.star-ratings {
+  position: relative;
+  height: 1em;
+  line-height: 1;
+  vertical-align: middle;
+  span::before,
+  &:before {
+    content: '\e9bf\e9bf\e9bf\e9bf\e9bf';
+    font-family: 'feather';
+    color: $color-scheme;
+  }
+  &:before {
+    opacity: 0.5;
+  }
+  span {
+    overflow: hidden;
+    height: 1em;
+    @include position(absolute, 0 null null 0);
+  }
+
+  &.style-2 {
+    letter-spacing: em(-2);
+    display: inline-block;
+    &:before,
+    span::before {
+      letter-spacing: inherit;
+      font-family: 'Material Icons';
+      font-weight: normal;
+      content: 'star star star star star';
+      vertical-align: baseline;
+      text-rendering: optimizeLegibility;
+      font-feature-settings: 'liga';
+    }
+    &:before { color: $text-muted }
+    span::before { color: $warning }
+  }
+}
+
+/* Featured Figure Tag 
+========================*/
+figure {
+  position: relative;
+  .featured {
+    @include position(absolute, 1em null null -.5em);
+  }
+}
+
+/* Scrollbar Styling for RTL 
+========================*/
+body.rtl .scrollbar-enabled {
+  direction: ltr;
+
+  > * {
+    direction: rtl;
+  }
+}