sendnrw/matrix_home_web
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
jbergner
2025-04-23 10:45:21 +02:00
parent 8030ffb888
commit d17fb46943
716 changed files with 163468 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

485
assets/less/_altair_landing_page.less Normal file
View File

@@ -0,0 +1,485 @@
html {
background: @site_background;
}
body {
.md_font(400, 15px, 1.42857143);
box-sizing: border-box;
overflow-x: hidden;
}
/*html, body {
height: 100%;
}*/
a, button {
outline: none !important;
}
a {
color: @md-color-blue-600;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
&:hover,
&:active {
color: @md-color-blue-900;
text-decoration: none;
}
}
.uk-text-upper {
text-transform: uppercase;
}
.animate > * {
visibility: hidden;
}
.animated {
visibility: visible;
}
[class*=uk-animation-] {
animation-timing-function: @md_easing;
animation-duration: 840ms;
}
.heading {
&_a {
margin: 0;
.md_font(300,42px,48px);
.sub-heading {
font-weight: 300;
font-size: 24px;
line-height: 30px;
display: block;
padding-top: 10px;
}
@media @screen_large_max {
.md_font(300,32px,36px);
.sub-heading {
font-size: 20px;
line-height: 24px;
}
}
}
&_b {
margin: 0;
.md_font(300,32px,36px);
.sub-heading {
font-weight: 300;
font-size: 20px;
line-height: 26px;
display: block;
padding-top: 10px;
}
@media @screen_large_max {
.md_font(300,28px,32px);
.sub-heading {
font-size: 18px;
line-height: 22px;
}
}
}
&_c {
margin: 0;
.md_font(400,24px,28px);
.sub-heading {
font-weight: 300;
font-size: 18px;
line-height: 20px;
display: block;
padding-top: 10px;
}
@media @screen_large_max {
.md_font(300,22px,25px);
.sub-heading {
font-size: 16px;
line-height: 20px;
}
}
}
&_a,
&_b,
&_c {
+ .uk-grid {
margin-top: 24px;
}
.material-icons {
vertical-align: middle;
}
}
&_light {
&,
.sub-heading {
color: @white;
}
}
}
// icons
.icon {
&_large {
font-size: 64px;
@media @screen_large_max {
font-size: 48px;
}
}
&_dark {
color: @text_secondary_color;
}
}
// header
#header_main {
transition: all 280ms @md_easing;
position: relative;
z-index: 10;
.uk-navbar {
background: @white;
&-nav {
> li {
> a {
color: @text_secondary_color;
text-transform: uppercase;
font-size: 14px;
.md_font_family();
font-weight: 500;
box-shadow: inset 0 -4px 0 rgba(255,255,255,0);
background: none !important;
transition: all 280ms @md_easing;
&:hover,
&:active {
color: @text_secondary_color;
}
}
&.current_active {
a {
box-shadow: inset 0 -4px 0 @accent_color;
}
}
}
}
}
&.header-light {
background: @white;
}
.header_cta {
margin-top: 14px;
@media @screen_large_max {
margin-top: 6px;
}
}
}
#mobile_navigation_toggle {
display: none;
}
#mobile_navigation {
.uk-offcanvas-bar {
background: @white;
.md-box-shadow-right();
transition: transform 280ms @md_easing;
&:after {
display: none;
}
ul {
.reset_list(32px 0 0 0,0);
li {
a {
display: block;
font-size: 16px;
font-weight: 500;
line-height: 25px;
padding: 8px 20px;
color: @text_primary_color;
small {
font-size: 12px;
color: @text_secondary_color;
display: block;
margin-top: -2px;
}
.menu_icon {
width: 48px;
text-align: left;
display: inline-block;
color: @text_secondary_color;
float: left;
.material-icons {
font-size: 24px;
vertical-align: top;
}
}
.menu_title {
display: block;
overflow: hidden;
}
}
}
}
}
}
.uk-offcanvas-page {
transition: margin 280ms @md_easing;
}
.header_sticky {
padding-top: @header_main_height;
@media @screen_large_max {
padding-top: @header_main_mobile_height;
}
#header_main {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
}
}
.header_shadow {
#header_main {
box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
}
// top banner (slideshow)
.banner {
color: @white;
position: relative;
.uk-slideshow {
&,
> li {
height: 640px;
}
> li {
background-size: 100% auto;
background-position: center center;
background-repeat: no-repeat;
.slide {
&_content_a {
margin: 160px 0 0 640px;
}
&_content_b {
margin: 320px 0 0 0;
background: rgba(0,0,0,.4);
padding: 24px;
}
&_content_c {
margin: 120px 540px 0 0;
.slide_header,
p {
color: @text_primary_color;
}
}
&_header {
color: @white;
.md_font(400,38px,42px);
margin: 0 0 18px;
}
}
p {
margin: 0;
font-size: 20px;
font-weight: 300;
+ * {
margin-top: 32px;
}
}
}
}
.slide_navigation {
display: none;
}
&:hover {
.slide_navigation {
display: block;
}
}
}
.uk-touch {
.slide_navigation {
display: block !important;
}
}
.uk-slidenav {
position: absolute;
top: 50%;
margin-top: -30px;
color: @white !important;
background: rgba(0,0,0,.2);
border-radius: 12px;
font-size: 48px;
transition: all 280ms @md_easing;
&-previous {
left: 16px;
&:before {
position: relative;
left: -2px;
top: -2px;
}
}
&-next {
right: 16px;
&:before {
position: relative;
right: -2px;
top: -2px;
}
}
&:active,
&:hover {
background: rgba(0,0,0,.6);
border-radius: 50%;
}
}
.uk-dotnav {
> li {
border: 2px solid rgba(255,255,255,.8);
padding: 2px;
margin-right: 6px;
border-radius: 50%;
&.uk-active {
border-color: @white;
> a {
background: @accent_color;
}
}
> a {
margin: 0;
width: 14px;
height: 14px;
}
}
}
// sections
.section {
padding: 48px 0;
position: relative;
&_large {
padding: 64px 0;
}
&_dark {
color: @white;
}
&_gallery {
position: relative;
.slide_navigation {
display: none;
}
&:hover {
.slide_navigation {
display: block;
}
}
}
}
// uikit
[class*=uk-width].uk-container-center {
float: none;
}
// media queries
@media @screen_xlarge_max {
.banner {
.uk-slideshow {
&,
> li {
height: auto;
min-height: 360px;
}
> li {
.slide {
&_content_a,
&_content_b,
&_content_c {
margin: 0;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(0,0,0,.4);
padding: 48px 48px 0;
text-align: center;
}
&_header {
margin-bottom: 20px;
color: @white !important;
}
}
p {
font-size: 20px;
color: @white !important;
+ * {
margin-top: 24px;
}
}
}
}
}
}
@media @screen_large_max {
#header_main {
height: @header_main_mobile_height;
.uk-navbar-brand {
line-height: 48px;
padding: 0;
}
}
#main_navigation {
display: none;
.uk-navbar {
&-nav {
}
}
}
#mobile_navigation_toggle {
padding: 12px 4px 10px;
display: inline-block;
i {
font-size: 24px;
}
}
}
@media @screen_medium_max {
.banner {
.uk-slideshow {
> li {
background-size: auto 100%;
.slide {
&_content_a,
&_content_b,
&_content_c {
margin: 0;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(0,0,0,.4);
padding: 24px 12px;
text-align: center;
}
&_header {
.md_font(400,24px,28px);
margin-bottom: 6px;
color: @white !important;
}
}
p {
font-size: 15px;
color: @white !important;
+ * {
margin-top: 24px;
}
}
}
}
}
.uk-container {
padding-left: 15px;
padding-right: 15px;
}
}

1090
assets/less/_uikit_custom.less Normal file
View File

File diff suppressed because it is too large Load Diff

140
assets/less/_variables_mixins.less Normal file
View File

