Mercurial > nebulaweb3
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; + } +}