@@ -0,0 +1,140 @@
// colors
@text_primary_color: #212121;
@text_secondary_color: #727272;
@text_muted: #aaa;
@site_background: #fff;
@border_color: rgba(0,0,0,0.12);
@border_color_hex: #e0e0e0;
@border_color_light: rgba(0,0,0,0.08);
@background_color_default: rgba(0,0,0,0.085);
@background_color_default_hex: #ededed;
@hover_bg: #f5f5f5;
@white: #fff;
@danger_color: @md-color-red-600;
@primary_color: @md-color-blue-500;
@primary_color_dark: @md-color-blue-700;
@success_color: @md-color-light-green-600;
@warning_color: @md-color-amber-700;
@muted_color: @md-color-grey-400;
// theme
@theme_primary_color: @md-color-blue-500;
@theme_light_color: @md-color-blue-50;
@theme_dark_color: @md-color-blue-700;
@accent_color: @md-color-light-green-600;
/* md buttons */
@hover_btn: rgba(153,153,153,0.2);
@active_btn: rgba(153,153,153,0.4);
// input colors
@input_on_color: @md-color-teal-500;
@input_off_color: rgba(0,0,0,.54);
@input_disabled_color: rgba(0,0,0,.26);
@input_disabled_color_hex: #bdbdbd;
// swiftOut easing
@md_easing: cubic-bezier(0.4,0,0.2,1);
// main header
@header_main_height: 64px;
@header_main_mobile_height: 48px;
@header_main_height_double: (@header_main_height*2)+10;
@header_main_zIndex: 1104;
// top bar
@top_bar_height: 40px;
// main sidebar
@sidebar_main_width: 240px;
@sidebar_main_width_mini: 60px;
// secondary sidebar
@sidebar_secondary_width: 280px;
// media queries
@screen_xlarge: ~"only screen and (min-width: 1220px)";
@screen_large: ~"only screen and (min-width: 960px)";
@screen_medium: ~"only screen and (min-width: 768px)";
@screen_small: ~"only screen and (min-width: 480px)";
@screen_xlarge_max: ~"only screen and (max-width: 1219px)";
@screen_large_max: ~"only screen and (max-width: 959px)";
@screen_medium_max: ~"only screen and (max-width: 767px)";
@screen_small_max: ~"only screen and (max-width: 479px)";
// box-sizing: border-box (this and all childrens)
.border-box() {
&,
&:before,
&:after,
*,
*:before,
*:after {
box-sizing: border-box;
}
}
// Retina background-image support with non-retina fall back
.retina_image(@file-1x, @file-2x, @width-1x, @height-1x) {
background-image: url("@{file-1x}");
background-repeat: no-repeat;
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dppx),
only screen and ( min-resolution: 2dppx) {
background-image: url("@{file-2x}");
background-size: @width-1x @height-1x;
}
}
// remove default styles for ordered/unordered list
.reset_list(@margin: 0, @padding: 0) {
margin: @margin;
padding: @padding;
list-style: none;
> li {
padding: 0;
margin: 0;
list-style: none;
}
}
// clearfix
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// custom fonts
.md_font(@weight: 400, @size: 14px, @height: 20px) {
font: @weight @size e('/') @height "Roboto", sans-serif;
}
.code_font(@weight: 400, @size: 14px, @height: 18px) {
font: @weight @size e('/') @height "Source Code Pro",Consolas, Monaco, 'Andale Mono', monospace !important;
}
.md_font_family() {
font-family: "Roboto", sans-serif;
}
// text truncate
.truncate_line(@width: 100%) {
text-overflow: ellipsis;
display: inline-block;
vertical-align: top;
white-space: nowrap;
overflow: hidden;
width: @width;
}

109
assets/less/components/_pricing_table.less Normal file
View File

@@ -0,0 +1,109 @@
/* pricing tables */
.pricing_table {
&.pricing_table_a {
text-align: center;
.pricing_table_plan {
font-size: 18px;
font-weight: 400;
padding: 16px 0;
margin-bottom: 16px;
}
.pricing_table_price {
padding: 8px 0 0;
font-size: 48px;
margin-bottom: 24px;
.currency {
vertical-align: top;
font-size: 24px;
padding: 0 4px;
}
.period {
font-size: 14px;
padding: 4px;
color: @text_muted;
display: block;
}
}
.pricing_table_features {
.reset_list();
li {
font-size: 16px;
padding: 8px 0;
}
}
.pricing_table_select {
padding: 32px 0;
}
}
&.pricing_table_b {
text-align: center;
.pricing_table_plan {
font-size: 16px;
font-weight: 400;
padding: 16px 0;
margin-bottom: 16px;
text-transform: uppercase;
}
.pricing_table_price {
padding: 8px 0 0;
font-size: 48px;
margin-bottom: 24px;
.currency {
vertical-align: top;
font-size: 24px;
padding: 0 4px;
}
.period {
font-size: 14px;
padding: 4px;
color: @text_muted;
display: block;
}
}
.pricing_table_features {
.reset_list();
li {
font-size: 16px;
padding: 8px 0;
}
}
.pricing_table_select {
padding: 32px 0;
}
}
&.pricing_table_c {
text-align: center;
.pricing_table_plan {
font-size: 16px;
font-weight: 400;
padding: 16px 0;
margin-bottom: 8px;
}
.pricing_table_price {
padding: 8px 0 0;
font-size: 48px;
margin-bottom: 24px;
.currency {
vertical-align: top;
font-size: 24px;
padding: 0 4px;
}
.period {
font-size: 14px;
color: @text_muted;
vertical-align: 0;
padding-left: 4px;
}
}
.pricing_table_features {
.reset_list();
li {
font-size: 16px;
padding: 8px 0;
}
}
.pricing_table_select {
padding: 32px 0;
}
}
}

125
assets/less/components/_timeline.less Normal file
View File

@@ -0,0 +1,125 @@
.al_timeline {
position: relative;
padding: 24px 0 32px;
&:after {
position: absolute;
top: 0;
bottom: 0;
margin-left: -2px;
left: 50%;
content: '';
width: 4px;
background: rgba(255,255,255,.5);
display: block;
}
&_block {
.clearfix;
+ * {
margin-top: 48px;
}
&:nth-child(even) {
.al_timeline {
&_content {
float: right;
&:after {
border-left-color: transparent;
border-right-color: @white;
right: auto;
left: -20px;
}
}
}
}
}
&_content {
box-sizing: border-box;
background: @white;
width: 44%;
padding: 16px;
.boxShadowHelper(2);
position: relative;
border-radius: 4px;
&:after {
position: absolute;
top: 24px;
right: -20px;
content: '';
display: block;
border: 10px solid transparent;
border-left-color: @white;
}
}
&_image {
position: absolute;
left: 50%;
width: 64px;
height: 64px;
margin-left: -32px;
background: @white;
border-radius: 50%;
text-align: center;
z-index: 10;
.boxShadowHelper(2);
> i {
font-size: 32px;
line-height: 64px;
}
}
}
@media @screen_large_max {
.al_timeline {
&:after {
margin-left: 0;
left: 30px;
}
&_block {
padding-left: 96px;
}
&_content {
width: 100%;
&:after {
border-left-color: transparent;
border-right-color: @white;
right: auto;
left: -20px;
}
}
&_image {
left: 0;
margin-left: 0;
}
}
}
@media @screen_medium_max {
.al_timeline {
&:after {
margin-left: 0;
left: 22px;
}
&_block {
padding-left: 72px;
}
&_content {
width: 100%;
&:after {
border-left-color: transparent;
border-right-color: @white;
right: auto;
left: -20px;
top: 14px;
}
}
&_image {
width: 48px;
height: 48px;
left: 0;
margin-left: 0;
> i {
line-height: 48px;
font-size: 24px;
}
}
}
}

34
assets/less/main.less Normal file
View File

@@ -0,0 +1,34 @@
/*
* Altair Admin Landing Page
* author: tzd
*
* Content:
* 1. variables/mixins
* 2. UIkit custom styles
* 3. custom components
* 4. material design styles
* 5. partials (header,sidebars,top bar)
* 6. altair landing page styles
*
*/
/* 1. altair variables/mixins ======================== */
@import (reference) "_variables_mixins";
/* 2. UIkit custom styles ============================ */
@import "_uikit_custom";
/* 3. custom components ============================== */
@import "components/_pricing_table";
@import "components/_timeline";
/* 4. material designv styles ========================= */
@import "md/md_main";
/* 5. partials (header,sidebars,top bar) ============= */
/* 6. altair landing page styles ===================== */
@import "_altair_landing_page";
/* theme */
//@import "themes/_default";

599
assets/less/md/_md_buttons.less Normal file
View File

@@ -0,0 +1,599 @@
/* buttons */
@fab_large_size: 64px;
@fab_small_size: 48px;
@fab_transition_delay: 50ms;
.md-btn {
background: @white;
border: none;
border-radius: 2px;
.boxShadowHelper(1);
min-height: 31px;
min-width: 70px;
padding: 2px 16px;
text-align: center;
text-shadow: none;
text-transform: uppercase;
transition: all 280ms @md_easing;
color: @text_primary_color;
box-sizing: border-box;
cursor: pointer;
-webkit-appearance: none;
display: inline-block;
vertical-align: middle;
.md_font(500, 14px, 31px) !important;
&:hover,
&:focus,
&:active,
.uk-button-dropdown.uk-open > & {
background: @white;
outline: none;
text-decoration: none;
color: @text_primary_color;
.boxShadowHelper(2);
}
&:active,
.uk-button-dropdown.uk-open > & {
.boxShadowHelper(3);
}
&-flat {
.boxShadowHelper(0);
background: none;
&:hover,
&:focus {
background: @hover_btn;
}
&:active {
background: @active_btn;
}
&-danger {
&,
&:hover,
&:focus,
&:active {
color: @danger_color;
}
&:hover,
&:focus,
&:active {
background: lighten(@danger_color,40%);
}
}
&-primary {
&,
&:hover,
&:focus,
&:active {
color: @primary_color_dark;
}
&:hover,
&:focus,
&:active {
background: lighten(@primary_color,40%);
}
}
&-success {
&,
&:hover,
&:focus,
&:active {
color: @success_color;
}
&:hover,
&:focus,
&:active {
background: lighten(@success_color,40%);
}
}
&-warning {
&,
&:hover,
&:focus,
&:active {
color: @warning_color;
}
&:hover,
&:focus,
&:active {
background: lighten(@warning_color,40%);
}
}
&.disabled {
background: none !important;
}
}
&-danger {
&,
&:hover,
&:focus,
&:active {
background: @danger_color;
}
}
&-primary {
&,
&:hover,
&:focus,
&:active {
background: @primary_color;
}
}
&-success {
&,
&:hover,
&:focus,
&:active {
background: @success_color;
}
}
&-warning {
&,
&:hover,
&:focus,
&:active {
background: @warning_color;
}
}
&-danger,
&-primary,
&-success,
&-warning {
&,
&:hover,
&:focus,
&:active,
> i {
color: @white;
}
}
&.disabled {
&,
&:hover,
&:focus,
&:active {
color: #a8a8a8;
background: #eaeaea;
box-shadow: none !important;
cursor: default;
pointer-events: none;
}
}
> i {
&.material-icons {
margin-top: 5px;
font-size: 18px;
}
}
&-mini {
line-height: 21px !important;
min-width: 12px;
font-size: 10px !important;
min-height: 24px;
}
&-small {
line-height: 27px !important;
min-width: 14px;
font-size: 11px !important;
}
&-large {
line-height: 42px !important;
font-size: 16px !important;
}
&::-moz-focus-inner {
border: 0;
padding: 0;
}
+ .md-btn {
margin-left: 8px;
}
&-block {
width: 100%;
& + & {
margin-left: 0;
margin-top: 12px;
}
}
+ .md-btn-group {
margin-left: 16px;
}
&-facebook {
background: #3b5998 !important;
}
&-twitter {
background: #00aced !important;
}
&-gplus {
background: #dd4b39 !important;
}
&-facebook,
&-twitter,
&-gplus {
&,
> i {
color: @white !important;
}
}
&-icon {
&:extend(.md-btn-icon-default);
> i {
&:extend(.md-btn-icon-default > i);
&.no_margin {
margin-right: 0 !important;
margin-left: 0 !important;
}
}
&.md-btn-large {
&:extend(.md-btn-icon-large);
> i {
&:extend(.md-btn-icon-large > i);
}
}
&.md-btn-small {
&:extend(.md-btn-icon-small);
> i {
&:extend(.md-btn-icon-small > i);
}
}
&.md-btn-mini {
&:extend(.md-btn-icon-mini);
> i {
&:extend(.md-btn-icon-mini > i);
}
}
}
}
.md-btn-icon-large {
min-width: 72px;
> i {
font-size: 24px;
margin-right: 12px;
vertical-align: -3px;
}
}
.md-btn-icon-default {
min-width: 64px;
> i {
font-size: 18px;
margin-right: 8px;
vertical-align: -2px;
}
}
.md-btn-icon-small {
min-width: 48px;
> i {
font-size: 16px;
margin-right: 6px;
vertical-align: -2px;
}
}
.md-btn-icon-mini {
min-width: 36px;
> i {
font-size: 16px;
margin-right: 4px;
vertical-align: -2px;
}
}
.md-fab {
box-sizing: border-box;
width: @fab_large_size;
height: @fab_large_size;
border-radius: 50%;
background: @white;
color: @text_secondary_color;
display: block;
.boxShadowHelper(1);
transition: box-shadow 280ms @md_easing;
border: none;
position: relative;
text-align: center;
cursor: pointer;
&:hover,
&:focus,
&:active {
.boxShadowHelper(3);
}
> i {
font-size: 36px;
line-height: @fab_large_size;
height: inherit;
width: inherit;
position: absolute;
left: 0;
top: 0;
color: @text_secondary_color;
}
&.md-fab-accent {
background: @accent_color;
> i {
color: @white;
}
}
&.md-fab-success {
background: @success_color;
> i {
color: @white;
}
}
&.md-fab-danger {
background: @danger_color;
> i {
color: @white;
}
}
&.md-fab-primary {
background: @primary_color;
> i {
color: @white;
}
}
&.md-fab-warning {
background: @warning_color;
> i {
color: @white;
}
}
&.md-fab-small {
width: @fab_small_size;
height: @fab_small_size;
border-radius: 50%;
> i {
line-height: @fab_small_size;
height: inherit;
width: inherit;
font-size: 24px;
}
}
&-speed-dial {
.md-fab-action-close {
display: none;
}
}
}
.md-fab-wrapper {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 1004;
transition: margin 280ms @md_easing;
@media @screen_medium_max {
bottom: 20px;
right: 20px;
}
> .md-fab + .md-fab {
margin-top: 16px;
}
&.md-fab-in-card {
position: absolute;
}
}
.md-fab-speed-dial {
.md-fab-wrapper-small {
position: absolute;
bottom: @fab_large_size + 16px;
right: 8px;
min-height: @fab_small_size;
width: @fab_small_size;
z-index: -1;
.md-fab-small {
transform: scale(0);
opacity: 0;
position: absolute;
right: 0;
&:nth-child(1) {
transition: box-shadow 280ms @md_easing,transform 100ms @md_easing @fab_transition_delay,opacity 100ms @md_easing @fab_transition_delay;
}
.generate-fab-child(@n, @i: 2) when (@i =< @n) {
// small buttons position
&:nth-last-child(@{i}) {
bottom: (@fab_small_size * (@i - 1) ) + (16px * (@i - 1) );
}
// transition for small buttons (on hide)
&:nth-child(@{i}) {
transition: box-shadow 280ms @md_easing,transform 100ms @md_easing ( @fab_transition_delay * @i ),opacity 100ms @md_easing ( @fab_transition_delay * @i );
}
.generate-fab-child(@n, (@i + 1));
}
.generate-fab-child(8);
}
}
&.md-fab-active {
.md-fab-small {
transform: scale(1);
opacity: 1;
z-index: 10;
// transition for small buttons (on show)
&:nth-last-child(1) {
transition: box-shadow 280ms @md_easing,transform 100ms @md_easing @fab_transition_delay,opacity 100ms @md_easing @fab_transition_delay;
}
.generate-fab-child-active(@n, @i: 2) when (@i =< @n) {
&:nth-last-child(@{i}) {
transition: box-shadow 280ms @md_easing,transform 100ms @md_easing ( @fab_transition_delay * @i ),opacity 100ms @md_easing ( @fab_transition_delay * @i );
}
.generate-fab-child-active(@n, (@i + 1));
}
.generate-fab-child-active(8);
}
}
}
.md-fab-toolbar {
transition: all 280ms @md_easing;
cursor: default;
> i {
cursor: pointer;
}
&-actions {
visibility: hidden;
white-space: nowrap;
padding: 0 16px;
overflow: hidden;
box-sizing: border-box;
> a,
> button {
display: block;
float: left;
opacity: 0;
margin: 0 0 0 16px;
height: @fab_large_size;
width: 48px;
box-sizing: border-box;
transition: opacity 280ms @md_easing;
background: none;
border: none;
outline: none;
cursor: pointer;
&:first-child {
margin-left: 0;
}
}
.material-icons {
font-size: 36px;
line-height: @fab_large_size;
}
}
&.md-fab-animated {
.boxShadowHelper(1);
border-radius: 4px;
> i {
display: none;
}
}
&.md-fab-active {
.md-fab-toolbar-actions {
visibility: visible;
> a,
> button {
opacity: 1;
}
}
}
&.md-fab-small {
.md-fab-toolbar-actions {
> a,
> button {
height: @fab_small_size;
width: 36px;
padding: 0;
margin: 0 0 0 8px;
&:first-child {
margin-left: 0;
}
}
.material-icons {
font-size: 24px;
line-height: @fab_small_size;
height: inherit;
}
}
}
}
.md-fab-sheet {
transition: all 280ms @md_easing;
cursor: default;
> i {
cursor: pointer;
}
&-actions {
visibility: hidden;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
padding: 4px 0;
> a {
display: block;
opacity: 0;
padding: 4px 16px;
box-sizing: border-box;
.md_font(400, 16px, 32px);
text-align: left;
&,
&:hover {
color: @text_primary_color;
}
}
.material-icons {
font-size: 24px;
margin-right: 8px;
vertical-align: -6px;
}
}
&.md-fab-animated {
.boxShadowHelper(1);
border-radius: 4px;
> i {
display: none;
}
}
&.md-fab-active {
.md-fab-sheet-actions {
visibility: visible;
> a {
opacity: 1;
}
}
}
}
.sidebar_secondary_active {
.md-fab-wrapper {
margin-right: @sidebar_secondary_width - 16;
@media @screen_medium_max {
margin-right: @sidebar_secondary_width;
}
}
}
.md-toggle-group {
.md-toggle-button {
border-width: 0 0 2px;
border-style: solid;
border-color: transparent;
background: none;
line-height: 30px;
min-width: 42px;
text-align: center;
padding: 0 8px;
vertical-align: middle;
cursor: pointer;
&.md-toggle-active {
border-bottom-color: #212121;
}
}
&.md-toggle-group-small {
.md-toggle-button {
font-size: 11px;
line-height: 24px;
min-width: 16px;
padding: 0 6px;
}
}
}
.md-btn-group {
display: inline-block;
vertical-align: top;
position: relative;
font-size: 0;
white-space: nowrap;
.md-btn {
vertical-align: top;
margin-left: 0 !important;
&:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
&:not(:first-child):not(:last-child) {
border-radius: 0;
}
&:last-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
}

525
assets/less/md/_md_cards.less Normal file
View File

@@ -0,0 +1,525 @@
/* cards */
.md-card {
background: @white;
position: relative;
.boxShadowHelper(1);
border: none;
& + &,
& + .uk-grid,
.uk-grid + & {
margin-top: 25px;
}
.full_width_in_card {
padding: 16px 24px;
background: @background_color_default;
}
.md-card-toolbar {
height: @header_main_height;
//position: relative;
//z-index: 11;
padding: 0 16px;
border-bottom: 1px solid @border_color;
background: @white;
.clearfix();
&-heading-text {
.md_font(500,14px,50px);
color: @text_primary_color;
margin: 0;
float: left;
overflow: hidden;
height: 48px;
&.large {
font-size: 18px;
font-weight: 400;
}
}
.md-toggle-group {
float: left;
margin: 8px 0 0 16px;
&.md-toggle-group-small {
margin-top: 10px;
}
}
.md-card-toolbar-actions {
float: right;
padding-top: 10px;
.uk-open {
.md-card-toolbar-icon {
background: @background_color_default;
color: @text_primary_color;
}
}
.md-card-dropdown {
display: inline-block;
position: relative;
}
.selectize-control {
min-width: 220px;
margin-top: -3px;
.selectize-input {
min-height: 30px;
padding: 4px 8px;
}
.selectize-dropdown {
margin-top: -34px;
}
}
}
.md-icon {
+ .md-card-dropdown {
margin-left: 4px;
}
}
.md-card-fullscreen-deactivate {
margin: 9px 8px 0 0;
}
&-input {
border: none;
.md_font(400,18px,24px);
height: auto;
background: none !important;
padding: 12px 0;
width: 50%;
box-sizing: border-box;
}
.uk-tab {
margin-top: -2px;
border-bottom: none;
li > a {
padding: 10px 8px !important;
}
}
}
.md-card-head {
height: 160px;
position: relative;
border-bottom: 1px solid @border_color;
&-menu {
position: absolute;
right: 8px;
top: 8px;
}
&-avatar {
width: 82px;
height: 82px;
border-radius: 50%;
margin-top: 16px;
border: 2px solid @white;
display: inline-block;
}
&-text {
padding: 8px 16px 16px;
.md_font(500,16px,22px);
color: @text_primary_color;
margin: 0;
span {
display: block;
.md_font(400,12px,18px);
margin-top: -2px;
}
&.text_dark {
color: @text_primary_color !important;
}
&-over {
background-image: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
}
}
&-subtext {
position: absolute;
bottom: 10px;
left: 0;
right: 0;
padding: 0 16px;
text-align: right;
color: @white;
span {
font-size: 26px;
}
}
&-icon {
font-size: 48px;
color: @white;
vertical-align: middle;
}
&.head_background {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
border-bottom-color: transparent;
.md-card-head-text {
color: @white;
}
&_top {
background-repeat: no-repeat;
background-position: center top;
}
&_bottom {
background-repeat: no-repeat;
background-position: center bottom;
}
}
.head_chart {
height: 100px;
width: 100%;
position: absolute !important;
left: 0;
top: 40px;
}
.fitVid_player {
width: 100%;
height: 160px;
overflow: hidden;
}
&-img {
height: 100%;
width: auto;
}
iframe {
height: 160px;
}
}
.md-card-content {
padding: 16px;
&.padding-reset {
padding: 0;
}
&.large-padding {
padding: 24px 35px;
}
&.small-padding {
padding: 8px;
}
}
.md-card-footer {
padding: 16px;
font-size: 14px;
line-height: 18px;
.md-card-footer-head {
.md_font(500,16px,20px);
margin: 0 0 4px;
}
}
&.md-card-fullscreen {
position: fixed;
z-index: 9998;
overflow-x: hidden;
.md-card-fullscreen-activate {
display: none;
}
}
.md-card-fullscreen-content {
display: none;
padding: 16px 0;
.md-card-fullscreen-content-hidden & {
display: block;
visibility: hidden;
padding: 0;
}
}
&.mdToolbar_fixed {
overflow-y: hidden;
> .md-card-toolbar {
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 9999;
.boxShadowHelper(2);
}
> .md-card-content {
overflow-y: scroll;
box-sizing: border-box;
position: absolute;
width: 100%;
top: @header_main_height;
bottom: 0;
}
}
&.md-card-overlay {
overflow: hidden;
padding-bottom: 54px;
.md-card-content {
height: 142px;
overflow: hidden;
box-sizing: border-box;
&.no_truncate {
position: relative;
&:after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 8px;
background-image: linear-gradient(to top, rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
display: block;
content: '';
z-index: 10;
}
}
> pre {
margin-top: 0;
max-height: 110px;
> code {
overflow: hidden;
}
}
}
.md-card-overlay-content {
position: absolute;
top: 100%;
left: 0;
right: 0;
padding: 0 16px;
margin-top: -54px;
border-top: 1px solid @border_color;
text-align: left;
bottom: 0;
background: @white;
z-index: 10;
transition: all 280ms @md_easing;
p {
margin: 0;
+ * {
margin-top: 16px
}
+ p {
margin-top: 4px
}
}
}
.md-card-overlay-header {
.clearfix;
padding: 12px 0;
h3,
h4 {
margin: 0;
.truncate_line;
padding-right: 32px;
box-sizing: border-box;
}
h3 {
.md_font(400, 16px, 30px);
}
h4 {
.md_font(500, 14px, 30px);
}
.md-icon {
position: absolute;
right: 12px;
top: 11px;
}
}
&-active {
.md-card-overlay-content {
top: -1px;
margin-top: 0;
}
}
}
&.md-card-hover {
transition: all 280ms @md_easing;
will-change: box-shadow;
&:hover {
.boxShadowHelper(3);
}
}
// ui-kit sortable
.uk-sortable-dragged & {
.boxShadowHelper(3);
canvas {
margin: 0 auto;
display: block;
}
}
.heading_list {
padding: 0;
}
&-primary,
&-success,
&-danger,
&-warning {
border-left: 4px solid transparent;
}
&-primary {
border-left-color: @primary_color;
}
&-success {
border-left-color: @success_color;
}
&-danger {
border-left-color: @danger_color;
}
&-warning {
border-left-color: @warning_color;
}
}
.md-expand,
.md-expand-group > * {
opacity: 0;
}
.md-card-placeholder {
min-width: 100%;
}
.md-card-list-wrapper {
.border-box();
.md-card-list-header {
position: absolute;
top: -24px;
left: 0;
}
.md-card-list {
margin: 48px 0 0 0;
position: relative;
&:first-child {
margin-top: 24px;
}
> ul {
.reset_list();
> li {
min-height: 34px;
padding: 8px 16px;
font-size: 13px;
.clearfix();
transition: background 150ms,padding 200ms;
background: @white;
.boxShadowHelper(1);
&.item-shown {
background: @white;
padding: 8px 36px;
.md-card-list-item {
&-subject {
@media @screen_medium_max {
clear: both;
float: none;
padding-top: 16px;
> span {
white-space: normal;
}
}
}
&-sender {
width: auto;
overflow: hidden;
}
}
&.md-card-list-item-selected {
position: relative;
&:before {
content: '';
position: absolute;
display: block;
left: 0;
top: 0;
bottom: 0;
width: 8px;
background: @theme_light_color;
}
}
}
}
}
.md-card-list-item {
&-select,
&-avatar-wrapper,
&-sender {
float: left;
}
&-select {
padding: 6px 8px 0 0;
}
&-avatar-wrapper,
&-sender,
&-subject,
&-date {
padding: 0 8px;
}
&-avatar-wrapper {
.md-card-list-item-avatar {
background: #757575;
color: @white;
.md-user-image;
display: block;
}
span.md-card-list-item-avatar {
line-height: 34px;
text-transform: uppercase;
text-align: center;
}
}
&-sender {
width: 220px;
line-height: 34px;
> span {
.truncate_line();
}
@media @screen_xlarge_max {
display: none;
}
}
&-subject {
overflow: hidden;
font-weight: 500;
> span {
line-height: 34px;
.truncate_line();
}
.md-card-list-item-sender-small {
display: none;
@media @screen_xlarge_max {
display: block;
+ span {
line-height: inherit;
}
}
> span {
.truncate_line();
font-size: 12px;
color: #999;
}
}
}
&-date {
line-height: 34px;
float: right;
color: #999;
@media @screen_small_max {
display: none;
}
}
&-menu {
float: right;
margin: 0 0 0 8px;
position: relative;
.uk-dropdown {
.material-icons {
margin-right: 8px;
}
}
}
&-content-wrapper {
display: none;
clear: both;
opacity: 0;
}
&-content {
padding: 16px 16px 0 0;
max-height: 360px;
overflow-x: hidden;
margin: 0 0 40px;
top: 20px;
position: relative;
font-size: 14px;
+ .md-card-list-item-reply {
padding-top: 10px;
}
}
&-reply {
padding: 16px 0;
}
&-selected {
background: @theme_light_color;
}
}
}
}

274
assets/less/md/_md_colors.less Normal file
View File

@@ -0,0 +1,274 @@
// colors
@md-color-red-50: #ffebee;
@md-color-red-100: #ffcdd2;
@md-color-red-200: #ef9a9a;
@md-color-red-300: #e57373;
@md-color-red-400: #ef5350;
@md-color-red-500: #f44336;
@md-color-red-600: #e53935;
@md-color-red-700: #d32f2f;
@md-color-red-800: #c62828;
@md-color-red-900: #b71c1c;
@md-color-red-A100: #ff8a80;
@md-color-red-A200: #ff5252;
@md-color-red-A400: #ff1744;
@md-color-red-A700: #d50000;
@md-color-pink-50: #fce4ec;
@md-color-pink-100: #f8bbd0;
@md-color-pink-200: #f48fb1;
@md-color-pink-300: #f06292;
@md-color-pink-400: #ec407a;
@md-color-pink-500: #e91e63;
@md-color-pink-600: #d81b60;
@md-color-pink-700: #c2185b;
@md-color-pink-800: #ad1457;
@md-color-pink-900: #880e4f;
@md-color-pink-A100: #ff80ab;
@md-color-pink-A200: #ff4081;
@md-color-pink-A400: #f50057;
@md-color-pink-A700: #c51162;
@md-color-purple-50: #f3e5f5;
@md-color-purple-100: #e1bee7;
@md-color-purple-200: #ce93d8;
@md-color-purple-300: #ba68c8;
@md-color-purple-400: #ab47bc;
@md-color-purple-500: #9c27b0;
@md-color-purple-600: #8e24aa;
@md-color-purple-700: #7b1fa2;
@md-color-purple-800: #6a1b9a;
@md-color-purple-900: #4a148c;
@md-color-purple-A100: #ea80fc;
@md-color-purple-A200: #e040fb;
@md-color-purple-A400: #d500f9;
@md-color-purple-A700: #aa00ff;
@md-color-deep-purple-50: #ede7f6;
@md-color-deep-purple-100: #d1c4e9;
@md-color-deep-purple-200: #b39ddb;
@md-color-deep-purple-300: #9575cd;
@md-color-deep-purple-400: #7e57c2;
@md-color-deep-purple-500: #673ab7;
@md-color-deep-purple-600: #5e35b1;
@md-color-deep-purple-700: #512da8;
@md-color-deep-purple-800: #4527a0;
@md-color-deep-purple-900: #311b92;
@md-color-deep-purple-A100: #b388ff;
@md-color-deep-purple-A200: #7c4dff;
@md-color-deep-purple-A400: #651fff;
@md-color-deep-purple-A700: #6200ea;
@md-color-indigo-50: #e8eaf6;
@md-color-indigo-100: #c5cae9;
@md-color-indigo-200: #9fa8da;
@md-color-indigo-300: #7986cb;
@md-color-indigo-400: #5c6bc0;
@md-color-indigo-500: #3f51b5;
@md-color-indigo-600: #3949ab;
@md-color-indigo-700: #303f9f;
@md-color-indigo-800: #283593;
@md-color-indigo-900: #1a237e;
@md-color-indigo-A100: #8c9eff;
@md-color-indigo-A200: #536dfe;
@md-color-indigo-A400: #3d5afe;
@md-color-indigo-A700: #304ffe;
@md-color-blue-50: #e3f2fd;
@md-color-blue-100: #bbdefb;
@md-color-blue-200: #90caf9;
@md-color-blue-300: #64b5f6;
@md-color-blue-400: #42a5f5;
@md-color-blue-500: #2196f3;
@md-color-blue-600: #1e88e5;
@md-color-blue-700: #1976d2;
@md-color-blue-800: #1565c0;
@md-color-blue-900: #0d47a1;
@md-color-blue-A100: #82b1ff;
@md-color-blue-A200: #448aff;
@md-color-blue-A400: #2979ff;
@md-color-blue-A700: #2962ff;
@md-color-light-blue-50: #e1f5fe;
@md-color-light-blue-100: #b3e5fc;
@md-color-light-blue-200: #81d4fa;
@md-color-light-blue-300: #4fc3f7;
@md-color-light-blue-400: #29b6f6;
@md-color-light-blue-500: #03a9f4;
@md-color-light-blue-600: #039be5;
@md-color-light-blue-700: #0288d1;
@md-color-light-blue-800: #0277bd;
@md-color-light-blue-900: #01579b;
@md-color-light-blue-A100: #80d8ff;
@md-color-light-blue-A200: #40c4ff;
@md-color-light-blue-A400: #00b0ff;
@md-color-light-blue-A700: #0091ea;
@md-color-cyan-50: #e0f7fa;
@md-color-cyan-100: #b2ebf2;
@md-color-cyan-200: #80deea;
@md-color-cyan-300: #4dd0e1;
@md-color-cyan-400: #26c6da;
@md-color-cyan-500: #00bcd4;
@md-color-cyan-600: #00acc1;
@md-color-cyan-700: #0097a7;
@md-color-cyan-800: #00838f;
@md-color-cyan-900: #006064;
@md-color-cyan-A100: #84ffff;
@md-color-cyan-A200: #18ffff;
@md-color-cyan-A400: #00e5ff;
@md-color-cyan-A700: #00b8d4;
@md-color-teal-50: #e0f2f1;
@md-color-teal-100: #b2dfdb;
@md-color-teal-200: #80cbc4;
@md-color-teal-300: #4db6ac;
@md-color-teal-400: #26a69a;
@md-color-teal-500: #009688;
@md-color-teal-600: #00897b;
@md-color-teal-700: #00796b;
@md-color-teal-800: #00695c;
@md-color-teal-900: #004d40;
@md-color-teal-A100: #a7ffeb;
@md-color-teal-A200: #64ffda;
@md-color-teal-A400: #1de9b6;
@md-color-teal-A700: #00bfa5;
@md-color-green-50: #e8f5e9;
@md-color-green-100: #c8e6c9;
@md-color-green-200: #a5d6a7;
@md-color-green-300: #81c784;
@md-color-green-400: #66bb6a;
@md-color-green-500: #4caf50;
@md-color-green-600: #43a047;
@md-color-green-700: #388e3c;
@md-color-green-800: #2e7d32;
@md-color-green-900: #1b5e20;
@md-color-green-A100: #b9f6ca;
@md-color-green-A200: #69f0ae;
@md-color-green-A400: #00e676;
@md-color-green-A700: #00c853;
@md-color-light-green-50: #f1f8e9;
@md-color-light-green-100: #dcedc8;
@md-color-light-green-200: #c5e1a5;
@md-color-light-green-300: #aed581;
@md-color-light-green-400: #9ccc65;
@md-color-light-green-500: #8bc34a;
@md-color-light-green-600: #7cb342;
@md-color-light-green-700: #689f38;
@md-color-light-green-800: #558b2f;
@md-color-light-green-900: #33691e;
@md-color-light-green-A100: #ccff90;
@md-color-light-green-A200: #b2ff59;
@md-color-light-green-A400: #76ff03;
@md-color-light-green-A700: #64dd17;
@md-color-lime-50: #f9fbe7;
@md-color-lime-100: #f0f4c3;
@md-color-lime-200: #e6ee9c;
@md-color-lime-300: #dce775;
@md-color-lime-400: #d4e157;
@md-color-lime-500: #cddc39;
@md-color-lime-600: #c0ca33;
@md-color-lime-700: #afb42b;
@md-color-lime-800: #9e9d24;
@md-color-lime-900: #827717;
@md-color-lime-A100: #f4ff81;
@md-color-lime-A200: #eeff41;
@md-color-lime-A400: #c6ff00;
@md-color-lime-A700: #aeea00;
@md-color-yellow-50: #fffde7;
@md-color-yellow-100: #fff9c4;
@md-color-yellow-200: #fff59d;
@md-color-yellow-300: #fff176;
@md-color-yellow-400: #ffee58;
@md-color-yellow-500: #ffeb3b;
@md-color-yellow-600: #fdd835;
@md-color-yellow-700: #fbc02d;
@md-color-yellow-800: #f9a825;
@md-color-yellow-900: #f57f17;
@md-color-yellow-A100: #ffff8d;
@md-color-yellow-A200: #ffff00;
@md-color-yellow-A400: #ffea00;
@md-color-yellow-A700: #ffd600;
@md-color-amber-50: #fff8e1;
@md-color-amber-100: #ffecb3;
@md-color-amber-200: #ffe082;
@md-color-amber-300: #ffd54f;
@md-color-amber-400: #ffca28;
@md-color-amber-500: #ffc107;
@md-color-amber-600: #ffb300;
@md-color-amber-700: #ffa000;
@md-color-amber-800: #ff8f00;
@md-color-amber-900: #ff6f00;
@md-color-amber-A100: #ffe57f;
@md-color-amber-A200: #ffd740;
@md-color-amber-A400: #ffc400;
@md-color-amber-A700: #ffab00;
@md-color-orange-50: #fff3e0;
@md-color-orange-100: #ffe0b2;
@md-color-orange-200: #ffcc80;
@md-color-orange-300: #ffb74d;
@md-color-orange-400: #ffa726;
@md-color-orange-500: #ff9800;
@md-color-orange-600: #fb8c00;
@md-color-orange-700: #f57c00;
@md-color-orange-800: #ef6c00;
@md-color-orange-900: #e65100;
@md-color-orange-A100: #ffd180;
@md-color-orange-A200: #ffab40;
@md-color-orange-A400: #ff9100;
@md-color-orange-A700: #ff6d00;
@md-color-deep-orange-50: #fbe9e7;
@md-color-deep-orange-100: #ffccbc;
@md-color-deep-orange-200: #ffab91;
@md-color-deep-orange-300: #ff8a65;
@md-color-deep-orange-400: #ff7043;
@md-color-deep-orange-500: #ff5722;
@md-color-deep-orange-600: #f4511e;
@md-color-deep-orange-700: #e64a19;
@md-color-deep-orange-800: #d84315;
@md-color-deep-orange-900: #bf360c;
@md-color-deep-orange-A100: #ff9e80;
@md-color-deep-orange-A200: #ff6e40;
@md-color-deep-orange-A400: #ff3d00;
@md-color-deep-orange-A700: #dd2c00;
@md-color-brown-50: #efebe9;
@md-color-brown-100: #d7ccc8;
@md-color-brown-200: #bcaaa4;
@md-color-brown-300: #a1887f;
@md-color-brown-400: #8d6e63;
@md-color-brown-500: #795548;
@md-color-brown-600: #6d4c41;
@md-color-brown-700: #5d4037;
@md-color-brown-800: #4e342e;
@md-color-brown-900: #3e2723;
@md-color-grey-50: #fafafa;
@md-color-grey-100: #f5f5f5;
@md-color-grey-200: #eeeeee;
@md-color-grey-300: #e0e0e0;
@md-color-grey-400: #bdbdbd;
@md-color-grey-500: #9e9e9e;
@md-color-grey-600: #757575;
@md-color-grey-700: #616161;
@md-color-grey-800: #424242;
@md-color-grey-900: #212121;
@md-color-blue-grey-50: #eceff1;
@md-color-blue-grey-100: #cfd8dc;
@md-color-blue-grey-200: #b0bec5;
@md-color-blue-grey-300: #90a4ae;
@md-color-blue-grey-400: #78909c;
@md-color-blue-grey-500: #607d8b;
@md-color-blue-grey-600: #546e7a;
@md-color-blue-grey-700: #455a64;
@md-color-blue-grey-800: #37474f;
@md-color-blue-grey-900: #263238;

239
assets/less/md/_md_forms.less Normal file
View File

@@ -0,0 +1,239 @@
/* forms */
select,
textarea,
input:not([type]),
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"] {
outline: none;
&.md-input {
border-radius: 0;
border-width: 0 0 1px;
border-style: solid;
border-color: @border_color;
.md_font(400,15px,18px);
box-shadow: inset 0 -1px 0 rgba(0,0,0,0);
box-sizing: border-box;
padding: 12px 4px;
background: transparent;
width: 100%;
display: block;
&.md-input-danger {
border-color: @danger_color;
&:focus {
border-bottom-color: @danger_color;
}
}
&.md-input-success {
border-color: @success_color;
&:focus {
border-bottom-color: @success_color;
}
}
&:focus {
background: transparent;
border-color: @border_color;
}
&-small {
padding: 4px;
}
&.uk-form-width {
&-mini {
width: 40px;
}
&-small {
width: 130px;
}
&-medium {
width: 200px;
}
&-large {
width: 500px;
}
}
}
}
select.md-input {
&.uk-form-width-mini {
width: 65px;
}
}
.md-input {
&-width-small {
min-width: 80px !important;
}
&-width-medium {
min-width: 160px !important;
}
&-width-large {
min-width: 320px !important;
}
}
textarea {
&.md-input {
min-height: 80px;
resize: none;
overflow: hidden;
transition: height 200ms ease-out;
line-height: 24px;
}
&.no_autosize {
min-height: inherit;
overflow: auto;
transition: none;
resize: both;
}
}
.md-input-wrapper {
position: relative;
padding-top: 4px;
width: 100%;
display: block;
.md-input-bar {
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
&:before,
&:after {
content: '';
display: block;
position: absolute;
bottom: 0;
width: 0;
height: 2px;
background: @primary_color_dark;
transition: width 400ms @md_easing;
}
&:before {
left: 50%
}
&:after {
right: 50%
}
&.uk-form-width {
&-mini {
width: 40px;
}
&-small {
width: 130px;
}
&-medium {
width: 200px;
}
&-large {
width: 500px;
}
}
}
> label {
color: @text_secondary_color;
position: absolute;
top: 16px;
left: 4px;
right: 0;
pointer-events: none;
transition: all 150ms ease-out;
}
+ * {
margin-top: 10px;
}
&.md-input-wrapper-disabled {
> label {
color: @input_disabled_color;
}
}
&-count {
padding-bottom: 24px;
.md-input-bar {
bottom: 24px;
}
.text-count-wrapper {
font-size: 12px;
position: absolute;
right: 0;
bottom: 0;
opacity: 0;
transition: opacity 200ms ease-in;
.md-input-wrapper-count > & {
position: absolute;
bottom: 0;
right: 0;
}
}
}
}
.md-input-filled,
.md-input-focus {
> label {
top: -6px;
font-size: 12px;
}
&.md-input-wrapper-count {
.text-count-wrapper {
opacity: 1;
}
}
}
.md-input-focus {
.md-input-bar:before,
.md-input-bar:after {
width: 50%;
}
}
.md-input-wrapper-danger {
.md-input-bar {
&:before,
&:after {
background: @danger_color;
}
}
&.md-input-wrapper-count {
.text-count-wrapper {
color: @danger_color;
}
}
}
.md-input-wrapper-success {
.md-input-bar {
&:before,
&:after {
background: @success_color;
}
}
&.md-input-wrapper-count {
.text-count-wrapper {
color: @success_color;
}
}
}
.md-form-group {
position: relative;
}
label.md-label {
color: #999;
padding: 0 6px;
font-size: 11px;
}

58
assets/less/md/_md_icons.less Normal file
View File

@@ -0,0 +1,58 @@
// Material Design Icons
// http://google.github.io/material-design-icons/
@material_icons_directory: '../icons/material-design-icons/';
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url("@{material_icons_directory}MaterialIcons-Regular.eot"); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url("@{material_icons_directory}MaterialIcons-Regular.woff2") format('woff2'),
url("@{material_icons_directory}MaterialIcons-Regular.woff") format('woff'),
url("@{material_icons_directory}MaterialIcons-Regular.ttf") format('truetype');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 18px; /* Preferred icon size */
display: inline-block;
width: 1em;
height: 1em;
line-height: 1;
text-transform: none;
letter-spacing: normal;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
vertical-align: -4px;
color: rgba(0, 0, 0, 0.54);
&.md-inactive {
color: rgba(0, 0, 0, 0.26);
}
&.md-24 {
font-size: 24px;
vertical-align: -8px;
}
&.md-36 {
font-size: 36px;
vertical-align: -16px;
}
&.md-48 {
font-size: 48px;
vertical-align: -24px;
}
&.md-light {
color: rgba(255, 255, 255, 1);
&.md-inactive {
color: rgba(255, 255, 255, 0.3);
}
}
}

285
assets/less/md/_md_list.less Normal file
View File

@@ -0,0 +1,285 @@
/* list */
.md-list {
.reset_list;
.border-box;
.uk-nestable-list > li,
> li {
min-height: 48px;
padding: 8px 4px;
box-sizing: border-box;
border-bottom: 1px solid @border_color;
position: relative;
> .md-list-content {
overflow: hidden;
> span {
display: block;
}
.md-list-heading {
margin: 0;
font-weight: 500;
display: block;
overflow: hidden;
padding-bottom: 1px;
}
.md-list-menu {
float: right;
.md-list-menu-toggle {
display: block;
font-size: 18px;
color: rgba(0,0,0,.8);
width: 28px;
height: 28px;
line-height: 28px;
border-radius: 14px;
text-align: center;
}
}
.uk-badge {
float: right;
color: @white !important;
}
.md-list-action {
float: right;
margin-left: 8px;
margin-top: 2px;
display: none;
}
.md-list-action-placeholder {
float: right;
margin-left: 8px;
display: none;
width: 32px;
height: 32px;
}
}
.md-list-action-dropdown {
position: absolute;
right: 16px;
top: 10px;
display: none;
}
> a.md-list-content {
display: block;
color: @text_primary_color;
}
&:last-child {
border-bottom: none;
}
&.md-list-item-active {
color: @accent_color;
background: @background_color_default_hex;
}
&.md-list-item-disabled {
> .md-list-content {
color: @muted_color;
span {
color: @muted_color !important;
}
}
}
&.heading_list {
min-height: 32px;
padding: 32px 8px 16px;
border-bottom: none;
background: transparent !important;
text-transform: uppercase;
}
.uk-touch &,
&:hover {
> .md-list-addon-element {
.uk-nestable-handle {
display: block;
}
}
> .md-list-content {
.md-list-action,
.md-list-action-placeholder {
display: block;
}
}
.md-list-action-dropdown {
display: block;
}
}
}
.uk-nestable-list > li {
margin-left: 64px;
}
&-addon {
> li {
margin-left: 64px;
position: relative;
&:last-child {
.md-list-addon-element {
border-bottom: none;
bottom: 0;
}
}
&:first-child {
.md-list-addon-element {
top: 0;
}
}
&.md-list-item-active {
.md-list-addon-element {
&,
.material-icons {
color: @accent_color;
}
}
}
}
&-element {
position: absolute;
left: -64px;
top: -1px;
bottom: -1px;
width: 64px;
text-align: center;
padding: 8px 0;
display: block;
.element-status {
position: absolute;
right: 12px;
top: 10px;
width: 12px;
height: 12px;
border-radius: 50%;
background: @muted_color;
border: 1px solid @white;
&-danger {
background: @danger_color;
}
&-success {
background: @success_color;
}
&-warning {
background: @warning_color;
}
}
> .md-list-addon-avatar {
margin-top: 2px;
}
> .md-list-addon-icon {
font-size: 28px;
margin-top: 4px;
color: @text_secondary_color;
}
> .material-icons {
margin-top: 6px;
}
.iradio_md,
.icheckbox_md {
margin-top: 10px;
}
.uk-nestable-handle {
position: absolute;
left: -2px;
top: 12px;
display: none;
}
}
}
&-interactive {
li {
cursor: pointer;
}
}
&-bg {
background: @white;
}
&-separated {
li {
background: @white;
padding: 8px;
+ li {
border-top: none;
margin-top: 8px;
}
}
}
&-bg-no-sep {
background: @white;
padding: 8px;
li > .md-list-content {
padding: 0 4px;
}
}
&-outside {
> li {
padding: 0;
> .md-list-content {
padding: 8px 16px;
display: block;
color: @text_primary_color;
}
&.md-list-item-active,
&:hover:not(.heading_list) {
background: @background_color_default;
}
&.heading_list {
padding: 32px 16px 16px;
}
}
&.md-list-addon {
li {
margin-left: 0;
.md-list-addon-element {
position: relative;
top: auto;
left: auto;
float: left;
}
.md-list-content {
padding-left: 0;
}
}
}
}
/*&-outside-wrapper {
overflow: hidden;
}*/
.uk-nestable-list {
padding-left: 0;
.uk-nestable-item {
padding-right: 0;
}
}
.uk-nestable-item + .uk-nestable-item {
margin-top: 0;
}
&-right {
&.md-list-addon {
> li {
margin-left: 0;
margin-right: 64px;
.md-list-addon-element {
left: auto;
right: -64px;
}
}
}
}
&-borderless {
> li {
border-bottom: none;
}
}
}
.uk-touch {
.md-list-addon-element {
.uk-nestable-handle {
display: block !important;
}
}
.md-list-content {
.md-list-action,
.md-list-action-placeholder {
display: block !important;
}
}
.md-list-action-dropdown {
display: block !important;
}
}

49
assets/less/md/_md_panels.less Normal file
View File

@@ -0,0 +1,49 @@
/* panels */
.md-panel-full {
.border-box();
position: relative;
overflow: hidden;
min-height: 100%;
> .uk-grid {
height: 100%;
[class*=uk-width] {
height: 100%;
}
}
.md-panel-full-aside {
margin: 16px 16px 32px;
padding: 16px;
&.md-panel-full-aside-bg {
background: @white;
}
}
.md-panel-full-content {
background: @white;
padding: 25px 25px 90px;
width: inherit;
min-width: 100%;
min-height: 100%;
> .md-panel-full-content-inner {
position: relative;
z-index: 10;
}
&:before {
width: inherit;
content: '';
position: absolute;
background: @white;
display: block;
right: 0;
top: 0;
bottom: 0;
.md-box-shadow-left();
z-index: 5;
}
.md-panel-full-content-header {
margin-bottom: 24px;
.md-panel-full-content-menu {
float: right;
}
}
}
}

59
assets/less/md/_md_precompiled_colors.less Normal file
View File

@@ -0,0 +1,59 @@
// variables
@color_variants: 50,100,200,300,400,500,600,700,800,900,A100,A200,A400,A700;
@color_array: 'red','pink','purple','deep-purple','indigo','blue','light-blue','cyan','teal','green','light-green','lime','yellow','amber','orange','deep-orange';
@color_array_no_accent: 'brown','grey','blue-grey';
// colors with accents
.makeMdVariants(@i, @actColor) when (@i <= 14) {
@colorVariant: extract(@color_variants, @i);
.md-color-@{actColor}-@{colorVariant} {
color: ~"@{md-color-@{actColor}-@{colorVariant}}" !important;
}
.md-bg-@{actColor}-@{colorVariant} {
background-color: ~"@{md-color-@{actColor}-@{colorVariant}}" !important;
}
.makeMdVariants(@i + 1,@actColor);
}
.makeMdColors(@i) when (@i <= 16) {
@actColor: extract(@color_array, @i);
.makeMdVariants(1,e(@actColor));
.makeMdColors(@i + 1);
}
.makeMdColors(1);
// colors without accent
.makeMdVariantsNoAccent(@i, @actColor) when (@i <= 10) {
@colorVariant: extract(@color_variants, @i);
.md-color-@{actColor}-@{colorVariant} {
color: ~"@{md-color-@{actColor}-@{colorVariant}}" !important;
}
.md-bg-@{actColor}-@{colorVariant} {
background-color: ~"@{md-color-@{actColor}-@{colorVariant}}" !important;
}
.makeMdVariantsNoAccent(@i + 1,@actColor);
}
.makeMdColorsNoAccent(@i) when (@i <= 3) {
@actColorNoAccent: extract(@color_array_no_accent, @i);
.makeMdVariantsNoAccent(1,e(@actColorNoAccent));
.makeMdColorsNoAccent(@i + 1);
}
.makeMdColorsNoAccent(1);
.md-color-white {
color: #fff !important;
}

33
assets/less/md/_md_top_bar.less Normal file
View File

@@ -0,0 +1,33 @@
/* top bar */
.md-top-bar {
.md-top-bar-checkbox {
padding-top: 10px;
}
.md-top-bar-icons {
margin-top: 5px;
}
.md-top-bar-icons,
.md-top-bar-checkbox {
display: inline-block;
}
.md-btn-group {
margin-top: 4px;
}
.md-top-bar-actions-left {
float: left;
padding-left: 16px;
.md-btn-group {
margin-left: 8px;
}
}
.md-top-bar-actions-right {
float: right;
padding-right: 16px;
.md-btn-group {
margin-right: 8px;
}
}
.md-btn-small {
padding: 2px 12px;
}
}

191
assets/less/md/_md_utils.less Normal file
View File

@@ -0,0 +1,191 @@
/*** utils ***/
/* avatar */
.md-user-image {
width: 34px;
border-radius: 50%;
&-large {
width: 82px;
border-radius: 50%;
}
}
.md-user {
&-placeholder {
background-color: @background_color_default;
width: 34px;
height: 34px;
border-radius: 50%;
}
&-letters {
display: inline-block;
line-height: 35px;
width: 34px;
height: 34px;
border-radius: 50%;
text-align: center;
text-transform: uppercase;
font-weight: 500;
background-color: @background_color_default;
}
}
/* icons */
.md-icon {
font-size: 24px;
line-height: 32px !important;
height: 32px !important;
color: @text_secondary_color;
border-radius: 50%;
cursor: pointer;
transition: background 280ms ease-out,color 280ms ease-out;
width: 32px !important;
text-align: center;
-webkit-tap-highlight-color: rgba(0,0,0,0);
&:hover,
&:focus,
&:active,
&.active {
color: @text_primary_color;
background: rgba(0,0,0,.08);
}
&-light {
color: @white;
&:hover,
&:focus,
&:active {
color: @white;
background: rgba(0,0,0,.2);
}
}
&-dark {
color: @text_primary_color;
&:hover,
&:focus,
&:active {
color: @text_primary_color;
background: rgba(255,255,255,.6);
}
}
& + & {
margin-left: 4px;
}
&-btn {
display: inline-block;
&.active {
.md-icon {
color: @text_primary_color;
background: rgba(0,0,0,.08);
}
}
}
button& {
background: none;
border: none;
outline: none;
}
}
.uk-open {
.md-icon {
color: @text_primary_color;
background: rgba(0,0,0,.08);
&-light {
color: @white;
background: rgba(0,0,0,.2);
}
&-dark {
color: @text_primary_color;
background: rgba(255,255,255,.6);
}
}
}
/* dropdown list */
.md-list-inputs {
.reset_list();
li {
+ li {
margin-top: 8px;
}
.icheckbox_md {
float: left;
}
label {
overflow: hidden;
padding-left: 8px;
display: block;
cursor: pointer;
}
}
}
/* hr */
.md-hr {
margin: 32px 0;
height: 0;
border-top: 2px solid @border_color;
}
/* animated show */
@keyframes hierarchical_show {
0% {
opacity: 0;
transform: scale3d(.2, .2, 2);
}
50% {
opacity: 1;
}
100% {
transform: scale3d(1, 1, 1);
}
}
.hierarchical_show {
will-change: transform, opacity;
> * {
visibility: hidden;
}
&_inView {
> * {
animation-fill-mode: both;
animation-timing-function: @md_easing;
animation-duration: 700ms;
animation-name: hierarchical_show;
visibility: visible;
}
}
}
@keyframes hierarchical_slide {
0% {
opacity: 0;
transform: translate3d(0, 160%, 0);
}
33% {
opacity: 1;
}
100% {
transform: translate3d(0, 0, 0);
}
}
.hierarchical_slide {
will-change: transform, opacity;
> * {
visibility: hidden;
}
&_inView {
> * {
animation-fill-mode: both;
animation-timing-function: @md_easing;
animation-duration: 700ms;
animation-name: hierarchical_slide;
visibility: visible;
}
}
}
.fast_animation {
animation-duration: 350ms;
}

61
assets/less/md/_md_variables_mixins.less Normal file
View File

@@ -0,0 +1,61 @@
// shadows
.boxShadowHelper(@level: 1){
& when (@level = 0) {
box-shadow: none !important;
}
& when (@level = 1) {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
& when (@level = 2) {
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
& when (@level = 3) {
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
& when (@level = 4) {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
& when (@level = 5) {
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
}
.md-box-shadow-left() {
box-shadow: -2px 2px 5px rgba(0,0,0,.26);
}
.md-box-shadow-right() {
box-shadow: 2px 2px 5px rgba(0,0,0,.26);
}
.md-box-shadow-medium-right() {
box-shadow: 4px 0 8px rgba(0,0,0,.26);
}
/* bg colors */
.md-bg-cyan {
background-color: @md-color-cyan-600 !important;
color: @white;
}
.md-bg-light-green {
background-color: @md-color-light-green-600 !important;
color: @white;
}
.md-bg-grey {
background-color: @md-color-grey-700 !important;
color: @white;
}
.md-bg-red {
background-color: @md-color-red-700 !important;
color: @white;
}
.md-bg-light-blue {
background-color: @md-color-light-blue-700 !important;
color: @white;
}
.md-bg-teal {
background-color: @md-color-teal-600 !important;
color: @white;
}
.md-bg-purple {
background-color: @md-color-purple-600 !important;
color: @white;
}

21
assets/less/md/md_main.less Normal file
View File

@@ -0,0 +1,21 @@
// variables_mixins
@import '_md_variables_mixins';
// buttons
@import '_md_buttons';
// colors
@import '_md_colors';
@import '_md_precompiled_colors';
// cards
@import '_md_cards';
// forms
@import '_md_forms';
// icons
@import '_md_icons';
// list
@import '_md_list';
// panels
@import '_md_panels';
// top bar
@import '_md_top_bar';
// utils
@import '_md_utils';

23
assets/less/themes/_default.less Normal file
View File

@@ -0,0 +1,23 @@
// default theme
@theme_default_color: @md-color-light-blue-500;
@theme_default_colorLight: @md-color-light-blue-50;
@theme_default_colorDark: @md-color-light-blue-700;
@theme_default_colorAccent: @md-color-light-green-A200;
.uk-navbar {
background: @theme_default_color;
&-nav {
> li > a {
color: @white;
&:hover,
&:active {
background: none;
color: @white;
}
}
}
}
.hero_section {
background: @theme_default_color;
}