Added views for QOR admin
This commit is contained in:
Nedim
1
app/views/qor/assets/stylesheets/app.css
Normal file
1
app/views/qor/assets/stylesheets/app.css
Normal file
File diff suppressed because one or more lines are too long
BIN
app/views/qor/assets/stylesheets/chosen-sprite.png
Normal file
BIN
app/views/qor/assets/stylesheets/chosen-sprite.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 538 B |
BIN
app/views/qor/assets/stylesheets/chosen-sprite@2x.png
Normal file
BIN
app/views/qor/assets/stylesheets/chosen-sprite@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 738 B |
1
app/views/qor/assets/stylesheets/datetimepicker.css
Normal file
1
app/views/qor/assets/stylesheets/datetimepicker.css
Normal file
File diff suppressed because one or more lines are too long
65
app/views/qor/assets/stylesheets/fonts.css
Normal file
65
app/views/qor/assets/stylesheets/fonts.css
Normal file
@@ -0,0 +1,65 @@
|
||||
@font-face {
|
||||
font-family: 'Material Icons';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(../fonts/MaterialIcons.woff) format('woff');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: local('Roboto Italic'), local('Roboto-Italic'), url(//fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu52xM.woff) format('woff');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: local('Roboto Light'), local('Roboto-Light'), url(//fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5vAA.woff) format('woff');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Roboto'), local('Roboto-Regular'), url(//fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Me5g.woff) format('woff');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
src: local('Roboto Medium'), local('Roboto-Medium'), url(//fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9vAA.woff) format('woff');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: local('Roboto Bold'), local('Roboto-Bold'), url(//fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlvAA.woff) format('woff');
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px; /* Preferred icon size */
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
line-height: 1;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
word-break: 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. */
|
||||
-webkit-font-feature-settings: 'liga';
|
||||
-moz-font-feature-settings: 'liga';
|
||||
font-feature-settings: 'liga';
|
||||
-ms-font-feature-settings: 'liga';
|
||||
}
|
||||
1
app/views/qor/assets/stylesheets/qor.css
Normal file
1
app/views/qor/assets/stylesheets/qor.css
Normal file
File diff suppressed because one or more lines are too long
31
app/views/qor/assets/stylesheets/qor_admin_default.css
Normal file
31
app/views/qor/assets/stylesheets/qor_admin_default.css
Normal file
File diff suppressed because one or more lines are too long
BIN
app/views/qor/assets/stylesheets/redactor-font.eot
Normal file
BIN
app/views/qor/assets/stylesheets/redactor-font.eot
Normal file
Binary file not shown.
53
app/views/qor/assets/stylesheets/scss/_mixins.scss
Normal file
53
app/views/qor/assets/stylesheets/scss/_mixins.scss
Normal file
@@ -0,0 +1,53 @@
|
||||
// Mixins
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Material Design Lite's mixins
|
||||
@import "mdl/mixins";
|
||||
|
||||
|
||||
// Clearfix
|
||||
//
|
||||
// For modern browsers
|
||||
// 1. The space content is one way to avoid an Opera bug when the
|
||||
// contenteditable attribute is included anywhere else in the document.
|
||||
// Otherwise it causes space to appear at the top and bottom of elements
|
||||
// that are clearfixed.
|
||||
// 2. The use of `table` rather than `block` is only necessary if using
|
||||
// `:before` to contain the top-margins of child elements.
|
||||
//
|
||||
// Source: http://nicolasgallagher.com/micro-clearfix-hack/
|
||||
|
||||
@mixin clearfix() {
|
||||
&:before,
|
||||
&:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin text-hide() {
|
||||
font: 0/0 a;
|
||||
color: transparent;
|
||||
text-shadow: none;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// Text overflow
|
||||
// Requires inline-block or block for proper styling
|
||||
|
||||
@mixin text-overflow() {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@mixin shadow-2dp-bottom() {
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
|
||||
0 3px 1px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
|
||||
0 3px 5px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
|
||||
}
|
||||
19
app/views/qor/assets/stylesheets/scss/_variables.scss
Normal file
19
app/views/qor/assets/stylesheets/scss/_variables.scss
Normal file
@@ -0,0 +1,19 @@
|
||||
// Variables
|
||||
// --------------------------------------------------
|
||||
// Material Design Lite's variables
|
||||
@import "mdl/variables"; // Customize palette
|
||||
// Download: https://storage.googleapis.com/code.getmdl.io/1.0.3/material.blue-pink.min.css
|
||||
$color-primary: $palette-light-blue-500;
|
||||
$color-primary-dark: $palette-light-blue-700; // Z-index master list
|
||||
//
|
||||
// Warning: Avoid customizing these values. They're used for a bird's eye view
|
||||
// of components dependent on the z-axis and are designed to all work together.
|
||||
$zindex-fixer: 990;
|
||||
$zindex-slideout: 1000;
|
||||
$zindex-bottomsheets: 1005;
|
||||
$zindex-modal: 1010;
|
||||
$color-main-header: #0277bd;
|
||||
$color-slideout-header: unquote("rgb(#{$color-primary})");
|
||||
$color-dash: #ededed;
|
||||
$color-body-bg: #f5f5f5;
|
||||
$width-bottomsheet: 640px;
|
||||
21
app/views/qor/assets/stylesheets/scss/app.scss
Normal file
21
app/views/qor/assets/stylesheets/scss/app.scss
Normal file
@@ -0,0 +1,21 @@
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
@import 'app/fonts';
|
||||
@import 'app/layout';
|
||||
@import 'app/typography';
|
||||
@import 'app/forms';
|
||||
@import 'app/select';
|
||||
@import 'app/buttons';
|
||||
@import 'app/labels';
|
||||
@import 'app/table';
|
||||
@import 'app/search-center';
|
||||
@import 'app/menu';
|
||||
@import 'app/qor-icons';
|
||||
@import 'app/alerts';
|
||||
@import 'app/actions';
|
||||
@import 'app/sections';
|
||||
@import 'app/pagination';
|
||||
@import 'app/tabs';
|
||||
@import 'app/utilities';
|
||||
@import 'app/mobile';
|
||||
@import 'app/print';
|
||||
131
app/views/qor/assets/stylesheets/scss/app/_actions.scss
Normal file
131
app/views/qor/assets/stylesheets/scss/app/_actions.scss
Normal file
@@ -0,0 +1,131 @@
|
||||
.mdl-button {
|
||||
font-size: 12px;
|
||||
}
|
||||
.qor-actions {
|
||||
float: left;
|
||||
min-height: 32px;
|
||||
margin-right: 8px;
|
||||
padding: 8px 0;
|
||||
@include clearfix();
|
||||
|
||||
&:first-child {
|
||||
.qor-selector {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
.mdl-button {
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.qor-selector,
|
||||
.qor-action--text,
|
||||
.qor-action--label,
|
||||
.qor-action--select,
|
||||
.qor-action--button {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.qor-action--select {
|
||||
height: 32px;
|
||||
border: 2px solid unquote('rgb(#{$color-primary})');
|
||||
}
|
||||
|
||||
.qor-action--label {
|
||||
display: inline-block;
|
||||
height: 28px;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
font-size: 14px;
|
||||
line-height: 28px;
|
||||
color: unquote('rgba(#{$color-black}, 0.54)');
|
||||
background-color: #fff;
|
||||
border: 2px solid unquote('rgba(#{$color-black}, 0.12)');
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
color: unquote('rgba(#{$color-black}, 0.54)');
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
padding-right: 0;
|
||||
color: unquote('rgba(#{$color-black}, 0.87)');
|
||||
border-color: unquote('rgb(#{$color-primary})');
|
||||
}
|
||||
|
||||
> i {
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
height: 28px;
|
||||
margin-left: 6px;
|
||||
padding-left: 2px;
|
||||
font-size: 16px;
|
||||
line-height: 28px;
|
||||
background-color: unquote('rgb(#{$color-primary})');
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
+ .qor-action--select,
|
||||
+ .qor-action--label {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
.qor-action-bulk-buttons,
|
||||
.qor-action-forms {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
padding: 8px 0;
|
||||
}
|
||||
.qor-action--button {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
|
||||
+ .qor-action--button {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.qor-action-bulk-edit {
|
||||
float: left;
|
||||
margin-right: 16px;
|
||||
}
|
||||
.qor-action-forms {
|
||||
padding-bottom: 0;
|
||||
.qor-form__actions {
|
||||
margin-top: 0;
|
||||
}
|
||||
> .qor-action-button {
|
||||
margin-right: 24px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
> .action-form {
|
||||
margin-right: 24px;
|
||||
}
|
||||
> .action-form,
|
||||
.qor-form-section,
|
||||
.qor-form__actions {
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
.qor-form__actions {
|
||||
.mdl-button {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.qor-action-disabled{
|
||||
background-color: rgba(0,0,0,.12) !important;
|
||||
box-shadow: none !important;
|
||||
color: rgba(0,0,0,.2) !important;
|
||||
}
|
||||
145
app/views/qor/assets/stylesheets/scss/app/_alerts.scss
Normal file
145
app/views/qor/assets/stylesheets/scss/app/_alerts.scss
Normal file
@@ -0,0 +1,145 @@
|
||||
// Alerts
|
||||
// --------------------------------------------------
|
||||
.qor-alert {
|
||||
padding: 24px 48px 0 24px;
|
||||
line-height: 24px;
|
||||
color: unquote('rgb(#{$palette-grey-700})');
|
||||
background-color: unquote('rgb(#{$palette-grey-100})');
|
||||
position: fixed;
|
||||
z-index: 99999;
|
||||
margin: 0;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
transform: translate(-50%, -110%);
|
||||
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
will-change: transform;
|
||||
transition: transform 0.25s cubic-bezier(0.4, 0, 1, 1);
|
||||
|
||||
@include shadow-2dp();
|
||||
@include clearfix();
|
||||
|
||||
&.qor-alert__active {
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
|
||||
> button {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 9px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.qor-alert-message {
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.qor-alert--success {
|
||||
color: unquote('rgb(#{$palette-blue-700})');
|
||||
background-color: unquote('rgb(#{$palette-blue-100})');
|
||||
}
|
||||
|
||||
.qor-alert--error {
|
||||
color: unquote('rgb(#{$palette-pink-700})');
|
||||
background-color: unquote('rgb(#{$palette-pink-100})');
|
||||
}
|
||||
|
||||
.mdl-dialog-bg {
|
||||
position: fixed;
|
||||
background: unquote('rgba(#{$color-black}, 0.54)');
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 9998;
|
||||
}
|
||||
|
||||
// Errors
|
||||
// --------------------------------------------------
|
||||
|
||||
.qor-error {
|
||||
background-color: #fff;
|
||||
list-style: none;
|
||||
|
||||
> li {
|
||||
+ li {
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
position: relative;
|
||||
display: block;
|
||||
margin-bottom: 0;
|
||||
padding-left: 32px;
|
||||
line-height: 1.3;
|
||||
font-weight: normal;
|
||||
margin-bottom: 24px;
|
||||
color: unquote('rgb(#{$color-accent})');
|
||||
|
||||
> i {
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
left: -5px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
> span {
|
||||
padding-right: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.qor-modal {
|
||||
.qor-error {
|
||||
margin: 24px 0;
|
||||
}
|
||||
}
|
||||
|
||||
#dialog {
|
||||
display: none;
|
||||
.mdl-dialog {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: -moz-fit-content;
|
||||
width: -webkit-fit-content;
|
||||
width: fit-content;
|
||||
height: -moz-fit-content;
|
||||
height: -webkit-fit-content;
|
||||
height: fit-content;
|
||||
margin: auto;
|
||||
padding: 1em;
|
||||
background: white;
|
||||
color: black;
|
||||
display: block;
|
||||
z-index: 9999;
|
||||
top: 200px;
|
||||
max-width: 50%;
|
||||
min-width: 30%;
|
||||
border: 2px solid rgba(0, 0, 0, 0.05);
|
||||
.mdl-dialog__content {
|
||||
> p {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin: 0;
|
||||
width: 40px;
|
||||
&.mdl-dialog__message {
|
||||
padding: 2px 0 0 16px;
|
||||
width: calc(100% - 100px);
|
||||
}
|
||||
i {
|
||||
font-size: 32px;
|
||||
color: #ff0600;
|
||||
}
|
||||
}
|
||||
}
|
||||
button[data-type='cancel'] {
|
||||
color: unquote('rgba(#{$color-black}, 0.54)');
|
||||
}
|
||||
.mdl-dialog__content {
|
||||
color: unquote('rgba(#{$color-black}, 0.75)');
|
||||
}
|
||||
}
|
||||
}
|
||||
24
app/views/qor/assets/stylesheets/scss/app/_buttons.scss
Normal file
24
app/views/qor/assets/stylesheets/scss/app/_buttons.scss
Normal file
@@ -0,0 +1,24 @@
|
||||
// Buttons
|
||||
// --------------------------------------------------
|
||||
.qor-button--small {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.qor-button--new,
|
||||
.qor-button--edit {
|
||||
position: fixed;
|
||||
right: 32px;
|
||||
bottom: 32px;
|
||||
z-index: 3;
|
||||
@include shadow-4dp();
|
||||
}
|
||||
|
||||
.qor-button--accent {
|
||||
color: #fff;
|
||||
background-color: unquote("rgb(#{$color-accent})") !important;
|
||||
}
|
||||
|
||||
.qor-button--muted {
|
||||
color: unquote("rgba(#{$color-black}, 0.54)");
|
||||
}
|
||||
72
app/views/qor/assets/stylesheets/scss/app/_fonts.scss
Normal file
72
app/views/qor/assets/stylesheets/scss/app/_fonts.scss
Normal file
@@ -0,0 +1,72 @@
|
||||
// // Fonts
|
||||
// // --------------------------------------------------
|
||||
|
||||
// @font-face {
|
||||
// font-family: 'Roboto';
|
||||
// font-style: normal;
|
||||
// font-weight: 200;
|
||||
// src: local('Roboto Thin'), local('Roboto-Thin'), url(../fonts/Roboto-Thin.ttf) format('truetype');
|
||||
// }
|
||||
|
||||
// @font-face {
|
||||
// font-family: 'Roboto';
|
||||
// font-style: italic;
|
||||
// font-weight: 200;
|
||||
// src: local('Roboto ThinItalic'), local('Roboto-ThinItalic'), url(../fonts/Roboto-ThinItalic.ttf) format('truetype');
|
||||
// }
|
||||
|
||||
// @font-face {
|
||||
// font-family: 'Roboto';
|
||||
// font-style: normal;
|
||||
// font-weight: 300;
|
||||
// src: local('Roboto Light'), local('Roboto-Light'), url(../fonts/Roboto-Light.ttf) format('truetype');
|
||||
// }
|
||||
|
||||
// @font-face {
|
||||
// font-family: 'Roboto';
|
||||
// font-style: italic;
|
||||
// font-weight: 300;
|
||||
// src: local('Roboto LightItalic'), local('Roboto-LightItalic'), url(../fonts/Roboto-LightItalic.ttf) format('truetype');
|
||||
// }
|
||||
|
||||
// @font-face {
|
||||
// font-family: 'Roboto';
|
||||
// font-style: normal;
|
||||
// font-weight: 400;
|
||||
// src: local('Roboto Regular'), local('Roboto-Regular'), url(../fonts/Roboto-Regular.ttf) format('truetype');
|
||||
// }
|
||||
|
||||
// @font-face {
|
||||
// font-family: 'Roboto';
|
||||
// font-style: italic;
|
||||
// font-weight: 400;
|
||||
// src: local('Roboto Italic'), local('Roboto-Italic'), url(../fonts/Roboto-Italic.ttf) format('truetype');
|
||||
// }
|
||||
|
||||
// @font-face {
|
||||
// font-family: 'Roboto';
|
||||
// font-style: normal;
|
||||
// font-weight: 500;
|
||||
// src: local('Roboto Medium'), local('Roboto-Medium'), url(../fonts/Roboto-Medium.ttf) format('truetype');
|
||||
// }
|
||||
|
||||
// @font-face {
|
||||
// font-family: 'Roboto';
|
||||
// font-style: italic;
|
||||
// font-weight: 500;
|
||||
// src: local('Roboto MediumItalic'), local('Roboto-MediumItalic'), url(../fonts/Roboto-MediumItalic.ttf) format('truetype');
|
||||
// }
|
||||
|
||||
// @font-face {
|
||||
// font-family: 'Roboto';
|
||||
// font-style: normal;
|
||||
// font-weight: 700;
|
||||
// src: local('Roboto Bold'), local('Roboto-Bold'), url(../fonts/Roboto-Bold.ttf) format('truetype');
|
||||
// }
|
||||
|
||||
// @font-face {
|
||||
// font-family: 'Roboto';
|
||||
// font-style: italic;
|
||||
// font-weight: 700;
|
||||
// src: local('Roboto BoldItalic'), local('Roboto-BoldItalic'), url(../fonts/Roboto-BoldItalic.ttf) format('truetype');
|
||||
// }
|
||||
471
app/views/qor/assets/stylesheets/scss/app/_forms.scss
Normal file
471
app/views/qor/assets/stylesheets/scss/app/_forms.scss
Normal file
@@ -0,0 +1,471 @@
|
||||
// Forms
|
||||
// --------------------------------------------------
|
||||
// Form
|
||||
// -------------------------
|
||||
.qor-form-container {
|
||||
margin: 24px;
|
||||
}
|
||||
|
||||
.qor-slideout__body .qor-form-container {
|
||||
margin: 24px 0;
|
||||
padding: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.qor-textarea__input {
|
||||
border: 1px solid rgba(0, 0, 0, 0.12);
|
||||
outline: none;
|
||||
width: 100%;
|
||||
margin-top: 12px;
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
line-height: 1.4 !important;
|
||||
}
|
||||
|
||||
.qor-form__actions {
|
||||
margin-top: 24px;
|
||||
@include clearfix();
|
||||
.percent-complete {
|
||||
margin-top: -22px;
|
||||
font-weight: 600;
|
||||
}
|
||||
#qor-submit-loading {
|
||||
float: right;
|
||||
.mdl-spinner {
|
||||
margin: 0 24px 24px 0;
|
||||
}
|
||||
}
|
||||
.mdl-button {
|
||||
float: right;
|
||||
+ .mdl-button {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mdl-switch {
|
||||
width: auto;
|
||||
&.is-upgraded {
|
||||
padding-right: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.mdl-textfield textarea.mdl-textfield__input {
|
||||
overflow: initial !important;
|
||||
}
|
||||
|
||||
// Search Form
|
||||
// -------------------------
|
||||
.qor-search-container {
|
||||
float: right;
|
||||
z-index: 1;
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
// Add to .qor-page__header
|
||||
.qor-search,
|
||||
.qor-global-search {
|
||||
height: 56px;
|
||||
padding: 14px 6px;
|
||||
.mdl-button {
|
||||
top: 10px;
|
||||
}
|
||||
.qor-search__label {
|
||||
color: unquote('rgba(#{$color-black}, 0.54)');
|
||||
}
|
||||
.qor-search__input {
|
||||
font-size: 14px;
|
||||
}
|
||||
.qor-search__clear {
|
||||
display: none;
|
||||
}
|
||||
&.is-dirty,
|
||||
&.is-focused {
|
||||
.qor-search__label {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
.qor-search__clear {
|
||||
right: -7px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Field
|
||||
// -------------------------
|
||||
.qor-field__label {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
font-size: 12px;
|
||||
color: unquote('rgba(#{$color-black}, 0.54)');
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.qor-field__value {
|
||||
display: block;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.qor-field__input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.qor-field__block {
|
||||
display: block;
|
||||
padding-bottom: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
.chosen-container {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.qor-field__show {
|
||||
display: none;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
[data-upgraded] > .qor-field__show {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.qor-page__show {
|
||||
.qor-field__show {
|
||||
display: block;
|
||||
}
|
||||
.qor-field__edit,
|
||||
.qor-fieldset__delete,
|
||||
.qor-fieldset__add {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.qor-page__edit {
|
||||
.qor-field__show {
|
||||
display: none;
|
||||
}
|
||||
.qor-field__edit,
|
||||
.qor-fieldset__delete {
|
||||
display: block;
|
||||
}
|
||||
.qor-fieldset__add {
|
||||
display: inline-block;
|
||||
&.mdl-menu__item {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button.qor-fieldset__add,
|
||||
.qor-fieldset__add-promotion,
|
||||
.qor-button__icon-add {
|
||||
font-size: 12px;
|
||||
padding: 0;
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus:not(:active) {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
.qor-field {
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
&.is-error {
|
||||
margin-bottom: 16px;
|
||||
.qor-field__label,
|
||||
.qor-field__error,
|
||||
.mdl-textfield__label {
|
||||
color: unquote('rgb(#{$color-accent})');
|
||||
}
|
||||
.qor-field__error {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
> i {
|
||||
font-size: 18px;
|
||||
vertical-align: top;
|
||||
}
|
||||
> span {
|
||||
+ span {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mdl-textfield,
|
||||
.qor-field__block {
|
||||
+ .qor-field__error {
|
||||
margin-top: -16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mdl-textfield__label {
|
||||
font-weight: 500;
|
||||
}
|
||||
.mdl-checkbox__label {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
// Custom modifier for .mdl-textfield
|
||||
.qor-field {
|
||||
.mdl-textfield__label {
|
||||
color: unquote('rgba(#{$color-black}, 0.54)');
|
||||
font-size: 12px;
|
||||
top: 4px;
|
||||
}
|
||||
.mdl-textfield__input {
|
||||
font-size: 14px;
|
||||
}
|
||||
.mdl-textfield.is-dirty .mdl-textfield__label,
|
||||
.mdl-textfield.has-placeholder .mdl-textfield__label {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.qor-textfield--condensed {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
.mdl-textfield__label {
|
||||
top: 0;
|
||||
font-size: 14px;
|
||||
&:after {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
.mdl-textfield__input {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
// File input
|
||||
// -------------------------
|
||||
.qor-file {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
&.is-svg {
|
||||
.qor-file__list {
|
||||
> ul {
|
||||
> li {
|
||||
text-align: center;
|
||||
img {
|
||||
display: inline-block;
|
||||
max-width: 90%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.qor-file__list {
|
||||
overflow: hidden;
|
||||
> ul {
|
||||
margin-top: 12px;
|
||||
margin-bottom: 0;
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
> li {
|
||||
position: relative;
|
||||
float: left;
|
||||
display: block;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid unquote('rgba(#{$color-black}, 0.12)');
|
||||
background-color: unquote('rgb(#{$color-white})');
|
||||
overflow: hidden;
|
||||
> span {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 5px;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
background-color: unquote('rgba(#{$color-white}, 0.5)');
|
||||
&:first-letter {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
img {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 100%;
|
||||
max-height: 160px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.qor-file__list-item {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 150px;
|
||||
height: 80px;
|
||||
border: 1px solid unquote('rgba(#{$color-black}, 0.12)');
|
||||
background-color: unquote('rgb(#{$color-white})');
|
||||
margin-top: 12px;
|
||||
.qor-file__action {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
display: block;
|
||||
padding: 5px;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
background-color: unquote('rgba(#{$color-black}, 0.75)');
|
||||
opacity: 0;
|
||||
a {
|
||||
display: inline-block;
|
||||
color: #fff;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin-top: 16%;
|
||||
&:hover {
|
||||
i {
|
||||
color: unquote('rgb(#{$color-primary})');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.qor-file__action {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
> span {
|
||||
display: flex;
|
||||
font-size: 12px;
|
||||
align-items: center;
|
||||
line-height: 1.1;
|
||||
height: 80px;
|
||||
img {
|
||||
display: block;
|
||||
margin: auto;
|
||||
max-height: 80px;
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 12px;
|
||||
text-align: center;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fieldset
|
||||
// -------------------------
|
||||
.qor-fieldset {
|
||||
position: relative;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
padding: 16px 24px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
background-color: #fff;
|
||||
&.qor-fieldset--new {
|
||||
display: none;
|
||||
}
|
||||
.mdl-textfield__input {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.qor-fieldset {
|
||||
background-color: unquote('rgb(#{$palette-grey-50})');
|
||||
box-shadow: none;
|
||||
border: 1px solid unquote('rgba(#{$color-black}, 0.12)');
|
||||
.qor-fieldset {
|
||||
background-color: #fff;
|
||||
.qor-fieldset {
|
||||
background-color: unquote('rgb(#{$palette-grey-50})');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.qor-fieldset__delete {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.qor-fieldset__alert {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// Section
|
||||
// ------------------------
|
||||
.qor-section-columns-2 .qor-field {
|
||||
width: 50%;
|
||||
float: left;
|
||||
padding-right: 40px;
|
||||
box-sizing: border-box;
|
||||
.mdl-textfield .qor-field__edit {
|
||||
margin-top: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.qor-section-columns-3 .qor-field {
|
||||
width: 33.33%;
|
||||
float: left;
|
||||
padding-right: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.promotion-coupons .qor-section-columns-3 .qor-field {
|
||||
&:first-child {
|
||||
width: 50%;
|
||||
.mdl-textfield {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
margin-top: 36px;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
width: 60px;
|
||||
.mdl-textfield__label {
|
||||
overflow: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
/* WebKit, Blink, Edge */
|
||||
color: unquote('rgba(#{$color-black}, 0.12)');
|
||||
}
|
||||
|
||||
::-moz-placeholder {
|
||||
/* Mozilla Firefox 19+ */
|
||||
color: unquote('rgba(#{$color-black}, 0.12)');
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
:-ms-input-placeholder {
|
||||
/* Internet Explorer 10-11 */
|
||||
color: unquote('rgba(#{$color-black}, 0.12)');
|
||||
}
|
||||
|
||||
.mdl-checkbox__label {
|
||||
line-height: 22px;
|
||||
}
|
||||
.mdl-checkbox {
|
||||
height: auto;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
102
app/views/qor/assets/stylesheets/scss/app/_icons.scss
Normal file
102
app/views/qor/assets/stylesheets/scss/app/_icons.scss
Normal file
@@ -0,0 +1,102 @@
|
||||
// Icons
|
||||
// --------------------------------------------------
|
||||
|
||||
// http://google.github.io/material-design-icons/#icon-font-for-the-web
|
||||
|
||||
@mixin material-icons{
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px; /* Preferred icon size */
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
line-height: 1;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
word-break: 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. */
|
||||
-webkit-font-feature-settings: 'liga';
|
||||
-moz-font-feature-settings: 'liga';
|
||||
font-feature-settings: 'liga';
|
||||
-ms-font-feature-settings: 'liga';
|
||||
}
|
||||
|
||||
.md,
|
||||
.material-icons {
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px; /* Preferred icon size */
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
line-height: 1;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
word-break: 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. */
|
||||
-webkit-font-feature-settings: 'liga';
|
||||
-moz-font-feature-settings: 'liga';
|
||||
font-feature-settings: 'liga';
|
||||
-ms-font-feature-settings: 'liga';
|
||||
|
||||
// Rules for sizing the icon.
|
||||
&.md-14 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&.md-18 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
&.md-24 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
&.md-36 {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
&.md-48 {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
// Rules for using icons as black on a light background.
|
||||
&.md-dark {
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
}
|
||||
|
||||
&.md-dark.md-inactive {
|
||||
color: rgba(0, 0, 0, 0.26);
|
||||
}
|
||||
|
||||
// Rules for using icons as white on a dark background.
|
||||
&.md-light {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
&.md-light.md-inactive {
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
}
|
||||
19
app/views/qor/assets/stylesheets/scss/app/_labels.scss
Normal file
19
app/views/qor/assets/stylesheets/scss/app/_labels.scss
Normal file
@@ -0,0 +1,19 @@
|
||||
.qor-label {
|
||||
display: inline;
|
||||
padding: 1px 8px;
|
||||
border: 1px solid unquote("rgba(#{$color-black}, 0.12)");
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
background-color: #fff;
|
||||
color: unquote("rgba(#{$color-black}, 0.26)");
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
vertical-align: baseline;
|
||||
border-radius: .25em;
|
||||
|
||||
&.is-active {
|
||||
border-color: unquote("rgba(#{$color-primary}, 0.87)");
|
||||
color: unquote("rgb(#{$color-primary})");
|
||||
}
|
||||
}
|
||||
318
app/views/qor/assets/stylesheets/scss/app/_layout.scss
Normal file
318
app/views/qor/assets/stylesheets/scss/app/_layout.scss
Normal file
@@ -0,0 +1,318 @@
|
||||
.qor-layout {
|
||||
width: 100%;
|
||||
.mdl-layout__content {
|
||||
overflow: auto;
|
||||
padding-top: 8px;
|
||||
padding-left: 240px;
|
||||
margin-left: 0;
|
||||
&.has-subnav {
|
||||
padding-top: 56px;
|
||||
}
|
||||
> .qor-page__body {
|
||||
> .qor-table-container {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
&::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
&::-webkit-scrollbar-button {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #ccc;
|
||||
border: 0 none #ffffff;
|
||||
border-radius: 50px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background: unquote('rgb(#{$color-primary})');
|
||||
}
|
||||
&::-webkit-scrollbar-thumb:active {
|
||||
background: unquote('rgb(#{$color-primary})');
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
border: 0 none #ffffff;
|
||||
border-radius: 50px;
|
||||
}
|
||||
&::-webkit-scrollbar-track:hover {
|
||||
background: transparent;
|
||||
}
|
||||
&::-webkit-scrollbar-track:active {
|
||||
background: transparent;
|
||||
}
|
||||
&::-webkit-scrollbar-corner {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
.mdl-layout__header,
|
||||
.mdl-layout__tab-bar {
|
||||
background-color: $color-main-header;
|
||||
}
|
||||
.mdl-layout__header {
|
||||
a.mdl-button--icon:hover {
|
||||
color: #fff;
|
||||
}
|
||||
.mdl-layout__header-row {
|
||||
> .mdl-button--icon,
|
||||
.qor-search-container {
|
||||
margin: 0 4px;
|
||||
}
|
||||
}
|
||||
.qor-search-container {
|
||||
/* float: none; */
|
||||
.qor-search {
|
||||
height: 64px;
|
||||
line-height: 64px;
|
||||
padding: 0;
|
||||
&.is-focused {
|
||||
.mdl-textfield__label::after {
|
||||
background-color: #fff;
|
||||
}
|
||||
.mdl-button.mdl-button--colored {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.qor-search__label {
|
||||
color: #fff;
|
||||
top: 17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.mdl-layout.is-upgraded .mdl-layout__tab.is-active::after {
|
||||
background: unquote('rgb(#{$color-white})');
|
||||
}
|
||||
.mdl-layout-text {
|
||||
color: unquote('rgba(#{$color-white}, 0.54)');
|
||||
}
|
||||
.mdl-navigation__link > .material-icons {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.mdl-layout__drawer {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.qor-layout__sidebar {
|
||||
height: 100%;
|
||||
> .sidebar-header {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 64px;
|
||||
> a {
|
||||
text-decoration: none;
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
&:first-child {
|
||||
float: left;
|
||||
display: block;
|
||||
width: 110px;
|
||||
height: 64px;
|
||||
background: url(../images/logo.png) no-repeat center center;
|
||||
color: transparent;
|
||||
}
|
||||
&:last-child {
|
||||
float: left;
|
||||
width: 100px;
|
||||
padding: 22px 10px;
|
||||
color: #757575;
|
||||
> .material-icons {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
margin-left: 3px;
|
||||
margin-right: 3px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .sidebar-userinfo {
|
||||
height: 48px;
|
||||
position: absolute;
|
||||
top: 64px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border-bottom: 1px solid unquote('rgba(#{$color-black}, 0.12)');
|
||||
padding-left: 16px;
|
||||
h5 {
|
||||
font-size: 14px;
|
||||
max-width: 70%;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 48px;
|
||||
margin: 0;
|
||||
font-weight: 300;
|
||||
float: left;
|
||||
}
|
||||
& > a {
|
||||
float: right;
|
||||
margin-top: 8px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
> .sidebar-body {
|
||||
position: absolute;
|
||||
top: 112px;
|
||||
right: 0;
|
||||
bottom: 40px;
|
||||
left: 0;
|
||||
overflow: visible;
|
||||
overflow-y: auto;
|
||||
}
|
||||
> .sidebar-footer {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 8px 16px;
|
||||
border-top: 1px solid unquote('rgba(#{$color-black}, 0.12)');
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.qor-layout__content {
|
||||
position: absolute; // Inherit body height with absolute position
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 56px;
|
||||
min-height: 100%;
|
||||
-webkit-transition: left 0.35s ease;
|
||||
-o-transition: left 0.35s ease;
|
||||
transition: left 0.35s ease;
|
||||
}
|
||||
|
||||
.has-subnav {
|
||||
.qor-page__header {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.qor-page__header {
|
||||
position: fixed;
|
||||
top: 64px;
|
||||
min-height: 48px;
|
||||
margin-bottom: 24px;
|
||||
padding: 0 24px;
|
||||
width: calc(100% - 240px);
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
z-index: 5000;
|
||||
@include shadow-2dp-bottom();
|
||||
@include clearfix();
|
||||
.mdl-button {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
}
|
||||
.qor-search {
|
||||
height: 48px;
|
||||
}
|
||||
+ .qor-page__body {
|
||||
padding-top: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.qor-page__footer {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.mdl-layout__content {
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.qor-page__header .qor-page-subnav__header {
|
||||
width: calc(100% + 48px);
|
||||
}
|
||||
|
||||
.qor-page-subnav__header {
|
||||
padding: 0 !important;
|
||||
background-color: transparent;
|
||||
margin: 0 -24px;
|
||||
.mdl-layout__tab {
|
||||
min-width: 128px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.mdl-layout__tab-bar {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.qor-page__header-tabbar {
|
||||
padding: 0;
|
||||
background-color: $color-main-header;
|
||||
.mdl-layout__tab-bar {
|
||||
height: 48px;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.qor-view-all {
|
||||
display: inline-block;
|
||||
height: 32px;
|
||||
margin-left: 16px;
|
||||
font-size: 12px;
|
||||
line-height: 32px;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
color: unquote('rgb(#{$color-primary})');
|
||||
}
|
||||
|
||||
.mdl-layout__header-row {
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
.qor-page__tips {
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
color: unquote('rgba(#{$color-black}, 0.75)');
|
||||
margin-top: 48px;
|
||||
}
|
||||
|
||||
.qor-fieldset {
|
||||
.qor-field + .qor-page__tips {
|
||||
margin-top: -28px;
|
||||
}
|
||||
.qor-page__tips {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.qor-page__header {
|
||||
width: 100%;
|
||||
top: 56px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
.mdl-layout--fixed-drawer > .mdl-layout__header .mdl-layout__header-row {
|
||||
padding-left: 24px;
|
||||
}
|
||||
.qor-page__col-2 {
|
||||
.qor-page__col-right {
|
||||
width: calc(100% - 320px);
|
||||
float: left;
|
||||
}
|
||||
.qor-page__col-left {
|
||||
float: left;
|
||||
width: 320px;
|
||||
h5 {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Fix refresh page sidebar height flash bug */
|
||||
|
||||
body > .mdl-layout {
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
}
|
||||
84
app/views/qor/assets/stylesheets/scss/app/_menu.scss
Normal file
84
app/views/qor/assets/stylesheets/scss/app/_menu.scss
Normal file
@@ -0,0 +1,84 @@
|
||||
// Menu
|
||||
// --------------------------------------------------
|
||||
|
||||
.qor-menu {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
|
||||
> li {
|
||||
> a {
|
||||
display: block;
|
||||
padding: 8px 40px;
|
||||
font-weight: 500;
|
||||
color: #000;
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: unquote("rgba(#{$color-black}, 0.12)");
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
> ul > li > a {
|
||||
padding: 4px 16px 4px 40px;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
> .active,
|
||||
> .active:hover {
|
||||
> a,
|
||||
> a:hover,
|
||||
> a:focus {
|
||||
color: unquote("rgb(#{$color-primary})");
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.qor-menu-container {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
|
||||
> ul {
|
||||
> li > a {
|
||||
position: relative;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
color: inherit;
|
||||
font-family: "Material Icons";
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: 8px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
> .has-menu > a {
|
||||
&::after {
|
||||
content: "\e5ce";
|
||||
}
|
||||
}
|
||||
|
||||
> .is-expanded > a {
|
||||
&::after {
|
||||
content: "\e5cf";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mdl-layout.is-upgraded .mdl-layout__tab.is-active::after{
|
||||
background-color: #fff;
|
||||
}
|
||||
183
app/views/qor/assets/stylesheets/scss/app/_mobile.scss
Normal file
183
app/views/qor/assets/stylesheets/scss/app/_mobile.scss
Normal file
@@ -0,0 +1,183 @@
|
||||
/* mobile */
|
||||
@media only screen
|
||||
and (min-width : 320px)
|
||||
and (max-width : 736px) {
|
||||
|
||||
.qor-action--select + .qor-selector{
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.qor-section-columns-2 .qor-field{
|
||||
width: 100%;
|
||||
float: none;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.qor-layout .mdl-layout__content{
|
||||
padding-top: 0 !important;
|
||||
padding-left: 0;
|
||||
|
||||
}
|
||||
|
||||
.qor-table{
|
||||
margin: 0;
|
||||
.is-fixed{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.qor-section{
|
||||
margin: 24px 0;
|
||||
.qor-section__header{
|
||||
margin-left: 24px;
|
||||
}
|
||||
}
|
||||
.qor-page--dashboard .qor-table-container{
|
||||
@include shadow-2dp();
|
||||
th{
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
.qor-table-container{
|
||||
margin: 0 0 24px 0;
|
||||
th{
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.mdl-data-table{
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
.qor-action--select + .qor-selector, .qor-action--select + .qor-action--label, .qor-action--select + .qor-action--select{
|
||||
margin-left: 0;
|
||||
margin-right: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.mdl-textfield.is-dirty .mdl-textfield__expandable-holder, .mdl-textfield.is-focused .mdl-textfield__expandable-holder{
|
||||
max-width: 100px;
|
||||
}
|
||||
|
||||
.qor-search{
|
||||
height: 56px !important;
|
||||
line-height: 56px !important;
|
||||
.qor-search__label{
|
||||
top: 13px !important;
|
||||
}
|
||||
&.is-focused{
|
||||
background-color: #0277bd;
|
||||
position: absolute;
|
||||
left: 54px;
|
||||
top: 0;
|
||||
right: 8px;
|
||||
}
|
||||
.mdl-textfield__expandable-holder{
|
||||
width: calc(100% - 64px);
|
||||
}
|
||||
}
|
||||
.qor-modal .mdl-card{
|
||||
margin: 24px auto;
|
||||
}
|
||||
.qor-form-container{
|
||||
margin: 0;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.qor-page__header+.qor-page__body{
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
|
||||
header{
|
||||
.qor-mobile--show-actions{
|
||||
display: none;
|
||||
}
|
||||
.mdl-layout__header-row{
|
||||
padding-left: 56px;
|
||||
.qor-mobile--show-actions{
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.mdl-layout-title, .mdl-layout__title{
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
&.has-action{
|
||||
.qor-mobile--show-actions{
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
&.has-search{
|
||||
.qor-mobile--show-actions{
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.mdl-layout__container .qor-page__header{
|
||||
min-height: 0;
|
||||
background: transparent;
|
||||
margin-bottom: 2px;
|
||||
& > div{
|
||||
display: none;
|
||||
}
|
||||
&.actions-show{
|
||||
background: #fff;
|
||||
& > div{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.qor-table--medialibrary{
|
||||
margin-left: 12px;
|
||||
width: 100%;
|
||||
.mdl-card{
|
||||
width: 163px;
|
||||
}
|
||||
tbody tr:nth-child(2n) td{
|
||||
padding-right: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.qor-bottomsheets.is-shown{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: none;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: 0;
|
||||
.qor-bottomsheets__search{
|
||||
display: none;
|
||||
}
|
||||
.qor-button--new{
|
||||
right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* mobile: iphone 6p */
|
||||
@media only screen
|
||||
and (min-width : 414px)
|
||||
and (max-width : 736px) {
|
||||
.qor-table--medialibrary{
|
||||
margin-left: 12px;
|
||||
width: 100%;
|
||||
.mdl-card{
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* iPad */
|
||||
|
||||
@media only screen
|
||||
and (min-width : 768px)
|
||||
and (max-width : 1024px){
|
||||
.mdl-layout__header{
|
||||
.qor-mobile--show-actions{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
94
app/views/qor/assets/stylesheets/scss/app/_pagination.scss
Normal file
94
app/views/qor/assets/stylesheets/scss/app/_pagination.scss
Normal file
@@ -0,0 +1,94 @@
|
||||
// Pagination
|
||||
// --------------------------------------------------
|
||||
.qor-pagination-container {
|
||||
margin: 24px;
|
||||
.qor-selector {
|
||||
z-index: 10;
|
||||
}
|
||||
@extend .clearfix;
|
||||
.qor-actions {
|
||||
float: left;
|
||||
margin: 0 16px;
|
||||
padding: 0;
|
||||
}
|
||||
.qor-pagination-first,
|
||||
.qor-pagination-last {
|
||||
float: left;
|
||||
text-decoration: none;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.qor-pagination {
|
||||
float: left;
|
||||
margin: 0 16px;
|
||||
padding: 0;
|
||||
@include shadow-2dp();
|
||||
>li {
|
||||
display: inline; // Remove list-style and block-level defaults
|
||||
.material-icons {
|
||||
line-height: 32px;
|
||||
}
|
||||
>a,
|
||||
>span {
|
||||
position: relative;
|
||||
float: left;
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
font-size: 14px;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
background-color: #fff;
|
||||
>span {
|
||||
line-height: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
>li>a,
|
||||
>li>span {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: unquote("rgb(#{unquote("rgb(#{$color-primary})")})");
|
||||
background-color: #eee;
|
||||
}
|
||||
}
|
||||
>.active>a,
|
||||
>.active>span {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
z-index: 2;
|
||||
color: #fff;
|
||||
cursor: default;
|
||||
background-color: unquote("rgb(#{$color-primary})");
|
||||
}
|
||||
}
|
||||
>.disabled {
|
||||
>span,
|
||||
>span:hover,
|
||||
>span:focus,
|
||||
>a,
|
||||
>a:hover,
|
||||
>a:focus {
|
||||
color: #777;
|
||||
cursor: not-allowed;
|
||||
background-color: #fff;
|
||||
border-color: #ddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.qor-pagination-all {
|
||||
float: left;
|
||||
display: block;
|
||||
height: 32px;
|
||||
margin-left: 16px;
|
||||
font-size: 12px;
|
||||
line-height: 32px;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
color: unquote("rgb(#{$color-primary})");
|
||||
}
|
||||
19
app/views/qor/assets/stylesheets/scss/app/_print.scss
Normal file
19
app/views/qor/assets/stylesheets/scss/app/_print.scss
Normal file
@@ -0,0 +1,19 @@
|
||||
@media print {
|
||||
header.mdl-layout__header,
|
||||
.qor-layout__sidebar,
|
||||
.mdl-layout__drawer,
|
||||
a.qor-button--edit {
|
||||
display: none;
|
||||
}
|
||||
.qor-layout .mdl-layout__content {
|
||||
overflow: initial;
|
||||
}
|
||||
.mdl-layout--fixed-drawer>.mdl-layout__content {
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
.mdl-layout {
|
||||
display: block;
|
||||
overflow: initial;
|
||||
}
|
||||
}
|
||||
175
app/views/qor/assets/stylesheets/scss/app/_qor-icons.scss
Normal file
175
app/views/qor/assets/stylesheets/scss/app/_qor-icons.scss
Normal file
@@ -0,0 +1,175 @@
|
||||
.qor-icon__unread_count {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
border-radius: 100%;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
text-align: center;
|
||||
line-height: 16px;
|
||||
z-index: 2;
|
||||
font-size: 10px;
|
||||
background-color: #ff4081;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
[qor-icon-name]{
|
||||
> a, > span{
|
||||
display: block;
|
||||
padding: 0 20px 0 40px;
|
||||
position: relative;
|
||||
&::before,
|
||||
&::after {
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
display: inline-block;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
word-break: 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. */
|
||||
-webkit-font-feature-settings: 'liga';
|
||||
-moz-font-feature-settings: 'liga';
|
||||
font-feature-settings: 'liga';
|
||||
-ms-font-feature-settings: 'liga';
|
||||
|
||||
position: absolute;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
&.mdl-menu__item{
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
[qor-icon-name="Delete"] > a::before{
|
||||
content: "\e872";
|
||||
}
|
||||
|
||||
[qor-icon-name="Edit"]{
|
||||
> a::before{
|
||||
content: "\e254";
|
||||
}
|
||||
}
|
||||
|
||||
[qor-icon-name] > a, [qor-icon-name] > span {
|
||||
&::before,
|
||||
&::after {
|
||||
top: 50%;
|
||||
margin-top: -12px;
|
||||
}
|
||||
&::before {
|
||||
left: 8px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
right: 8px;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
[qor-icon-name*="Dashboard"] > a::before {
|
||||
content: "dashboard";
|
||||
|
||||
}
|
||||
|
||||
[qor-icon-name*="Asset"] > a::before {
|
||||
content: "\e2c7";
|
||||
}
|
||||
|
||||
[qor-icon-name*="Product"] > a::before {
|
||||
content: "\e1db";
|
||||
}
|
||||
|
||||
[qor-icon-name*="Site"] > a::before {
|
||||
content: "\e051";
|
||||
}
|
||||
|
||||
[qor-icon-name*="Store"] > a::before {
|
||||
content: "\e8d1";
|
||||
}
|
||||
|
||||
[qor-icon-name*="Newsletter"] > a::before, [qor-icon-name*="Email"] > a::before {
|
||||
content: "\e0be";
|
||||
}
|
||||
|
||||
[qor-icon-name*="Translate"] > a::before, [qor-icon-name*="Translation"] > a::before {
|
||||
content: "\e8e2";
|
||||
}
|
||||
|
||||
[qor-icon-name*="Report"] > a::before, [qor-icon-name*="Chart"] > a::before {
|
||||
content: "\e24b";
|
||||
}
|
||||
|
||||
[qor-icon-name*="Order"] > a::before {
|
||||
content: "\e8cc";
|
||||
}
|
||||
|
||||
[qor-icon-name*="User"] > a::before {
|
||||
content: "\e7fd";
|
||||
}
|
||||
|
||||
[qor-icon-name*="Translation"] > a::before {
|
||||
content: "\e894";
|
||||
}
|
||||
|
||||
[qor-icon-name*="Publish"] > a::before {
|
||||
content: "\e255";
|
||||
}
|
||||
|
||||
[qor-icon-name*="Setting"] > a::before {
|
||||
content: "\e8b8";
|
||||
}
|
||||
|
||||
[qor-icon-name*="Search"] > a::before,[qor-icon-name*="Search"] > span::before {
|
||||
content: "\e8b6";
|
||||
}
|
||||
|
||||
[qor-icon-name*="Client Services"] > a::before {
|
||||
content: "\e5c3";
|
||||
}
|
||||
|
||||
[qor-icon-name*="Transaction Logs"] > a::before {
|
||||
content: "\e889";
|
||||
}
|
||||
|
||||
[qor-icon-name*="Notification"] > a::before {
|
||||
content: "\e7f4";
|
||||
}
|
||||
|
||||
[qor-icon-name*="Widget"] > a::before {
|
||||
content: "\e30d";
|
||||
}
|
||||
|
||||
[qor-icon-name*="Workers"] > a::before {
|
||||
content: "\e8f9";
|
||||
}
|
||||
|
||||
[qor-icon-name*="Public keys"] > a::before {
|
||||
content: "\e897";
|
||||
}
|
||||
|
||||
[qor-icon-name*="Pages Management"] > a::before {
|
||||
content: "pending_actions";
|
||||
}
|
||||
|
||||
|
||||
|
||||
[qor-icon-name] [qor-icon-name] > a::before {
|
||||
content: " " !important;
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
.qor-search-center-menu {
|
||||
content: "\e8b6";
|
||||
}
|
||||
33
app/views/qor/assets/stylesheets/scss/app/_sections.scss
Normal file
33
app/views/qor/assets/stylesheets/scss/app/_sections.scss
Normal file
@@ -0,0 +1,33 @@
|
||||
.qor-section {
|
||||
margin: 24px;
|
||||
&.qor-section__table {
|
||||
margin: 24px 0;
|
||||
.qor-section__header {
|
||||
margin-left: 24px;
|
||||
}
|
||||
}
|
||||
>.qor-table-container {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.qor-section__header {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.qor-section-title {
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
margin-bottom: 8px;
|
||||
margin-top: 32px;
|
||||
color: unquote("rgba(#{$color-black}, 0.68)");
|
||||
}
|
||||
|
||||
.qor-section__col {
|
||||
margin-bottom: 32px;
|
||||
.qor-section-title {
|
||||
font-size: 16px;
|
||||
margin-top: 16px;
|
||||
padding-left: 24px;
|
||||
}
|
||||
}
|
||||
184
app/views/qor/assets/stylesheets/scss/app/_select.scss
Normal file
184
app/views/qor/assets/stylesheets/scss/app/_select.scss
Normal file
@@ -0,0 +1,184 @@
|
||||
/* qor select one,many layout */
|
||||
|
||||
.qor-field__selectone {
|
||||
padding-top: 10px;
|
||||
.qor-field__selectone-trigger {
|
||||
font-size: 12px;
|
||||
padding: 0;
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus:not(:active) {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
.qor-field__selected {
|
||||
padding-top: 10px;
|
||||
margin: 0;
|
||||
> span,
|
||||
> a {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
> span {
|
||||
font-size: 16px;
|
||||
color: rgb(33, 150, 243);
|
||||
cursor: pointer;
|
||||
}
|
||||
> a {
|
||||
color: unquote('rgba(#{$color-black}, 0.54)');
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
.select2-results__option-withimage{
|
||||
img{
|
||||
height: 20px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select2-dropdown .select2-results__option{
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
.qor-field__selectmany {
|
||||
.qor-field__selectmany-trigger {
|
||||
font-size: 12px;
|
||||
padding: 0;
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus:not(:active) {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
.qor-field__selected-many {
|
||||
margin-left: 0;
|
||||
margin-bottom: 0;
|
||||
padding-left: 0;
|
||||
> li {
|
||||
border: #e0e1e2 1px solid;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 2px;
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin: 0 6px 6px 0;
|
||||
line-height: 1;
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
> span,
|
||||
> a {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
> a {
|
||||
color: unquote('rgba(#{$color-black}, 0.26)');
|
||||
line-height: 1;
|
||||
margin-left: 8px;
|
||||
i {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.qor-selected-many__undo {
|
||||
color: #03a9f4;
|
||||
padding: 2px;
|
||||
text-decoration: none;
|
||||
display: none;
|
||||
}
|
||||
&.qor-selected-many__deleted {
|
||||
background-color: #f2f2f2;
|
||||
span {
|
||||
text-decoration: line-through;
|
||||
color: unquote('rgba(#{$color-black}, 0.26)');
|
||||
}
|
||||
.qor-selected-many__remove {
|
||||
display: none;
|
||||
}
|
||||
.qor-selected-many__undo {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* qor select one,many bottomsheets layout */
|
||||
|
||||
.qor-bottomsheets {
|
||||
.qor-select__select-icon {
|
||||
position: absolute;
|
||||
left: -32px;
|
||||
top: 50%;
|
||||
margin-top: -10px;
|
||||
color: unquote('rgba(#{$color-black}, 0.26)');
|
||||
i {
|
||||
color: unquote('rgba(#{$color-black}, 0.26)');
|
||||
}
|
||||
}
|
||||
tr.is_selected {
|
||||
.qor-select__select-icon {
|
||||
color: unquote('rgb(#{$color-primary})');
|
||||
i {
|
||||
color: unquote('rgb(#{$color-primary})');
|
||||
}
|
||||
}
|
||||
}
|
||||
.qor-selectmany__hint {
|
||||
font-size: 14px;
|
||||
position: fixed;
|
||||
z-index: 900;
|
||||
padding: 12px 12px 12px 54px;
|
||||
margin-top: -11px;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
width: $width-bottomsheet;
|
||||
> span {
|
||||
float: left;
|
||||
&.qor-selectmany__selectall {
|
||||
margin-right: 12px;
|
||||
cursor: pointer;
|
||||
color: unquote('rgb(#{$color-primary})');
|
||||
}
|
||||
}
|
||||
> a {
|
||||
float: right;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
.qor-page__header {
|
||||
position: fixed;
|
||||
top: auto;
|
||||
width: $width-bottomsheet;
|
||||
box-shadow: none;
|
||||
padding: 13px 0 0 54px;
|
||||
margin: -56px 0 0 0;
|
||||
background-color: #fff;
|
||||
> div:not(.qor-bottomsheet__filter) {
|
||||
display: none;
|
||||
}
|
||||
.qor-actions {
|
||||
padding: 0;
|
||||
margin-right: 6px;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.has-hint {
|
||||
.qor-selectmany__hint {
|
||||
margin-top: -56px;
|
||||
}
|
||||
}
|
||||
.has-hint.has-header {
|
||||
.qor-page__header {
|
||||
margin: -100px 0 0;
|
||||
}
|
||||
.qor-selectmany__hint {
|
||||
margin-top: -55px;
|
||||
}
|
||||
}
|
||||
}
|
||||
269
app/views/qor/assets/stylesheets/scss/app/_table.scss
Normal file
269
app/views/qor/assets/stylesheets/scss/app/_table.scss
Normal file
@@ -0,0 +1,269 @@
|
||||
table {
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
.mdl-data-table--selectable {
|
||||
td:first-of-type,
|
||||
th:first-of-type {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
// .qor-table--bulking tr.qor-table__inner-list label.mdl-checkbox {
|
||||
// display: none;
|
||||
// }
|
||||
|
||||
.qor-table {
|
||||
width: calc(100% - 48px);
|
||||
border: 0;
|
||||
margin: 0 24px;
|
||||
@include shadow-2dp();
|
||||
&::before {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
top: -5px;
|
||||
left: -5px;
|
||||
right: -5px;
|
||||
height: 54px;
|
||||
background-color: $color-body-bg;
|
||||
}
|
||||
td {
|
||||
border-top-color: $color-dash;
|
||||
border-bottom-color: $color-dash;
|
||||
font-size: 14px;
|
||||
}
|
||||
thead {
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
th {
|
||||
background-color: $color-body-bg;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
&.qor-table__actions {
|
||||
width: 80px;
|
||||
}
|
||||
}
|
||||
}
|
||||
a:not([class*='mdl-button']) {
|
||||
color: unquote('rgba(#{$color-black}, 0.87)');
|
||||
font-weight: 400;
|
||||
}
|
||||
tbody {
|
||||
tr {
|
||||
position: static;
|
||||
&:hover {
|
||||
background-color: #e8f8ff;
|
||||
}
|
||||
&.is-selected {
|
||||
background-color: rgba(255, 200, 60, 0.32);
|
||||
}
|
||||
}
|
||||
}
|
||||
img {
|
||||
width: auto !important;
|
||||
height: 24px !important;
|
||||
max-height: 24px !important;
|
||||
max-width: 54px !important;
|
||||
}
|
||||
&.is-sortable > thead > tr > th {
|
||||
&[data-order-by] {
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
&.is-sorted {
|
||||
color: unquote('rgb(#{$color-black})');
|
||||
font-weight: 500;
|
||||
&[data-order-by]::after {
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px; /* Preferred icon size */
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
line-height: 1;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
word-break: 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. */
|
||||
-webkit-font-feature-settings: 'liga';
|
||||
-moz-font-feature-settings: 'liga';
|
||||
font-feature-settings: 'liga';
|
||||
-ms-font-feature-settings: 'liga';
|
||||
|
||||
margin-left: 8px;
|
||||
font-size: 14px;
|
||||
content: '\e164';
|
||||
vertical-align: middle;
|
||||
|
||||
}
|
||||
&[data-order-by*='desc']::after {
|
||||
transform: scaleY(-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.qor-theme-publish {
|
||||
.qor-table {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.qor-table__content {
|
||||
max-width: 300px;
|
||||
max-height: 24px;
|
||||
@include text-overflow();
|
||||
p {
|
||||
max-width: 3000px;
|
||||
max-height: 24px;
|
||||
@include text-overflow();
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.qor-table__actions {
|
||||
text-align: center !important;
|
||||
.mdl-menu {
|
||||
min-width: 160px;
|
||||
}
|
||||
.mdl-button {
|
||||
margin: -4px 0;
|
||||
+ .mdl-button {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
.mdl-menu__item a {
|
||||
color: unquote('rgba(#{$color-black}, 0.87)');
|
||||
text-decoration: none;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.qor-table-container {
|
||||
position: relative;
|
||||
margin-top: 24px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.qor-table--medialibrary {
|
||||
margin-left: 24px;
|
||||
width: calc(100% - 48px);
|
||||
.qor-sorting__hover {
|
||||
td {
|
||||
border: 0;
|
||||
}
|
||||
.mdl-card {
|
||||
border: 2px solid $color-main-header;
|
||||
}
|
||||
}
|
||||
&.mdl-data-table--selectable {
|
||||
th {
|
||||
text-align: left;
|
||||
}
|
||||
tbody tr td:first-child {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
margin: 8px 0 0 10px;
|
||||
}
|
||||
}
|
||||
.mdl-card {
|
||||
width: 200px;
|
||||
.mdl-card__menu {
|
||||
right: 4px;
|
||||
top: 8px;
|
||||
z-index: 10;
|
||||
}
|
||||
&:hover {
|
||||
.mdl-button {
|
||||
background-color: rgba(158, 158, 158, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
.mdl-card__supporting-text {
|
||||
width: auto;
|
||||
padding: 0;
|
||||
> p {
|
||||
margin-bottom: 8px;
|
||||
padding: 0 16px;
|
||||
line-height: 1.2;
|
||||
&:last-child {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
&[data-heading*='BannerEditorUrl'] {
|
||||
display: none;
|
||||
}
|
||||
&[data-heading*='Name'],
|
||||
&[data-heading*='name'] {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-top: 8px;
|
||||
}
|
||||
&[data-heading*='Image'],
|
||||
&[data-heading*='image'],
|
||||
&[data-heading*='File'],
|
||||
&[data-heading*='file'],
|
||||
&.qor-table--video {
|
||||
padding: 0;
|
||||
height: 200px;
|
||||
overflow: hidden;
|
||||
line-height: 200px;
|
||||
margin-bottom: 0;
|
||||
text-align: center;
|
||||
}
|
||||
.qor-table--medialibrary-file {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
height: 200px;
|
||||
a {
|
||||
padding: 0 32px;
|
||||
line-height: initial;
|
||||
word-wrap: break-word;
|
||||
word-break: break-word;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> tbody {
|
||||
> tr {
|
||||
vertical-align: top;
|
||||
display: inline-flex;
|
||||
td {
|
||||
padding-right: 16px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.qor-table-fixed-header {
|
||||
> thead {
|
||||
position: fixed;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
padding-bottom: 0;
|
||||
z-index: 20;
|
||||
}
|
||||
}
|
||||
|
||||
.mdl-data-table td .mdl-data-table__select.mdl-checkbox {
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
253
app/views/qor/assets/stylesheets/scss/app/_tabs.scss
Normal file
253
app/views/qor/assets/stylesheets/scss/app/_tabs.scss
Normal file
@@ -0,0 +1,253 @@
|
||||
[data-toggle='qor.tab']{
|
||||
margin: 0 -24px;
|
||||
.qor-page-subnav__header{
|
||||
margin: 0;
|
||||
}
|
||||
.qor-layout__tab-bar-container {
|
||||
position: relative;
|
||||
height: 48px;
|
||||
width: 100%;
|
||||
border: none;
|
||||
margin: 0;
|
||||
z-index: 2;
|
||||
-webkit-flex-grow: 0;
|
||||
-ms-flex-positive: 0;
|
||||
flex-grow: 0;
|
||||
-webkit-flex-shrink: 0;
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.qor-layout__tab-right,.qor-layout__tab-left{
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background-color: $color-main-header;
|
||||
&:after{
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px; /* Preferred icon size */
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
line-height: 1;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
word-break: 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. */
|
||||
-webkit-font-feature-settings: 'liga';
|
||||
-moz-font-feature-settings: 'liga';
|
||||
font-feature-settings: 'liga';
|
||||
-ms-font-feature-settings: 'liga';
|
||||
|
||||
content: '\E409';
|
||||
|
||||
color: #fff;
|
||||
line-height: 48px;
|
||||
width: 48px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.qor-layout__tab-left{
|
||||
right: auto;
|
||||
left: 0;
|
||||
&:after{
|
||||
content: '\E408';
|
||||
}
|
||||
}
|
||||
|
||||
.qor-layout__tab-container{
|
||||
margin: 0;
|
||||
width: auto;
|
||||
overflow: initial;
|
||||
.mdl-layout__tab-bar-button{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.qor-layout__tab-header{
|
||||
min-height: 48px;
|
||||
height: 48px;
|
||||
background-color: $color-slideout-header;
|
||||
.mdl-layout__tab-bar-container{
|
||||
height: 48px;
|
||||
}
|
||||
.mdl-layout__tab{
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.qor-layout__tab-bar {
|
||||
height: 96px;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
background-color: transparent;
|
||||
padding: 0 0 0 24px;
|
||||
overflow-y: hidden;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
.qor-layout__tab-bar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mdl-layout--no-drawer-button .qor-layout__tab-bar {
|
||||
padding-left: 16px;
|
||||
width: calc(100% - 32px);
|
||||
}
|
||||
|
||||
.qor-layout__tab-button {
|
||||
margin: 0;
|
||||
border: none;
|
||||
padding: 0 24px;
|
||||
float: left;
|
||||
position: relative;
|
||||
display: block;
|
||||
-webkit-flex-grow: 0;
|
||||
-ms-flex-positive: 0;
|
||||
flex-grow: 0;
|
||||
-webkit-flex-shrink: 0;
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
text-decoration: none;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
text-transform: uppercase;
|
||||
color: rgba(255, 255, 255, .6);
|
||||
overflow: hidden;
|
||||
&.is-active{
|
||||
color: #fff;
|
||||
&::after {
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
display: block;
|
||||
content: " ";
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
background: #fff;
|
||||
-webkit-animation: border-expand .2s cubic-bezier(.4, 0, .4, 1).01s alternate forwards;
|
||||
animation: border-expand .2s cubic-bezier(.4, 0, .4, 1).01s alternate forwards;
|
||||
transition: all 1s cubic-bezier(.4, 0, 1, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mdl-layout--fixed-tabs .qor-layout__tab {
|
||||
float: none;
|
||||
-webkit-flex-grow: 1;
|
||||
-ms-flex-positive: 1;
|
||||
flex-grow: 1;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Style for slideout */
|
||||
.qor-slideout{
|
||||
.qor-layout__tab-right,.qor-layout__tab-left{
|
||||
background-color: $color-slideout-header;
|
||||
}
|
||||
.qor-layout__tab-spinner{
|
||||
margin: 60px auto;
|
||||
}
|
||||
.qor-layout__tab-left{
|
||||
right: auto;
|
||||
left: 0;
|
||||
&:after{
|
||||
content: '\E408';
|
||||
}
|
||||
}
|
||||
.qor-layout__tab{
|
||||
.qor-layout__tab-container{
|
||||
margin: -16px 0;
|
||||
}
|
||||
.qor-layout__tab-content{
|
||||
padding: 0 24px;
|
||||
}
|
||||
.qor-layout__tab-container{
|
||||
margin: -16px -24px;
|
||||
}
|
||||
.qor-layout__tab-bar{
|
||||
background-color: $color-slideout-header;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.qor-layout__tab-header{
|
||||
position: static;
|
||||
margin: -16px -24px 0;
|
||||
width: auto;
|
||||
background-color: $color-slideout-header;
|
||||
& + .qor-layout__tab-content{
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
[data-toggle='qor.tab']{
|
||||
.qor-page-subnav__header{
|
||||
margin: 0;
|
||||
background-color: #03a9f4;
|
||||
@include shadow-2dp-bottom();
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.qor-layout__tab-content{
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
overflow: initial;
|
||||
.mdl-layout__tab-panel{
|
||||
padding: 16px 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width:1025px) {
|
||||
.qor-layout--no-desktop-drawer-button .qor-layout__tab-bar {
|
||||
padding-left: 16px;
|
||||
width: calc(100% - 32px);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width:1024px) {
|
||||
.qor-layout__tab {
|
||||
padding: 0 12px
|
||||
}
|
||||
.qor-layout__tab-bar {
|
||||
width: calc(100% - 60px);
|
||||
padding: 0 0 0 60px;
|
||||
}
|
||||
.qor-layout--no-drawer-button .qor-layout__tab-bar {
|
||||
width: calc(100% - 8px);
|
||||
padding-left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
/* radio tab layout */
|
||||
.qor-tab__radio{
|
||||
> label{
|
||||
margin-right: 24px;
|
||||
}
|
||||
}
|
||||
13
app/views/qor/assets/stylesheets/scss/app/_typography.scss
Normal file
13
app/views/qor/assets/stylesheets/scss/app/_typography.scss
Normal file
@@ -0,0 +1,13 @@
|
||||
body {
|
||||
font-family: $preferred_font;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
a {
|
||||
color: unquote("rgb(#{$color-primary})");
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: unquote("rgb(#{$color-primary-dark})");
|
||||
}
|
||||
}
|
||||
62
app/views/qor/assets/stylesheets/scss/app/_utilities.scss
Normal file
62
app/views/qor/assets/stylesheets/scss/app/_utilities.scss
Normal file
@@ -0,0 +1,62 @@
|
||||
// Utility classes
|
||||
// --------------------------------------------------
|
||||
|
||||
// Floats
|
||||
// -------------------------
|
||||
|
||||
.clearfix {
|
||||
@include clearfix();
|
||||
}
|
||||
|
||||
.float-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.float-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.center-text {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// Toggling content
|
||||
// -------------------------
|
||||
|
||||
.shown,
|
||||
.is-shown {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.hidden,
|
||||
.is-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.fade {
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s linear;
|
||||
|
||||
&.in {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.collapse {
|
||||
display: none;
|
||||
|
||||
&.in {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.collapsing {
|
||||
position: relative;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
transition: height 0.3s ease;
|
||||
}
|
||||
|
||||
advanced-filter-group {
|
||||
display: block;
|
||||
}
|
||||
24
app/views/qor/assets/stylesheets/scss/datetimepicker.scss
Normal file
24
app/views/qor/assets/stylesheets/scss/datetimepicker.scss
Normal file
@@ -0,0 +1,24 @@
|
||||
@import "variables";
|
||||
@import "mixins";
|
||||
.qor-modal {
|
||||
&.shown,
|
||||
&.is-shown {
|
||||
display: block !important;
|
||||
}
|
||||
&.hidden,
|
||||
&.is-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
&.fade {
|
||||
opacity: 0;
|
||||
transition: opacity .2s linear;
|
||||
&.in {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@import "qor/qor-filter";
|
||||
@import "qor/datepicker";
|
||||
@import "qor/qor-datepicker";
|
||||
@import "qor/qor-modal";
|
||||
@@ -0,0 +1,599 @@
|
||||
/**
|
||||
* Copyright 2015 Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
/* ========== Color Palettes ========== */
|
||||
|
||||
// Color order: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200,
|
||||
// A400, A700.
|
||||
|
||||
$palette-red:
|
||||
"255,235,238"
|
||||
"255,205,210"
|
||||
"239,154,154"
|
||||
"229,115,115"
|
||||
"239,83,80"
|
||||
"244,67,54"
|
||||
"229,57,53"
|
||||
"211,47,47"
|
||||
"198,40,40"
|
||||
"183,28,28"
|
||||
"255,138,128"
|
||||
"255,82,82"
|
||||
"255,23,68"
|
||||
"213,0,0";
|
||||
|
||||
$palette-red-50: nth($palette-red, 1);
|
||||
$palette-red-100: nth($palette-red, 2);
|
||||
$palette-red-200: nth($palette-red, 3);
|
||||
$palette-red-300: nth($palette-red, 4);
|
||||
$palette-red-400: nth($palette-red, 5);
|
||||
$palette-red-500: nth($palette-red, 6);
|
||||
$palette-red-600: nth($palette-red, 7);
|
||||
$palette-red-700: nth($palette-red, 8);
|
||||
$palette-red-800: nth($palette-red, 9);
|
||||
$palette-red-900: nth($palette-red, 10);
|
||||
$palette-red-A100: nth($palette-red, 11);
|
||||
$palette-red-A200: nth($palette-red, 12);
|
||||
$palette-red-A400: nth($palette-red, 13);
|
||||
$palette-red-A700: nth($palette-red, 14);
|
||||
|
||||
$palette-pink:
|
||||
"252,228,236"
|
||||
"248,187,208"
|
||||
"244,143,177"
|
||||
"240,98,146"
|
||||
"236,64,122"
|
||||
"233,30,99"
|
||||
"216,27,96"
|
||||
"194,24,91"
|
||||
"173,20,87"
|
||||
"136,14,79"
|
||||
"255,128,171"
|
||||
"255,64,129"
|
||||
"245,0,87"
|
||||
"197,17,98";
|
||||
|
||||
$palette-pink-50: nth($palette-pink, 1);
|
||||
$palette-pink-100: nth($palette-pink, 2);
|
||||
$palette-pink-200: nth($palette-pink, 3);
|
||||
$palette-pink-300: nth($palette-pink, 4);
|
||||
$palette-pink-400: nth($palette-pink, 5);
|
||||
$palette-pink-500: nth($palette-pink, 6);
|
||||
$palette-pink-600: nth($palette-pink, 7);
|
||||
$palette-pink-700: nth($palette-pink, 8);
|
||||
$palette-pink-800: nth($palette-pink, 9);
|
||||
$palette-pink-900: nth($palette-pink, 10);
|
||||
$palette-pink-A100: nth($palette-pink, 11);
|
||||
$palette-pink-A200: nth($palette-pink, 12);
|
||||
$palette-pink-A400: nth($palette-pink, 13);
|
||||
$palette-pink-A700: nth($palette-pink, 14);
|
||||
|
||||
$palette-purple:
|
||||
"243,229,245"
|
||||
"225,190,231"
|
||||
"206,147,216"
|
||||
"186,104,200"
|
||||
"171,71,188"
|
||||
"156,39,176"
|
||||
"142,36,170"
|
||||
"123,31,162"
|
||||
"106,27,154"
|
||||
"74,20,140"
|
||||
"234,128,252"
|
||||
"224,64,251"
|
||||
"213,0,249"
|
||||
"170,0,255";
|
||||
|
||||
$palette-purple-50: nth($palette-purple, 1);
|
||||
$palette-purple-100: nth($palette-purple, 2);
|
||||
$palette-purple-200: nth($palette-purple, 3);
|
||||
$palette-purple-300: nth($palette-purple, 4);
|
||||
$palette-purple-400: nth($palette-purple, 5);
|
||||
$palette-purple-500: nth($palette-purple, 6);
|
||||
$palette-purple-600: nth($palette-purple, 7);
|
||||
$palette-purple-700: nth($palette-purple, 8);
|
||||
$palette-purple-800: nth($palette-purple, 9);
|
||||
$palette-purple-900: nth($palette-purple, 10);
|
||||
$palette-purple-A100: nth($palette-purple, 11);
|
||||
$palette-purple-A200: nth($palette-purple, 12);
|
||||
$palette-purple-A400: nth($palette-purple, 13);
|
||||
$palette-purple-A700: nth($palette-purple, 14);
|
||||
|
||||
$palette-deep-purple:
|
||||
"237,231,246"
|
||||
"209,196,233"
|
||||
"179,157,219"
|
||||
"149,117,205"
|
||||
"126,87,194"
|
||||
"103,58,183"
|
||||
"94,53,177"
|
||||
"81,45,168"
|
||||
"69,39,160"
|
||||
"49,27,146"
|
||||
"179,136,255"
|
||||
"124,77,255"
|
||||
"101,31,255"
|
||||
"98,0,234";
|
||||
|
||||
$palette-deep-purple-50: nth($palette-deep-purple, 1);
|
||||
$palette-deep-purple-100: nth($palette-deep-purple, 2);
|
||||
$palette-deep-purple-200: nth($palette-deep-purple, 3);
|
||||
$palette-deep-purple-300: nth($palette-deep-purple, 4);
|
||||
$palette-deep-purple-400: nth($palette-deep-purple, 5);
|
||||
$palette-deep-purple-500: nth($palette-deep-purple, 6);
|
||||
$palette-deep-purple-600: nth($palette-deep-purple, 7);
|
||||
$palette-deep-purple-700: nth($palette-deep-purple, 8);
|
||||
$palette-deep-purple-800: nth($palette-deep-purple, 9);
|
||||
$palette-deep-purple-900: nth($palette-deep-purple, 10);
|
||||
$palette-deep-purple-A100: nth($palette-deep-purple, 11);
|
||||
$palette-deep-purple-A200: nth($palette-deep-purple, 12);
|
||||
$palette-deep-purple-A400: nth($palette-deep-purple, 13);
|
||||
$palette-deep-purple-A700: nth($palette-deep-purple, 14);
|
||||
|
||||
$palette-indigo:
|
||||
"232,234,246"
|
||||
"197,202,233"
|
||||
"159,168,218"
|
||||
"121,134,203"
|
||||
"92,107,192"
|
||||
"63,81,181"
|
||||
"57,73,171"
|
||||
"48,63,159"
|
||||
"40,53,147"
|
||||
"26,35,126"
|
||||
"140,158,255"
|
||||
"83,109,254"
|
||||
"61,90,254"
|
||||
"48,79,254";
|
||||
|
||||
$palette-indigo-50: nth($palette-indigo, 1);
|
||||
$palette-indigo-100: nth($palette-indigo, 2);
|
||||
$palette-indigo-200: nth($palette-indigo, 3);
|
||||
$palette-indigo-300: nth($palette-indigo, 4);
|
||||
$palette-indigo-400: nth($palette-indigo, 5);
|
||||
$palette-indigo-500: nth($palette-indigo, 6);
|
||||
$palette-indigo-600: nth($palette-indigo, 7);
|
||||
$palette-indigo-700: nth($palette-indigo, 8);
|
||||
$palette-indigo-800: nth($palette-indigo, 9);
|
||||
$palette-indigo-900: nth($palette-indigo, 10);
|
||||
$palette-indigo-A100: nth($palette-indigo, 11);
|
||||
$palette-indigo-A200: nth($palette-indigo, 12);
|
||||
$palette-indigo-A400: nth($palette-indigo, 13);
|
||||
$palette-indigo-A700: nth($palette-indigo, 14);
|
||||
|
||||
$palette-blue:
|
||||
"227,242,253"
|
||||
"187,222,251"
|
||||
"144,202,249"
|
||||
"100,181,246"
|
||||
"66,165,245"
|
||||
"33,150,243"
|
||||
"30,136,229"
|
||||
"25,118,210"
|
||||
"21,101,192"
|
||||
"13,71,161"
|
||||
"130,177,255"
|
||||
"68,138,255"
|
||||
"41,121,255"
|
||||
"41,98,255";
|
||||
|
||||
$palette-blue-50: nth($palette-blue, 1);
|
||||
$palette-blue-100: nth($palette-blue, 2);
|
||||
$palette-blue-200: nth($palette-blue, 3);
|
||||
$palette-blue-300: nth($palette-blue, 4);
|
||||
$palette-blue-400: nth($palette-blue, 5);
|
||||
$palette-blue-500: nth($palette-blue, 6);
|
||||
$palette-blue-600: nth($palette-blue, 7);
|
||||
$palette-blue-700: nth($palette-blue, 8);
|
||||
$palette-blue-800: nth($palette-blue, 9);
|
||||
$palette-blue-900: nth($palette-blue, 10);
|
||||
$palette-blue-A100: nth($palette-blue, 11);
|
||||
$palette-blue-A200: nth($palette-blue, 12);
|
||||
$palette-blue-A400: nth($palette-blue, 13);
|
||||
$palette-blue-A700: nth($palette-blue, 14);
|
||||
|
||||
$palette-light-blue:
|
||||
"225,245,254"
|
||||
"179,229,252"
|
||||
"129,212,250"
|
||||
"79,195,247"
|
||||
"41,182,246"
|
||||
"3,169,244"
|
||||
"3,155,229"
|
||||
"2,136,209"
|
||||
"2,119,189"
|
||||
"1,87,155"
|
||||
"128,216,255"
|
||||
"64,196,255"
|
||||
"0,176,255"
|
||||
"0,145,234";
|
||||
|
||||
$palette-light-blue-50: nth($palette-light-blue, 1);
|
||||
$palette-light-blue-100: nth($palette-light-blue, 2);
|
||||
$palette-light-blue-200: nth($palette-light-blue, 3);
|
||||
$palette-light-blue-300: nth($palette-light-blue, 4);
|
||||
$palette-light-blue-400: nth($palette-light-blue, 5);
|
||||
$palette-light-blue-500: nth($palette-light-blue, 6);
|
||||
$palette-light-blue-600: nth($palette-light-blue, 7);
|
||||
$palette-light-blue-700: nth($palette-light-blue, 8);
|
||||
$palette-light-blue-800: nth($palette-light-blue, 9);
|
||||
$palette-light-blue-900: nth($palette-light-blue, 10);
|
||||
$palette-light-blue-A100: nth($palette-light-blue, 11);
|
||||
$palette-light-blue-A200: nth($palette-light-blue, 12);
|
||||
$palette-light-blue-A400: nth($palette-light-blue, 13);
|
||||
$palette-light-blue-A700: nth($palette-light-blue, 14);
|
||||
|
||||
$palette-cyan:
|
||||
"224,247,250"
|
||||
"178,235,242"
|
||||
"128,222,234"
|
||||
"77,208,225"
|
||||
"38,198,218"
|
||||
"0,188,212"
|
||||
"0,172,193"
|
||||
"0,151,167"
|
||||
"0,131,143"
|
||||
"0,96,100"
|
||||
"132,255,255"
|
||||
"24,255,255"
|
||||
"0,229,255"
|
||||
"0,184,212";
|
||||
|
||||
$palette-cyan-50: nth($palette-cyan, 1);
|
||||
$palette-cyan-100: nth($palette-cyan, 2);
|
||||
$palette-cyan-200: nth($palette-cyan, 3);
|
||||
$palette-cyan-300: nth($palette-cyan, 4);
|
||||
$palette-cyan-400: nth($palette-cyan, 5);
|
||||
$palette-cyan-500: nth($palette-cyan, 6);
|
||||
$palette-cyan-600: nth($palette-cyan, 7);
|
||||
$palette-cyan-700: nth($palette-cyan, 8);
|
||||
$palette-cyan-800: nth($palette-cyan, 9);
|
||||
$palette-cyan-900: nth($palette-cyan, 10);
|
||||
$palette-cyan-A100: nth($palette-cyan, 11);
|
||||
$palette-cyan-A200: nth($palette-cyan, 12);
|
||||
$palette-cyan-A400: nth($palette-cyan, 13);
|
||||
$palette-cyan-A700: nth($palette-cyan, 14);
|
||||
|
||||
$palette-teal:
|
||||
"224,242,241"
|
||||
"178,223,219"
|
||||
"128,203,196"
|
||||
"77,182,172"
|
||||
"38,166,154"
|
||||
"0,150,136"
|
||||
"0,137,123"
|
||||
"0,121,107"
|
||||
"0,105,92"
|
||||
"0,77,64"
|
||||
"167,255,235"
|
||||
"100,255,218"
|
||||
"29,233,182"
|
||||
"0,191,165";
|
||||
|
||||
$palette-teal-50: nth($palette-teal, 1);
|
||||
$palette-teal-100: nth($palette-teal, 2);
|
||||
$palette-teal-200: nth($palette-teal, 3);
|
||||
$palette-teal-300: nth($palette-teal, 4);
|
||||
$palette-teal-400: nth($palette-teal, 5);
|
||||
$palette-teal-500: nth($palette-teal, 6);
|
||||
$palette-teal-600: nth($palette-teal, 7);
|
||||
$palette-teal-700: nth($palette-teal, 8);
|
||||
$palette-teal-800: nth($palette-teal, 9);
|
||||
$palette-teal-900: nth($palette-teal, 10);
|
||||
$palette-teal-A100: nth($palette-teal, 11);
|
||||
$palette-teal-A200: nth($palette-teal, 12);
|
||||
$palette-teal-A400: nth($palette-teal, 13);
|
||||
$palette-teal-A700: nth($palette-teal, 14);
|
||||
|
||||
$palette-green:
|
||||
"232,245,233"
|
||||
"200,230,201"
|
||||
"165,214,167"
|
||||
"129,199,132"
|
||||
"102,187,106"
|
||||
"76,175,80"
|
||||
"67,160,71"
|
||||
"56,142,60"
|
||||
"46,125,50"
|
||||
"27,94,32"
|
||||
"185,246,202"
|
||||
"105,240,174"
|
||||
"0,230,118"
|
||||
"0,200,83";
|
||||
|
||||
$palette-green-50: nth($palette-green, 1);
|
||||
$palette-green-100: nth($palette-green, 2);
|
||||
$palette-green-200: nth($palette-green, 3);
|
||||
$palette-green-300: nth($palette-green, 4);
|
||||
$palette-green-400: nth($palette-green, 5);
|
||||
$palette-green-500: nth($palette-green, 6);
|
||||
$palette-green-600: nth($palette-green, 7);
|
||||
$palette-green-700: nth($palette-green, 8);
|
||||
$palette-green-800: nth($palette-green, 9);
|
||||
$palette-green-900: nth($palette-green, 10);
|
||||
$palette-green-A100: nth($palette-green, 11);
|
||||
$palette-green-A200: nth($palette-green, 12);
|
||||
$palette-green-A400: nth($palette-green, 13);
|
||||
$palette-green-A700: nth($palette-green, 14);
|
||||
|
||||
$palette-light-green:
|
||||
"241,248,233"
|
||||
"220,237,200"
|
||||
"197,225,165"
|
||||
"174,213,129"
|
||||
"156,204,101"
|
||||
"139,195,74"
|
||||
"124,179,66"
|
||||
"104,159,56"
|
||||
"85,139,47"
|
||||
"51,105,30"
|
||||
"204,255,144"
|
||||
"178,255,89"
|
||||
"118,255,3"
|
||||
"100,221,23";
|
||||
|
||||
$palette-light-green-50: nth($palette-light-green, 1);
|
||||
$palette-light-green-100: nth($palette-light-green, 2);
|
||||
$palette-light-green-200: nth($palette-light-green, 3);
|
||||
$palette-light-green-300: nth($palette-light-green, 4);
|
||||
$palette-light-green-400: nth($palette-light-green, 5);
|
||||
$palette-light-green-500: nth($palette-light-green, 6);
|
||||
$palette-light-green-600: nth($palette-light-green, 7);
|
||||
$palette-light-green-700: nth($palette-light-green, 8);
|
||||
$palette-light-green-800: nth($palette-light-green, 9);
|
||||
$palette-light-green-900: nth($palette-light-green, 10);
|
||||
$palette-light-green-A100: nth($palette-light-green, 11);
|
||||
$palette-light-green-A200: nth($palette-light-green, 12);
|
||||
$palette-light-green-A400: nth($palette-light-green, 13);
|
||||
$palette-light-green-A700: nth($palette-light-green, 14);
|
||||
|
||||
$palette-lime:
|
||||
"249,251,231"
|
||||
"240,244,195"
|
||||
"230,238,156"
|
||||
"220,231,117"
|
||||
"212,225,87"
|
||||
"205,220,57"
|
||||
"192,202,51"
|
||||
"175,180,43"
|
||||
"158,157,36"
|
||||
"130,119,23"
|
||||
"244,255,129"
|
||||
"238,255,65"
|
||||
"198,255,0"
|
||||
"174,234,0";
|
||||
|
||||
$palette-lime-50: nth($palette-lime, 1);
|
||||
$palette-lime-100: nth($palette-lime, 2);
|
||||
$palette-lime-200: nth($palette-lime, 3);
|
||||
$palette-lime-300: nth($palette-lime, 4);
|
||||
$palette-lime-400: nth($palette-lime, 5);
|
||||
$palette-lime-500: nth($palette-lime, 6);
|
||||
$palette-lime-600: nth($palette-lime, 7);
|
||||
$palette-lime-700: nth($palette-lime, 8);
|
||||
$palette-lime-800: nth($palette-lime, 9);
|
||||
$palette-lime-900: nth($palette-lime, 10);
|
||||
$palette-lime-A100: nth($palette-lime, 11);
|
||||
$palette-lime-A200: nth($palette-lime, 12);
|
||||
$palette-lime-A400: nth($palette-lime, 13);
|
||||
$palette-lime-A700: nth($palette-lime, 14);
|
||||
|
||||
$palette-yellow:
|
||||
"255,253,231"
|
||||
"255,249,196"
|
||||
"255,245,157"
|
||||
"255,241,118"
|
||||
"255,238,88"
|
||||
"255,235,59"
|
||||
"253,216,53"
|
||||
"251,192,45"
|
||||
"249,168,37"
|
||||
"245,127,23"
|
||||
"255,255,141"
|
||||
"255,255,0"
|
||||
"255,234,0"
|
||||
"255,214,0";
|
||||
|
||||
$palette-yellow-50: nth($palette-yellow, 1);
|
||||
$palette-yellow-100: nth($palette-yellow, 2);
|
||||
$palette-yellow-200: nth($palette-yellow, 3);
|
||||
$palette-yellow-300: nth($palette-yellow, 4);
|
||||
$palette-yellow-400: nth($palette-yellow, 5);
|
||||
$palette-yellow-500: nth($palette-yellow, 6);
|
||||
$palette-yellow-600: nth($palette-yellow, 7);
|
||||
$palette-yellow-700: nth($palette-yellow, 8);
|
||||
$palette-yellow-800: nth($palette-yellow, 9);
|
||||
$palette-yellow-900: nth($palette-yellow, 10);
|
||||
$palette-yellow-A100: nth($palette-yellow, 11);
|
||||
$palette-yellow-A200: nth($palette-yellow, 12);
|
||||
$palette-yellow-A400: nth($palette-yellow, 13);
|
||||
$palette-yellow-A700: nth($palette-yellow, 14);
|
||||
|
||||
$palette-amber:
|
||||
"255,248,225"
|
||||
"255,236,179"
|
||||
"255,224,130"
|
||||
"255,213,79"
|
||||
"255,202,40"
|
||||
"255,193,7"
|
||||
"255,179,0"
|
||||
"255,160,0"
|
||||
"255,143,0"
|
||||
"255,111,0"
|
||||
"255,229,127"
|
||||
"255,215,64"
|
||||
"255,196,0"
|
||||
"255,171,0";
|
||||
|
||||
$palette-amber-50: nth($palette-amber, 1);
|
||||
$palette-amber-100: nth($palette-amber, 2);
|
||||
$palette-amber-200: nth($palette-amber, 3);
|
||||
$palette-amber-300: nth($palette-amber, 4);
|
||||
$palette-amber-400: nth($palette-amber, 5);
|
||||
$palette-amber-500: nth($palette-amber, 6);
|
||||
$palette-amber-600: nth($palette-amber, 7);
|
||||
$palette-amber-700: nth($palette-amber, 8);
|
||||
$palette-amber-800: nth($palette-amber, 9);
|
||||
$palette-amber-900: nth($palette-amber, 10);
|
||||
$palette-amber-A100: nth($palette-amber, 11);
|
||||
$palette-amber-A200: nth($palette-amber, 12);
|
||||
$palette-amber-A400: nth($palette-amber, 13);
|
||||
$palette-amber-A700: nth($palette-amber, 14);
|
||||
|
||||
$palette-orange:
|
||||
"255,243,224"
|
||||
"255,224,178"
|
||||
"255,204,128"
|
||||
"255,183,77"
|
||||
"255,167,38"
|
||||
"255,152,0"
|
||||
"251,140,0"
|
||||
"245,124,0"
|
||||
"239,108,0"
|
||||
"230,81,0"
|
||||
"255,209,128"
|
||||
"255,171,64"
|
||||
"255,145,0"
|
||||
"255,109,0";
|
||||
|
||||
$palette-orange-50: nth($palette-orange, 1);
|
||||
$palette-orange-100: nth($palette-orange, 2);
|
||||
$palette-orange-200: nth($palette-orange, 3);
|
||||
$palette-orange-300: nth($palette-orange, 4);
|
||||
$palette-orange-400: nth($palette-orange, 5);
|
||||
$palette-orange-500: nth($palette-orange, 6);
|
||||
$palette-orange-600: nth($palette-orange, 7);
|
||||
$palette-orange-700: nth($palette-orange, 8);
|
||||
$palette-orange-800: nth($palette-orange, 9);
|
||||
$palette-orange-900: nth($palette-orange, 10);
|
||||
$palette-orange-A100: nth($palette-orange, 11);
|
||||
$palette-orange-A200: nth($palette-orange, 12);
|
||||
$palette-orange-A400: nth($palette-orange, 13);
|
||||
$palette-orange-A700: nth($palette-orange, 14);
|
||||
|
||||
$palette-deep-orange:
|
||||
"251,233,231"
|
||||
"255,204,188"
|
||||
"255,171,145"
|
||||
"255,138,101"
|
||||
"255,112,67"
|
||||
"255,87,34"
|
||||
"244,81,30"
|
||||
"230,74,25"
|
||||
"216,67,21"
|
||||
"191,54,12"
|
||||
"255,158,128"
|
||||
"255,110,64"
|
||||
"255,61,0"
|
||||
"221,44,0";
|
||||
|
||||
$palette-deep-orange-50: nth($palette-deep-orange, 1);
|
||||
$palette-deep-orange-100: nth($palette-deep-orange, 2);
|
||||
$palette-deep-orange-200: nth($palette-deep-orange, 3);
|
||||
$palette-deep-orange-300: nth($palette-deep-orange, 4);
|
||||
$palette-deep-orange-400: nth($palette-deep-orange, 5);
|
||||
$palette-deep-orange-500: nth($palette-deep-orange, 6);
|
||||
$palette-deep-orange-600: nth($palette-deep-orange, 7);
|
||||
$palette-deep-orange-700: nth($palette-deep-orange, 8);
|
||||
$palette-deep-orange-800: nth($palette-deep-orange, 9);
|
||||
$palette-deep-orange-900: nth($palette-deep-orange, 10);
|
||||
$palette-deep-orange-A100: nth($palette-deep-orange, 11);
|
||||
$palette-deep-orange-A200: nth($palette-deep-orange, 12);
|
||||
$palette-deep-orange-A400: nth($palette-deep-orange, 13);
|
||||
$palette-deep-orange-A700: nth($palette-deep-orange, 14);
|
||||
|
||||
|
||||
// Color order: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900.
|
||||
|
||||
$palette-brown:
|
||||
"239,235,233"
|
||||
"215,204,200"
|
||||
"188,170,164"
|
||||
"161,136,127"
|
||||
"141,110,99"
|
||||
"121,85,72"
|
||||
"109,76,65"
|
||||
"93,64,55"
|
||||
"78,52,46"
|
||||
"62,39,35";
|
||||
|
||||
$palette-brown-50: nth($palette-brown, 1);
|
||||
$palette-brown-100: nth($palette-brown, 2);
|
||||
$palette-brown-200: nth($palette-brown, 3);
|
||||
$palette-brown-300: nth($palette-brown, 4);
|
||||
$palette-brown-400: nth($palette-brown, 5);
|
||||
$palette-brown-500: nth($palette-brown, 6);
|
||||
$palette-brown-600: nth($palette-brown, 7);
|
||||
$palette-brown-700: nth($palette-brown, 8);
|
||||
$palette-brown-800: nth($palette-brown, 9);
|
||||
$palette-brown-900: nth($palette-brown, 10);
|
||||
|
||||
$palette-grey:
|
||||
"250,250,250"
|
||||
"245,245,245"
|
||||
"238,238,238"
|
||||
"224,224,224"
|
||||
"189,189,189"
|
||||
"158,158,158"
|
||||
"117,117,117"
|
||||
"97,97,97"
|
||||
"66,66,66"
|
||||
"33,33,33";
|
||||
|
||||
$palette-grey-50: nth($palette-grey, 1);
|
||||
$palette-grey-100: nth($palette-grey, 2);
|
||||
$palette-grey-200: nth($palette-grey, 3);
|
||||
$palette-grey-300: nth($palette-grey, 4);
|
||||
$palette-grey-400: nth($palette-grey, 5);
|
||||
$palette-grey-500: nth($palette-grey, 6);
|
||||
$palette-grey-600: nth($palette-grey, 7);
|
||||
$palette-grey-700: nth($palette-grey, 8);
|
||||
$palette-grey-800: nth($palette-grey, 9);
|
||||
$palette-grey-900: nth($palette-grey, 10);
|
||||
|
||||
$palette-blue-grey:
|
||||
"236,239,241"
|
||||
"207,216,220"
|
||||
"176,190,197"
|
||||
"144,164,174"
|
||||
"120,144,156"
|
||||
"96,125,139"
|
||||
"84,110,122"
|
||||
"69,90,100"
|
||||
"55,71,79"
|
||||
"38,50,56";
|
||||
|
||||
$palette-blue-grey-50: nth($palette-blue-grey, 1);
|
||||
$palette-blue-grey-100: nth($palette-blue-grey, 2);
|
||||
$palette-blue-grey-200: nth($palette-blue-grey, 3);
|
||||
$palette-blue-grey-300: nth($palette-blue-grey, 4);
|
||||
$palette-blue-grey-400: nth($palette-blue-grey, 5);
|
||||
$palette-blue-grey-500: nth($palette-blue-grey, 6);
|
||||
$palette-blue-grey-600: nth($palette-blue-grey, 7);
|
||||
$palette-blue-grey-700: nth($palette-blue-grey, 8);
|
||||
$palette-blue-grey-800: nth($palette-blue-grey, 9);
|
||||
$palette-blue-grey-900: nth($palette-blue-grey, 10);
|
||||
|
||||
$color-black: "0,0,0";
|
||||
$color-white: "255,255,255";
|
||||
|
||||
|
||||
/* colors.scss */
|
||||
$styleguide-generate-template: false !default;
|
||||
|
||||
// The two possible colors for overlayed text.
|
||||
$color-dark-contrast: $color-white !default;
|
||||
$color-light-contrast: $color-black !default;
|
||||
19
app/views/qor/assets/stylesheets/scss/mdl/_functions.scss
Normal file
19
app/views/qor/assets/stylesheets/scss/mdl/_functions.scss
Normal file
@@ -0,0 +1,19 @@
|
||||
/**
|
||||
* Copyright 2015 Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
@function strip-units($number) {
|
||||
@return $number / ($number * 0 + 1);
|
||||
}
|
||||
301
app/views/qor/assets/stylesheets/scss/mdl/_mixins.scss
Normal file
301
app/views/qor/assets/stylesheets/scss/mdl/_mixins.scss
Normal file
@@ -0,0 +1,301 @@
|
||||
/**
|
||||
* Copyright 2015 Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
/* Typography */
|
||||
|
||||
@mixin typo-preferred-font($usePreferred: true) {
|
||||
@if $usePreferred {
|
||||
font-family: $preferred_font;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-display-4($colorContrast: false, $usePreferred: true) {
|
||||
@include typo-preferred-font($usePreferred);
|
||||
font-size: 112px;
|
||||
font-weight: 300;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.04em;
|
||||
|
||||
@if $colorContrast {
|
||||
opacity: 0.54;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-display-3($colorContrast: false, $usePreferred: true) {
|
||||
@include typo-preferred-font($usePreferred);
|
||||
font-size: 56px;
|
||||
font-weight: 400;
|
||||
line-height: 1.35;
|
||||
letter-spacing: -0.02em;
|
||||
|
||||
@if $colorContrast {
|
||||
opacity: 0.54;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-display-2($colorContrast: false, $usePreferred: true) {
|
||||
@include typo-preferred-font($usePreferred);
|
||||
font-size: 45px;
|
||||
font-weight: 400;
|
||||
line-height: 48px;
|
||||
|
||||
@if $colorContrast {
|
||||
opacity: 0.54;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-display-1($colorContrast: false, $usePreferred: true) {
|
||||
@include typo-preferred-font($usePreferred);
|
||||
font-size: 34px;
|
||||
font-weight: 400;
|
||||
line-height: 40px;
|
||||
|
||||
@if $colorContrast {
|
||||
opacity: 0.54;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-headline($colorContrast: false, $usePreferred: true) {
|
||||
@include typo-preferred-font($usePreferred);
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
line-height: 32px;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
@if $colorContrast {
|
||||
opacity: 0.87;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-title($colorContrast: false, $usePreferred: true) {
|
||||
@include typo-preferred-font($usePreferred);
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
letter-spacing: 0.02em;
|
||||
|
||||
@if $colorContrast {
|
||||
opacity: 0.87;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-subhead($colorContrast: false, $usePreferred: true) {
|
||||
@include typo-preferred-font($usePreferred);
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
letter-spacing: 0.04em;
|
||||
|
||||
@if $colorContrast {
|
||||
opacity: 0.87;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-subhead-2($colorContrast: false, $usePreferred: true) {
|
||||
@include typo-preferred-font($usePreferred);
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 28px;
|
||||
letter-spacing: 0.04em;
|
||||
|
||||
@if $colorContrast {
|
||||
opacity: 0.87;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-body-2($colorContrast: false, $usePreferred: false) {
|
||||
@include typo-preferred-font($usePreferred);
|
||||
font-size: 14px;
|
||||
@if $usePreferred {
|
||||
font-weight: 500;
|
||||
} @else {
|
||||
font-weight: bold;
|
||||
}
|
||||
line-height: 24px;
|
||||
letter-spacing: 0;
|
||||
|
||||
@if $colorContrast {
|
||||
opacity: 0.87;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-body-1($colorContrast: false, $usePreferred: false) {
|
||||
@include typo-preferred-font($usePreferred);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
letter-spacing: 0;
|
||||
|
||||
@if $colorContrast {
|
||||
opacity: 0.87;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-caption($colorContrast: false, $usePreferred: false) {
|
||||
@include typo-preferred-font($usePreferred);
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
letter-spacing: 0;
|
||||
|
||||
@if $colorContrast {
|
||||
opacity: 0.54;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-blockquote($colorContrast: false, $usePreferred: true) {
|
||||
@include typo-preferred-font($usePreferred);
|
||||
position: relative;
|
||||
font-size: 24px;
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
line-height: 1.35;
|
||||
letter-spacing: 0.08em;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
left: -0.5em;
|
||||
content: '“';
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '”';
|
||||
margin-left: -0.05em;
|
||||
}
|
||||
|
||||
@if $colorContrast {
|
||||
opacity: 0.54;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-menu($colorContrast: false, $usePreferred: true) {
|
||||
@include typo-preferred-font($usePreferred);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
letter-spacing: 0;
|
||||
|
||||
@if $colorContrast {
|
||||
opacity: 0.87;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-button($colorContrast: false, $usePreferred: true) {
|
||||
@include typo-preferred-font($usePreferred);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
line-height: 1;
|
||||
letter-spacing: 0;
|
||||
|
||||
@if $colorContrast {
|
||||
opacity: 0.87;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-icon() {
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
word-wrap: normal;
|
||||
font-feature-settings: 'liga';
|
||||
-webkit-font-feature-settings: 'liga';
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* Shadows */
|
||||
|
||||
// Focus shadow mixin.
|
||||
@mixin focus-shadow() {
|
||||
box-shadow: 0 0 8px rgba(0,0,0,.18),0 8px 16px rgba(0,0,0,.36);
|
||||
}
|
||||
|
||||
@mixin shadow-2dp() {
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
|
||||
0 3px 1px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
|
||||
0 1px 5px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
|
||||
}
|
||||
@mixin shadow-3dp() {
|
||||
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
|
||||
0 3px 3px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
|
||||
0 1px 8px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
|
||||
}
|
||||
@mixin shadow-4dp() {
|
||||
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
|
||||
0 1px 10px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
|
||||
0 2px 4px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity);
|
||||
}
|
||||
@mixin shadow-6dp() {
|
||||
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
|
||||
0 1px 18px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
|
||||
0 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity);
|
||||
}
|
||||
@mixin shadow-8dp() {
|
||||
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
|
||||
0 3px 14px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
|
||||
0 5px 5px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity);
|
||||
}
|
||||
|
||||
@mixin shadow-16dp() {
|
||||
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
|
||||
0 6px 30px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
|
||||
0 8px 10px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity);
|
||||
}
|
||||
|
||||
@mixin shadow-24dp() {
|
||||
box-shadow: 0 9px 46px 8px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
|
||||
0 11px 15px -7px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
|
||||
0 24px 38px 3px rgba(0, 0, 0, $shadow-key-umbra-opacity);
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
|
||||
@mixin material-animation-fast-out-slow-in($duration:0.2s) {
|
||||
transition-duration: $duration;
|
||||
transition-timing-function: $animation-curve-fast-out-slow-in;
|
||||
}
|
||||
|
||||
@mixin material-animation-linear-out-slow-in($duration:0.2s) {
|
||||
transition-duration: $duration;
|
||||
transition-timing-function: $animation-curve-linear-out-slow-in;
|
||||
}
|
||||
|
||||
@mixin material-animation-fast-out-linear-in($duration:0.2s) {
|
||||
transition-duration: $duration;
|
||||
transition-timing-function: $animation-curve-fast-out-linear-in;
|
||||
}
|
||||
|
||||
@mixin material-animation-default($duration:0.2s) {
|
||||
transition-duration: $duration;
|
||||
transition-timing-function: $animation-curve-default;
|
||||
}
|
||||
|
||||
/* Dialog */
|
||||
|
||||
@mixin dialog-width($units:5) {
|
||||
@if(type_of($units) != 'number') {
|
||||
@error "The unit given to dialog-width should be a number.";
|
||||
}
|
||||
// 56dp is the base unit width for Dialogs.
|
||||
// With 5 units being the number of units for a mobile device.
|
||||
// https://goo.gl/sK2O5o
|
||||
width: $units * 56px;
|
||||
}
|
||||
583
app/views/qor/assets/stylesheets/scss/mdl/_variables.scss
Normal file
583
app/views/qor/assets/stylesheets/scss/mdl/_variables.scss
Normal file
@@ -0,0 +1,583 @@
|
||||
/**
|
||||
* Copyright 2015 Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
/*------------------------------------*\
|
||||
$CONTENTS
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* STYLE GUIDE VARIABLES------------------Declarations of Sass variables
|
||||
* -----Typography
|
||||
* -----Colors
|
||||
* -----Textfield
|
||||
* -----Switch
|
||||
* -----Spinner
|
||||
* -----Radio
|
||||
* -----Menu
|
||||
* -----List
|
||||
* -----Layout
|
||||
* -----Icon toggles
|
||||
* -----Footer
|
||||
* -----Column
|
||||
* -----Checkbox
|
||||
* -----Card
|
||||
* -----Button
|
||||
* -----Animation
|
||||
* -----Progress
|
||||
* -----Badge
|
||||
* -----Shadows
|
||||
* -----Grid
|
||||
* -----Data table
|
||||
* -----Dialog
|
||||
* -----Snackbar
|
||||
*
|
||||
* Even though all variables have the `!default` directive, most of them
|
||||
* should not be changed as they are dependent one another. This can cause
|
||||
* visual distortions (like alignment issues) that are hard to track down
|
||||
* and fix.
|
||||
*/
|
||||
|
||||
|
||||
/* ========== TYPOGRAPHY ========== */
|
||||
|
||||
/* We're splitting fonts into "preferred" and "performance" in order to optimize
|
||||
page loading. For important text, such as the body, we want it to load
|
||||
immediately and not wait for the web font load, whereas for other sections,
|
||||
such as headers and titles, we're OK with things taking a bit longer to load.
|
||||
We do have some optional classes and parameters in the mixins, in case you
|
||||
definitely want to make sure you're using the preferred font and don't mind
|
||||
the performance hit.
|
||||
We should be able to improve on this once CSS Font Loading L3 becomes more
|
||||
widely available.
|
||||
*/
|
||||
$preferred_font: 'Roboto', 'Helvetica', 'Arial', sans-serif !default;
|
||||
$performance_font: 'Helvetica', 'Arial', sans-serif !default;
|
||||
|
||||
/* ========== COLORS ========== */
|
||||
|
||||
/**
|
||||
*
|
||||
* Material design color palettes.
|
||||
* @see http://www.google.com/design/spec/style/color.html
|
||||
*
|
||||
**/
|
||||
|
||||
@import "color-definitions";
|
||||
@import "functions";
|
||||
|
||||
/* ========== IMAGES ========== */
|
||||
$image_path: '/images' !default;
|
||||
|
||||
/* ========== Color & Themes ========== */
|
||||
|
||||
// Define whether individual color palette items should have classes created.
|
||||
// Setting this to true will remove individual color classes for each color in the palettes.
|
||||
// To improve overall performance (assuming they aren't used) by:
|
||||
// * Saving server bandwidth sending the extra classes
|
||||
// * Save client computation against the classes
|
||||
// it is RECOMMENDED you set this to true.
|
||||
$trim-color-classes: false !default;
|
||||
|
||||
// Use color primarily for emphasis. Choose colors that fit with
|
||||
// your brand and provide good contrast between visual components.
|
||||
$color-primary: $palette-indigo-500 !default;
|
||||
$color-primary-dark: $palette-indigo-700 !default;
|
||||
$color-accent: $palette-pink-A200 !default;
|
||||
|
||||
// Our primary is dark, so use $color-dark-contrast for overlaid text.
|
||||
$color-primary-contrast: $color-dark-contrast !default;
|
||||
// Our accent is dark, so use $color-dark-contrast for overlaid text.
|
||||
$color-accent-contrast: $color-dark-contrast !default;
|
||||
|
||||
// Replace all colors with placeholders if we're generating a template.
|
||||
@if $styleguide-generate-template == true {
|
||||
$color-primary: '$color-primary';
|
||||
$color-primary-dark: '$color-primary-dark';
|
||||
$color-accent: '$color-accent';
|
||||
$color-primary-contrast: '$color-primary-contrast';
|
||||
$color-accent-contrast: '$color-accent-contrast';
|
||||
}
|
||||
|
||||
/* ========== Typography ========== */
|
||||
|
||||
// We use the following default color styles: text-color-primary and
|
||||
// text-color-secondary. For light themes, use text-color-primary-inverse
|
||||
// and text-color-secondary-inverse.
|
||||
|
||||
$text-color-primary: unquote("rgba(#{$color-black}, 0.87)") !default;
|
||||
$text-link-color: unquote("rgb(#{$color-accent})") !default;
|
||||
|
||||
// Define whether to target elements directly for typographic enhancements.
|
||||
// Turning this off means you need to use mdl-* classes more often.
|
||||
// Other components may also fail to adhere to MD without these rules.
|
||||
// It is strongly recommended you leave this as true.
|
||||
|
||||
$target-elements-directly: true !default;
|
||||
|
||||
/* ========== Components ========== */
|
||||
|
||||
/* ========== Standard Buttons ========== */
|
||||
|
||||
// Default button colors.
|
||||
$button-primary-color: unquote("rgba(#{$palette-grey-500}, 0.20)") !default;
|
||||
$button-secondary-color: unquote("rgb(#{$color-black})") !default;
|
||||
$button-hover-color: $button-primary-color !default;
|
||||
$button-active-color: unquote("rgba(#{$palette-grey-500}, 0.40)") !default;
|
||||
$button-focus-color: unquote("rgba(#{$color-black}, 0.12)") !default;
|
||||
|
||||
// Colored button colors.
|
||||
$button-primary-color-alt: unquote("rgb(#{$color-primary})") !default;
|
||||
$button-secondary-color-alt: unquote("rgb(#{$color-primary-contrast})") !default;
|
||||
$button-hover-color-alt: unquote("rgb(#{$color-primary})") !default;
|
||||
$button-active-color-alt: unquote("rgb(#{$color-primary})") !default;
|
||||
$button-focus-color-alt: $button-focus-color !default;
|
||||
|
||||
// Ripple color for colored raised buttons.
|
||||
$button-ripple-color-alt: unquote("rgb(#{$color-primary-contrast})") !default;
|
||||
|
||||
// Disabled button colors.
|
||||
$button-primary-color-disabled: unquote("rgba(#{$color-black}, 0.12)") !default;
|
||||
$button-secondary-color-disabled: unquote("rgba(#{$color-black}, 0.26)") !default;
|
||||
|
||||
// FAB colors and sizes.
|
||||
$button-fab-color-alt: unquote("rgb(#{$color-accent})") !default;
|
||||
$button-fab-hover-color-alt: unquote("rgb(#{$color-accent})") !default;
|
||||
$button-fab-active-color-alt: unquote("rgb(#{$color-accent})") !default;
|
||||
$button-fab-text-color-alt: unquote("rgb(#{$color-accent-contrast})") !default;
|
||||
$button-fab-ripple-color-alt: unquote("rgb(#{$color-accent-contrast})") !default;
|
||||
|
||||
// Icon button colors and sizes.
|
||||
$button-icon-color: unquote("rgb(#{$palette-grey-700})") !default;
|
||||
$button-icon-focus-color: $button-focus-color !default;
|
||||
|
||||
/* ========== Icon Toggles ========== */
|
||||
|
||||
$icon-toggle-color: unquote("rgb(#{$palette-grey-700})") !default;
|
||||
$icon-toggle-focus-color: $button-focus-color !default;
|
||||
$icon-toggle-checked-color: unquote("rgb(#{$color-primary})") !default;
|
||||
$icon-toggle-checked-focus-color: unquote("rgba(#{$color-primary}, 0.26)") !default;
|
||||
$icon-toggle-disabled-color: unquote("rgba(#{$color-black}, 0.26)") !default;
|
||||
|
||||
/* ========== Radio Buttons ========== */
|
||||
|
||||
$radio-color: unquote("rgb(#{$color-primary})") !default;
|
||||
$radio-off-color: unquote("rgba(#{$color-black}, 0.54)") !default;
|
||||
$radio-disabled-color: unquote("rgba(#{$color-black}, 0.26)") !default;
|
||||
|
||||
/* ========== Ripple effect ========== */
|
||||
|
||||
$ripple-bg-color: unquote("rgb(#{$color-light-contrast})") !default;
|
||||
|
||||
/* ========== Layout ========== */
|
||||
|
||||
$layout-nav-color: unquote("rgb(#{$palette-grey-300})") !default;
|
||||
|
||||
// Drawer
|
||||
$layout-drawer-bg-color: unquote("rgb(#{$palette-grey-50})") !default;
|
||||
$layout-drawer-border-color: unquote("rgb(#{$palette-grey-300})") !default;
|
||||
$layout-text-color: unquote("rgb(#{$palette-grey-800})") !default;
|
||||
$layout-drawer-navigation-color: #757575 !default;
|
||||
$layout-drawer-navigation-link-active-background: unquote("rgb(#{$color-light-contrast})") !default;
|
||||
$layout-drawer-navigation-link-active-color: unquote("rgb(#{$palette-grey-300})") !default;
|
||||
|
||||
// Header
|
||||
$layout-header-bg-color: unquote("rgb(#{$color-primary})") !default;
|
||||
$layout-header-text-color: unquote("rgb(#{$color-primary-contrast})") !default;
|
||||
$layout-header-nav-hover-color: unquote("rgba(#{$palette-grey-700}, 0.6)") !default;
|
||||
$layout-header-tab-text-color: unquote("rgba(#{$color-primary-contrast}, 0.6)") !default;
|
||||
|
||||
// Tabs
|
||||
$layout-header-tab-highlight: unquote("rgb(#{$color-accent})") !default;
|
||||
|
||||
/* ========== Content Tabs ========== */
|
||||
|
||||
$tab-highlight-color: unquote("rgb(#{$color-primary})") !default;
|
||||
$tab-text-color: unquote("rgba(#{$color-black}, 0.54)") !default;
|
||||
$tab-active-text-color: unquote("rgba(#{$color-black}, 0.87)") !default;
|
||||
$tab-border-color: unquote("rgb(#{$palette-grey-300})") !default;
|
||||
|
||||
/* ========== Checkboxes ========== */
|
||||
|
||||
$checkbox-color: unquote("rgb(#{$color-primary})") !default;
|
||||
$checkbox-off-color: unquote("rgba(#{$color-black}, 0.54)") !default;
|
||||
$checkbox-disabled-color: unquote("rgba(#{$color-black}, 0.26)") !default;
|
||||
$checkbox-focus-color: unquote("rgba(#{$color-primary}, 0.26)") !default;
|
||||
$checkbox-image-path: $image_path;
|
||||
|
||||
/* ========== Switches ========== */
|
||||
|
||||
$switch-color: unquote("rgb(#{$color-primary})") !default;
|
||||
$switch-faded-color: unquote("rgba(#{$color-primary}, 0.26)") !default;
|
||||
$switch-thumb-color: $switch-color !default;
|
||||
$switch-track-color: unquote("rgba(#{$color-primary}, 0.5)") !default;
|
||||
|
||||
$switch-off-thumb-color: unquote("rgb(#{$palette-grey-50})") !default;
|
||||
$switch-off-track-color: unquote("rgba(#{$color-black}, 0.26)") !default;
|
||||
$switch-disabled-thumb-color: unquote("rgb(#{$palette-grey-400})") !default;
|
||||
$switch-disabled-track-color: unquote("rgba(#{$color-black}, 0.12)") !default;
|
||||
|
||||
/* ========== Spinner ========== */
|
||||
|
||||
$spinner-color-1: unquote("rgb(#{$palette-blue-400})") !default;
|
||||
$spinner-color-2: unquote("rgb(#{$palette-red-500})") !default;
|
||||
$spinner-color-3: unquote("rgb(#{$palette-yellow-600})") !default;
|
||||
$spinner-color-4: unquote("rgb(#{$palette-green-500})") !default;
|
||||
|
||||
$spinner-single-color: unquote("rgb(#{$color-primary})") !default;
|
||||
|
||||
/* ========== Text fields ========== */
|
||||
|
||||
$input-text-background-color: transparent !default;
|
||||
$input-text-label-color: unquote("rgba(#{$color-black}, 0.26)") !default;
|
||||
$input-text-bottom-border-color: unquote("rgba(#{$color-black}, 0.12)") !default;
|
||||
$input-text-highlight-color: unquote("rgb(#{$color-primary})") !default;
|
||||
$input-text-disabled-color: $input-text-bottom-border-color !default;
|
||||
$input-text-disabled-text-color: $input-text-label-color !default;
|
||||
$input-text-error-color: unquote("rgb(#{$palette-red-A700})") !default;
|
||||
|
||||
/* ========== Card ========== */
|
||||
|
||||
$card-background-color: unquote("rgb(#{$color-white})") !default;
|
||||
$card-text-color: unquote("rgb(#{$color-black})") !default;
|
||||
$card-image-placeholder-color: unquote("rgb(#{$color-accent})") !default;
|
||||
$card-supporting-text-text-color: unquote("rgba(#{$color-black}, 0.54)") !default;
|
||||
$card-border-color: rgba(0,0,0,0.1) !default;
|
||||
$card-subtitle-color: unquote("rgba(#{$color-black}, 0.54)") !default;
|
||||
|
||||
/* ========== Sliders ========== */
|
||||
|
||||
$range-bg-color: unquote("rgba(#{$color-black}, 0.26)") !default;
|
||||
$range-color: unquote("rgb(#{$color-primary})") !default;
|
||||
$range-faded-color: unquote("rgba(#{$color-primary}, 0.26)") !default;
|
||||
$range-bg-focus-color: unquote("rgba(#{$color-black}, 0.12)") !default;
|
||||
|
||||
/* ========== Progress ========== */
|
||||
$progress-main-color: unquote("rgb(#{$color-primary})") !default;
|
||||
$progress-secondary-color: unquote("rgba(#{$color-primary-contrast}, 0.7)") !default;
|
||||
$progress-fallback-buffer-color: unquote("rgba(#{$color-primary-contrast}, 0.9)") !default;
|
||||
$progress-image-path: $image_path;
|
||||
|
||||
/* ========== List ========== */
|
||||
|
||||
$list-main-text-text-color: unquote("rgba(#{$color-black}, 0.87)") !default;
|
||||
$list-supporting-text-text-color: unquote("rgba(#{$color-black}, 0.54)") !default;
|
||||
$list-icon-color: unquote("rgb(#{$palette-grey-600})") !default;
|
||||
$list-avatar-color: white !default;
|
||||
|
||||
/* ========== Item ========== */
|
||||
|
||||
// Default Item Colors
|
||||
$default-item-text-color: unquote("rgba(#{$color-black}, 0.87)") !default;
|
||||
$default-item-outline-color: unquote("rgb(#{$palette-grey-400})") !default;
|
||||
$default-item-hover-bg-color: unquote("rgb(#{$palette-grey-200})") !default;
|
||||
$default-item-focus-bg-color: unquote("rgb(#{$palette-grey-200})") !default;
|
||||
$default-item-active-bg-color: unquote("rgb(#{$palette-grey-300})") !default;
|
||||
$default-item-divider-color: unquote("rgba(#{$color-black}, 0.12)") !default;
|
||||
|
||||
// Disabled Button Colors
|
||||
$disabled-item-text-color: unquote("rgb(#{$palette-grey-400})") !default;
|
||||
|
||||
/* ========== Dropdown menu ========== */
|
||||
|
||||
$default-dropdown-bg-color: unquote("rgb(#{$color-white})") !default;
|
||||
|
||||
/* ========== Tooltips ========== */
|
||||
|
||||
$tooltip-text-color: unquote("rgb(#{$color-white})") !default;
|
||||
$tooltip-background-color: unquote("rgba(#{$palette-grey-700}, 0.9)") !default;
|
||||
|
||||
/* ========== Footer ========== */
|
||||
|
||||
$footer-bg-color: unquote("rgb(#{$palette-grey-800})") !default;
|
||||
$footer-color: unquote("rgb(#{$palette-grey-500})") !default;
|
||||
$footer-heading-color: unquote("rgb(#{$palette-grey-300})") !default;
|
||||
$footer-button-fill-color: $footer-color !default;
|
||||
$footer-underline-color: $footer-color !default;
|
||||
|
||||
|
||||
/* TEXTFIELD */
|
||||
|
||||
$input-text-font-size: 16px !default;
|
||||
$input-text-width: 100% !default;
|
||||
$input-text-padding: 4px !default;
|
||||
$input-text-vertical-spacing: 20px !default;
|
||||
|
||||
$input-text-button-size: 32px !default;
|
||||
$input-text-floating-label-fontsize: 12px !default;
|
||||
$input-text-expandable-icon-top: 16px !default;
|
||||
|
||||
|
||||
/* SWITCH */
|
||||
|
||||
$switch-label-font-size: 16px !default;
|
||||
$switch-label-height: 24px !default;
|
||||
$switch-track-height: 14px !default;
|
||||
$switch-track-length: 36px !default;
|
||||
$switch-thumb-size: 20px !default;
|
||||
$switch-track-top: ($switch-label-height - $switch-track-height) / 2 !default;
|
||||
$switch-thumb-top: ($switch-label-height - $switch-thumb-size) / 2 !default;
|
||||
$switch-ripple-size: $switch-label-height * 2 !default;
|
||||
$switch-helper-size: 8px !default;
|
||||
|
||||
/* SPINNER */
|
||||
|
||||
$spinner-size: 28px !default;
|
||||
$spinner-stroke-width: 3px !default;
|
||||
|
||||
// Amount of circle the arc takes up.
|
||||
$spinner-arc-size: 270deg !default;
|
||||
// Time it takes to expand and contract arc.
|
||||
$spinner-arc-time: 1333ms !default;
|
||||
// How much the start location of the arc should rotate each time.
|
||||
$spinner-arc-start-rot: 216deg !default;
|
||||
|
||||
$spinner-duration: 360 * $spinner-arc-time / (
|
||||
strip-units($spinner-arc-start-rot + (360deg - $spinner-arc-size)));
|
||||
|
||||
|
||||
/* RADIO */
|
||||
|
||||
$radio-label-font-size: 16px !default;
|
||||
$radio-label-height: 24px !default;
|
||||
$radio-button-size: 16px !default;
|
||||
$radio-inner-margin: $radio-button-size / 4;
|
||||
$radio-padding: 8px !default;
|
||||
$radio-top-offset: ($radio-label-height - $radio-button-size) / 2;
|
||||
$radio-ripple-size: 42px !default;
|
||||
|
||||
|
||||
/* MENU */
|
||||
|
||||
$menu-expand-duration: 0.3s !default;
|
||||
$menu-fade-duration: 0.2s !default;
|
||||
|
||||
/* LIST */
|
||||
|
||||
$list-border: 8px !default;
|
||||
$list-min-height: 48px !default;
|
||||
$list-min-padding: 16px !default;
|
||||
$list-bottom-padding: 20px !default;
|
||||
$list-avatar-text-left-distance: 72px !default;
|
||||
$list-icon-text-left-distance: 72px !default;
|
||||
|
||||
$list-avatar-size: 40px !default;
|
||||
$list-icon-size: 24px !default;
|
||||
|
||||
$list-two-line-height: 72px !default;
|
||||
$list-three-line-height: 88px !default;
|
||||
|
||||
/* LAYOUT */
|
||||
|
||||
$layout-drawer-narrow: 240px !default;
|
||||
$layout-drawer-wide: 456px !default;
|
||||
$layout-drawer-width: $layout-drawer-narrow !default;
|
||||
|
||||
$layout-header-icon-size: 32px !default;
|
||||
$layout-screen-size-threshold: 1024px !default;
|
||||
$layout-header-icon-margin: 24px !default;
|
||||
$layout-drawer-button-mobile-size: 32px !default;
|
||||
$layout-drawer-button-desktop-size: 48px !default;
|
||||
|
||||
$layout-header-mobile-row-height: 56px !default;
|
||||
$layout-mobile-header-height: $layout-header-mobile-row-height;
|
||||
$layout-header-desktop-row-height: 64px !default;
|
||||
$layout-desktop-header-height: $layout-header-desktop-row-height;
|
||||
|
||||
$layout-header-desktop-baseline: 80px !default;
|
||||
$layout-header-mobile-baseline: 72px !default;
|
||||
$layout-header-mobile-indent: 16px !default;
|
||||
$layout-header-desktop-indent: 40px !default;
|
||||
|
||||
$layout-tab-font-size: 14px !default;
|
||||
$layout-tab-bar-height: 48px !default;
|
||||
$layout-tab-mobile-padding: 12px !default;
|
||||
$layout-tab-desktop-padding: 24px !default;
|
||||
$layout-tab-highlight-thickness: 2px !default;
|
||||
|
||||
|
||||
/* ICON TOGGLE */
|
||||
|
||||
$icon-toggle-size: 32px !default;
|
||||
$icon-toggle-font-size: 24px !default;
|
||||
$icon-toggle-ripple-size: 36px !default;
|
||||
|
||||
/* FOOTER */
|
||||
|
||||
/*mega-footer*/
|
||||
$footer-min-padding: 16px !default;
|
||||
$footer-padding-sides: 40px !default;
|
||||
$footer-heading-font-size: 14px !default;
|
||||
$footer-heading-line-height: (1.7 * $footer-heading-font-size) !default;
|
||||
$footer-btn-size: 36px !default;
|
||||
|
||||
/*mini-footer*/
|
||||
$padding: 16px !default;
|
||||
$footer-heading-font-size: 24px !default;
|
||||
$footer-heading-line-height: (1.5 * $footer-heading-font-size) !default;
|
||||
$footer-btn-size: 36px !default;
|
||||
|
||||
/* CHECKBOX */
|
||||
|
||||
$checkbox-label-font-size: 16px !default;
|
||||
$checkbox-label-height: 24px !default;
|
||||
$checkbox-button-size: 16px !default;
|
||||
$checkbox-inner-margin: 2px !default;
|
||||
$checkbox-padding: 8px !default;
|
||||
$checkbox-top-offset:
|
||||
($checkbox-label-height - $checkbox-button-size - $checkbox-inner-margin) / 2;
|
||||
$checkbox-ripple-size: $checkbox-label-height * 1.5;
|
||||
|
||||
/* CARD */
|
||||
|
||||
/* Card dimensions */
|
||||
$card-width: 330px !default;
|
||||
$card-height: 200px !default;
|
||||
$card-font-size: 16px !default;
|
||||
$card-title-font-size: 24px !default;
|
||||
$card-subtitle-font-size: 14px !default;
|
||||
$card-horizontal-padding: 16px !default;
|
||||
$card-vertical-padding: 16px !default;
|
||||
|
||||
$card-title-perspective-origin-x: 165px !default;
|
||||
$card-title-perspective-origin-y: 56px !default;
|
||||
|
||||
$card-title-transform-origin-x: 165px !default;
|
||||
$card-title-transform-origin-y: 56px !default;
|
||||
|
||||
$card-title-text-transform-origin-x: 149px !default;
|
||||
$card-title-text-transform-origin-y: 48px !default;
|
||||
|
||||
$card-supporting-text-font-size: 1rem !default;
|
||||
$card-supporting-text-line-height: 18px !default;
|
||||
|
||||
$card-actions-font-size: 16px !default;
|
||||
|
||||
$card-title-text-font-weight: 300 !default;
|
||||
$card-z-index: 1 !default;
|
||||
|
||||
/* Cover image */
|
||||
$card-cover-image-height: 186px !default;
|
||||
$card-background-image-url: '' !default;
|
||||
|
||||
|
||||
/* BUTTON */
|
||||
/**
|
||||
*
|
||||
* Dimensions
|
||||
*
|
||||
*/
|
||||
$button-min-width: 64px !default;
|
||||
$button-height: 36px !default;
|
||||
$button-padding: 16px !default;
|
||||
$button-margin: 4px !default;
|
||||
$button-border-radius: 2px !default;
|
||||
|
||||
$button-fab-size: 56px !default;
|
||||
$button-fab-size-mini: 40px !default;
|
||||
$button-fab-font-size: 24px !default;
|
||||
|
||||
$button-icon-size: 32px !default;
|
||||
$button-icon-size-mini: 24px !default;
|
||||
|
||||
|
||||
/* ANIMATION */
|
||||
$animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1) !default;
|
||||
$animation-curve-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1) !default;
|
||||
$animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1) !default;
|
||||
|
||||
$animation-curve-default: $animation-curve-fast-out-slow-in !default;
|
||||
|
||||
|
||||
/* PROGRESS */
|
||||
$bar-height: 4px !default;
|
||||
|
||||
/* BADGE */
|
||||
$badge-font-size: 12px !default;
|
||||
$badge-color: unquote("rgb(#{$color-accent-contrast})") !default;
|
||||
$badge-color-inverse: unquote("rgb(#{$color-accent})") !default;
|
||||
$badge-background: unquote("rgb(#{$color-accent})") !default;
|
||||
$badge-background-inverse: unquote("rgba(#{$color-accent-contrast},0.2)") !default;
|
||||
$badge-size : 22px !default;
|
||||
$badge-padding: 2px !default;
|
||||
$badge-overlap: 12px !default;
|
||||
|
||||
/* SHADOWS */
|
||||
|
||||
$shadow-key-umbra-opacity: 0.2 !default;
|
||||
$shadow-key-penumbra-opacity: 0.14 !default;
|
||||
$shadow-ambient-shadow-opacity: 0.12 !default;
|
||||
|
||||
/* GRID */
|
||||
|
||||
$grid-desktop-columns: 12 !default;
|
||||
$grid-desktop-gutter: 16px !default;
|
||||
$grid-desktop-margin: 16px !default;
|
||||
|
||||
$grid-desktop-breakpoint: 840px !default;
|
||||
|
||||
$grid-tablet-columns: 8 !default;
|
||||
$grid-tablet-gutter: $grid-desktop-gutter !default;
|
||||
$grid-tablet-margin: $grid-desktop-margin !default;
|
||||
|
||||
$grid-tablet-breakpoint: 480px !default;
|
||||
|
||||
$grid-phone-columns: 4 !default;
|
||||
$grid-phone-gutter: $grid-desktop-gutter !default;
|
||||
$grid-phone-margin: $grid-desktop-margin !default;
|
||||
|
||||
$grid-cell-default-columns: $grid-phone-columns !default;
|
||||
$grid-max-columns: $grid-desktop-columns !default;
|
||||
|
||||
/* DATA TABLE */
|
||||
|
||||
$data-table-font-size: 13px !default;
|
||||
$data-table-header-font-size: 12px !default;
|
||||
$data-table-header-sort-icon-size: 16px !default;
|
||||
|
||||
$data-table-header-color: rgba(#000, 0.54) !default;
|
||||
$data-table-header-sorted-color: rgba(#000, 0.87) !default;
|
||||
$data-table-divider-color: rgba(#000, 0.12) !default;
|
||||
|
||||
$data-table-hover-color: #eeeeee !default;
|
||||
$data-table-selection-color: #e0e0e0 !default;
|
||||
|
||||
$data-table-dividers: 1px solid $data-table-divider-color !default;
|
||||
|
||||
$data-table-row-height: 48px !default;
|
||||
$data-table-last-row-height: 56px !default;
|
||||
$data-table-header-height: 56px !default;
|
||||
|
||||
$data-table-column-spacing: 36px !default;
|
||||
$data-table-column-padding: $data-table-column-spacing / 2;
|
||||
|
||||
$data-table-card-header-height: 64px !default;
|
||||
$data-table-card-title-top: 20px !default;
|
||||
$data-table-card-padding: 24px !default;
|
||||
$data-table-button-padding-right: 16px !default;
|
||||
$data-table-cell-top: $data-table-card-padding / 2;
|
||||
|
||||
/* DIALOG */
|
||||
$dialog-content-color: $card-supporting-text-text-color;
|
||||
|
||||
/* SNACKBAR */
|
||||
|
||||
// Hard coded since the color is not present in any palette.
|
||||
$snackbar-background-color: #323232 !default;
|
||||
$snackbar-tablet-breakpoint: $grid-tablet-breakpoint;
|
||||
$snackbar-action-color: unquote("rgb(#{$color-accent})") !default;
|
||||
|
||||
/* TOOLTIP */
|
||||
$tooltip-font-size: 10px !default;
|
||||
$tooltip-font-size-large: 14px !default;
|
||||
16
app/views/qor/assets/stylesheets/scss/qor.scss
Normal file
16
app/views/qor/assets/stylesheets/scss/qor.scss
Normal file
@@ -0,0 +1,16 @@
|
||||
@import "variables";
|
||||
@import "mixins";
|
||||
|
||||
@import "qor/datepicker";
|
||||
@import "qor/qor-chooser";
|
||||
@import "qor/qor-cropper";
|
||||
@import "qor/qor-datepicker";
|
||||
@import "qor/qor-fixer";
|
||||
@import "qor/qor-modal";
|
||||
@import "qor/qor-redactor";
|
||||
@import "qor/qor-selector";
|
||||
@import "qor/qor-filter";
|
||||
@import "qor/qor-slideout";
|
||||
@import "qor/qor-bottomsheets";
|
||||
@import "qor/qor-search";
|
||||
@import "qor/qor-inlineedit";
|
||||
261
app/views/qor/assets/stylesheets/scss/qor/datepicker.scss
Normal file
261
app/views/qor/assets/stylesheets/scss/qor/datepicker.scss
Normal file
@@ -0,0 +1,261 @@
|
||||
.datepicker-container {
|
||||
font-size: 12px;
|
||||
line-height: 30px;
|
||||
position: fixed;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 210px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
background-color: #fff;
|
||||
direction: ltr !important;
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-touch-callout: none;
|
||||
}
|
||||
|
||||
.datepicker-container:before,
|
||||
.datepicker-container:after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
content: ' ';
|
||||
border: 5px solid transparent;
|
||||
}
|
||||
|
||||
.datepicker-dropdown {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
border: 1px solid #ccc;
|
||||
-webkit-box-shadow: 0 3px 6px #ccc;
|
||||
box-shadow: 0 3px 6px #ccc;
|
||||
}
|
||||
|
||||
.datepicker-inline {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.datepicker-top-left,
|
||||
.datepicker-top-right {
|
||||
border-top-color: #39f;
|
||||
}
|
||||
|
||||
.datepicker-top-left:before,
|
||||
.datepicker-top-left:after,
|
||||
.datepicker-top-right:before,
|
||||
.datepicker-top-right:after {
|
||||
top: -5px;
|
||||
left: 10px;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.datepicker-top-left:before,
|
||||
.datepicker-top-right:before {
|
||||
border-bottom-color: #39f;
|
||||
}
|
||||
|
||||
.datepicker-top-left:after,
|
||||
.datepicker-top-right:after {
|
||||
top: -4px;
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
|
||||
.datepicker-bottom-left,
|
||||
.datepicker-bottom-right {
|
||||
border-bottom-color: #39f;
|
||||
}
|
||||
|
||||
.datepicker-bottom-left:before,
|
||||
.datepicker-bottom-left:after,
|
||||
.datepicker-bottom-right:before,
|
||||
.datepicker-bottom-right:after {
|
||||
bottom: -5px;
|
||||
left: 10px;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.datepicker-bottom-left:before,
|
||||
.datepicker-bottom-right:before {
|
||||
border-top-color: #39f;
|
||||
}
|
||||
|
||||
.datepicker-bottom-left:after,
|
||||
.datepicker-bottom-right:after {
|
||||
bottom: -4px;
|
||||
border-top-color: #fff;
|
||||
}
|
||||
|
||||
.datepicker-top-right:before,
|
||||
.datepicker-top-right:after,
|
||||
.datepicker-bottom-right:before,
|
||||
.datepicker-bottom-right:after {
|
||||
right: 10px;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.datepicker-panel > ul:before,
|
||||
.datepicker-panel > ul:after {
|
||||
display: table;
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
.datepicker-panel > ul:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.datepicker-panel > ul {
|
||||
width: 102%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.datepicker-panel > ul > li {
|
||||
float: left;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
background-color: #fff;
|
||||
color: rgba(0, 0, 0, .75);
|
||||
}
|
||||
|
||||
.datepicker-panel > ul > li:hover {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.datepicker-panel > ul > li.muted,
|
||||
.datepicker-panel > ul > li.muted:hover {
|
||||
color: rgba(0, 0, 0, .4);
|
||||
}
|
||||
|
||||
.datepicker-panel > ul > li.picked,
|
||||
.datepicker-panel > ul > li.picked:hover {
|
||||
color: #39f;
|
||||
}
|
||||
|
||||
.datepicker-panel > ul > li.disabled,
|
||||
.datepicker-panel > ul > li.disabled:hover {
|
||||
cursor: default;
|
||||
color: rgba(0, 0, 0, .1);
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.datepicker-panel > ul > li[data-view='years prev'],
|
||||
.datepicker-panel > ul > li[data-view='year prev'],
|
||||
.datepicker-panel > ul > li[data-view='month prev'],
|
||||
.datepicker-panel > ul > li[data-view='years next'],
|
||||
.datepicker-panel > ul > li[data-view='year next'],
|
||||
.datepicker-panel > ul > li[data-view='month next'],
|
||||
.datepicker-panel > ul > li[data-view='next'] {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.datepicker-panel > ul > li[data-view='years current'],
|
||||
.datepicker-panel > ul > li[data-view='year current'],
|
||||
.datepicker-panel > ul > li[data-view='month current'] {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.datepicker-panel > ul[data-view='years'] > li,
|
||||
.datepicker-panel > ul[data-view='months'] > li {
|
||||
line-height: 52.5px;
|
||||
width: 52.5px;
|
||||
height: 52.5px;
|
||||
}
|
||||
|
||||
.datepicker-panel > ul[data-view='week'] > li,
|
||||
.datepicker-panel > ul[data-view='week'] > li:hover {
|
||||
cursor: default;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.datepicker-hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Time picker */
|
||||
|
||||
.ui-timepicker-wrapper {
|
||||
overflow-y: auto;
|
||||
height: 200px;
|
||||
width: 160px;
|
||||
background: #fff;
|
||||
border: 1px solid unquote("rgba(#{$color-black}, 0.24)");
|
||||
@include shadow-2dp();
|
||||
outline: none;
|
||||
z-index: 10001;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ui-timepicker-wrapper.ui-timepicker-with-duration {
|
||||
width: 13em;
|
||||
}
|
||||
|
||||
.ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-30,
|
||||
.ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-60 {
|
||||
width: 11em;
|
||||
}
|
||||
|
||||
.ui-timepicker-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.ui-timepicker-duration {
|
||||
margin-left: 5px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.ui-timepicker-list:hover .ui-timepicker-duration {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.ui-timepicker-list li {
|
||||
padding: 8px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
color: #000;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ui-timepicker-list:hover .ui-timepicker-selected {
|
||||
background: #fff;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
li.ui-timepicker-selected,
|
||||
.ui-timepicker-list li:hover,
|
||||
.ui-timepicker-list .ui-timepicker-selected:hover {
|
||||
background: #03a9f4;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
li.ui-timepicker-selected .ui-timepicker-duration,
|
||||
.ui-timepicker-list li:hover .ui-timepicker-duration {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.ui-timepicker-list li.ui-timepicker-disabled,
|
||||
.ui-timepicker-list li.ui-timepicker-disabled:hover,
|
||||
.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
|
||||
color: #888;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.ui-timepicker-list li.ui-timepicker-disabled:hover,
|
||||
.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
|
||||
background: #f2f2f2;
|
||||
}
|
||||
491
app/views/qor/assets/stylesheets/scss/qor/qor-bottomsheets.scss
Normal file
491
app/views/qor/assets/stylesheets/scss/qor/qor-bottomsheets.scss
Normal file
@@ -0,0 +1,491 @@
|
||||
.qor-bottomsheets-open {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.qor-bottomsheets {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
left: 50%;
|
||||
z-index: $zindex-bottomsheets;
|
||||
display: none;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
@include shadow-16dp();
|
||||
|
||||
&.qor-bottomsheets__fullscreen {
|
||||
max-height: none !important;
|
||||
width: 80% !important;
|
||||
margin-left: 0 !important;
|
||||
left: 10%;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
&.is-shown {
|
||||
display: block;
|
||||
transition: height 0.3s ease;
|
||||
width: $width-bottomsheet;
|
||||
margin-left: $width-bottomsheet / 2 * -1;
|
||||
|
||||
.qor-page__header {
|
||||
width: $width-bottomsheet;
|
||||
}
|
||||
|
||||
.qor-bottomsheets__body {
|
||||
padding: 12px 24px 12px 42px;
|
||||
background-color: #fff;
|
||||
height: calc(100% - 65px);
|
||||
|
||||
&.qor-bottomsheets__mediabox,
|
||||
&.qor-bottomsheets__select-many,
|
||||
&.qor-bottomsheets__select-one {
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
&.has-hint {
|
||||
padding: 56px 0 12px;
|
||||
.qor-page__body {
|
||||
padding-left: 18px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.has-header {
|
||||
padding: 56px 0 12px;
|
||||
.qor-page__body {
|
||||
padding-left: 18px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&.has-hint {
|
||||
padding: 100px 0 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
content: '';
|
||||
background-color: rgba(0, 0, 0, 0.54);
|
||||
z-index: $zindex-bottomsheets - 10;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-slided {
|
||||
height: calc(100% - 100px);
|
||||
max-height: 600px;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.qor-bottomsheets__tab-content {
|
||||
.qor-table {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-container {
|
||||
width: 100% !important;
|
||||
.select2-selection {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-container--default .select2-selection--single .select2-selection__arrow {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.qor-table-container {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.qor-error {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
box-shadow: none;
|
||||
|
||||
& > li > label {
|
||||
padding: 8px 12px 8px 36px;
|
||||
|
||||
i {
|
||||
top: 8px;
|
||||
left: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.qor-button--new {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: -20px;
|
||||
bottom: auto;
|
||||
width: 42px;
|
||||
min-width: 42px;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
}
|
||||
|
||||
.qor-pagination-container {
|
||||
margin: 24px 0;
|
||||
|
||||
.qor-pagination {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.qor-actions {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.qor-table {
|
||||
margin: 0 0 0 35px;
|
||||
box-shadow: none;
|
||||
width: calc(100% - 35px);
|
||||
|
||||
tr {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 10px;
|
||||
|
||||
&[data-heading='ID'] {
|
||||
width: 42px;
|
||||
padding: 10px 0 10px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
td.qor-table__actions,
|
||||
thead {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.qor-bottomsheets__header {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
z-index: $zindex-bottomsheets + 1;
|
||||
background-color: #fff;
|
||||
|
||||
.qor-bottomsheets__search {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: -58px;
|
||||
background-color: #fff;
|
||||
border-radius: 2px;
|
||||
height: 48px;
|
||||
|
||||
input {
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
border: 0;
|
||||
margin-top: 8px;
|
||||
text-indent: 16px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
button {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.qor-bottomsheets__title {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 20px 0;
|
||||
min-height: 65px;
|
||||
box-sizing: border-box;
|
||||
margin-left: 54px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
||||
background-color: #fff;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
|
||||
button {
|
||||
float: right;
|
||||
margin: -4px 8px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.qor-bottomsheets__close {
|
||||
position: absolute !important;
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
}
|
||||
}
|
||||
|
||||
.qor-bottomsheets__body {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
z-index: $zindex-bottomsheets;
|
||||
|
||||
.qor-action-forms {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.qor-table--medialibrary {
|
||||
.mdl-card__supporting-text > p.qor-table--video {
|
||||
height: 162px;
|
||||
}
|
||||
|
||||
.qor-table--video {
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
content: '';
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 162px;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.qor-page__header + .qor-page__body {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.qor-page__body {
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
padding-left: 0;
|
||||
margin-left: -22px;
|
||||
|
||||
&.qor-page__new {
|
||||
margin-right: -24px;
|
||||
padding-right: 54px;
|
||||
margin-left: -42px;
|
||||
padding-left: 55px;
|
||||
}
|
||||
|
||||
.qor-form-container {
|
||||
padding: 0;
|
||||
margin: 20px 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.qor-form-container {
|
||||
margin-top: 0;
|
||||
|
||||
.qor-fieldset {
|
||||
padding: 4px 8px;
|
||||
box-shadow: none;
|
||||
border: 1px solid rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.qor-form {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.qor-button--new {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.qor-action-forms {
|
||||
display: block !important;
|
||||
margin-top: 0;
|
||||
|
||||
.qor-form__actions {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.qor-bottomsheets__mediabox {
|
||||
max-height: 700px !important;
|
||||
|
||||
.mdl-card__supporting-text,
|
||||
.qor-table--medialibrary-item {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
.qor-bottomsheets__body {
|
||||
table:not(.qor-table--medialibrary) {
|
||||
img {
|
||||
height: 48px !important;
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
height: 60px;
|
||||
|
||||
.qor-table__content {
|
||||
overflow: inherit;
|
||||
max-height: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.qor-table--medialibrary {
|
||||
margin-left: -19px;
|
||||
width: calc(100% + 10px);
|
||||
border-spacing: 0;
|
||||
|
||||
img {
|
||||
max-height: 160px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.mdl-card__supporting-text {
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
&.qor-table--files {
|
||||
top: 0;
|
||||
|
||||
> p {
|
||||
&[data-heading*='File'],
|
||||
&[data-heading*='Image'],
|
||||
&[data-heading*='file'],
|
||||
&[data-heading*='image'] {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&[data-heading*='Name'],
|
||||
&[data-heading*='Title'],
|
||||
&[data-heading*='name'],
|
||||
&[data-heading*='title'] {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> p {
|
||||
margin-bottom: 0;
|
||||
color: #fff;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
|
||||
&.qor-table--video {
|
||||
iframe,
|
||||
video {
|
||||
height: 163px;
|
||||
}
|
||||
|
||||
& + p {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.qor-table--video,
|
||||
&[data-heading*='File'],
|
||||
&[data-heading*='Image'],
|
||||
&[data-heading*='file'],
|
||||
&[data-heading*='image'] {
|
||||
padding: 0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.qor-table--medialibrary-file {
|
||||
height: 100%;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
height: 162px;
|
||||
content: '';
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
thead {
|
||||
display: none;
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
width: 33.33%;
|
||||
|
||||
&:nth-child(2n) {
|
||||
.qor-table--medialibrary-item {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.qor-table--medialibrary-item {
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
margin: 0 1px 1px 0;
|
||||
border: 2px solid #fff;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
|
||||
.qor-table--medialibrary-item {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.qor-select__select-icon {
|
||||
left: 10px;
|
||||
top: 20px;
|
||||
z-index: 2;
|
||||
|
||||
i {
|
||||
background-color: #fff;
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mdl-card {
|
||||
width: calc(100% - 1px);
|
||||
min-height: 162px;
|
||||
max-height: 162px;
|
||||
|
||||
.qor-table__actions {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mdl-shadow--2dp {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
|
||||
.qor-bottomsheets__mediabox .qor-bottomsheets__body .qor-table--medialibrary tbody tr{
|
||||
width: 32%;
|
||||
}
|
||||
.qor-bottomsheets__mediabox .qor-bottomsheets__body .qor-table--medialibrary tbody tr:nth-child(2n) .qor-table--medialibrary-item{
|
||||
width: 194px;
|
||||
}
|
||||
|
||||
.qor-bottomsheets__mediabox .qor-bottomsheets__body .qor-table--medialibrary .mdl-card{
|
||||
width: 194px;
|
||||
}
|
||||
}
|
||||
159
app/views/qor/assets/stylesheets/scss/qor/qor-chooser.scss
Normal file
159
app/views/qor/assets/stylesheets/scss/qor/qor-chooser.scss
Normal file
@@ -0,0 +1,159 @@
|
||||
/* reset */
|
||||
|
||||
.select2-container {
|
||||
min-width: 100%;
|
||||
.select2-selection--single,
|
||||
.select2-selection--multiple {
|
||||
height: 32px;
|
||||
min-height: 30px;
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.qor-page__header {
|
||||
.select2-container:not(.qor-advanced-filter .select2-container) {
|
||||
width: 100% !important;
|
||||
max-width: 260px;
|
||||
.select2-dropdown--below {
|
||||
max-width: 260px;
|
||||
width: auto !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[chooser-selected='true'][data-allow-clear='true'] {
|
||||
& + .select2-container--default {
|
||||
.select2-selection--single {
|
||||
border-color: unquote('rgb(#{$color-primary})');
|
||||
.select2-selection__rendered {
|
||||
padding-right: 50px;
|
||||
}
|
||||
.select2-selection__arrow {
|
||||
right: 29px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select2-container--default {
|
||||
&.select2-container--focus {
|
||||
.select2-selection--multiple {
|
||||
border-radius: 2px;
|
||||
border: 2px solid #2196f3;
|
||||
}
|
||||
}
|
||||
&.select2-container--open {
|
||||
.select2-selection--single .select2-selection__arrow {
|
||||
b {
|
||||
border-width: 0 4px 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.select2-selection--multiple {
|
||||
border-radius: 2px;
|
||||
border: 2px solid unquote('rgba(#{$color-black}, 0.12)');
|
||||
height: auto;
|
||||
margin-top: 0;
|
||||
line-height: 1;
|
||||
.select2-selection__clear {
|
||||
font-size: 20px;
|
||||
padding: 0 8px;
|
||||
margin: 0;
|
||||
line-height: 28px;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
}
|
||||
.select2-selection__choice {
|
||||
padding: 0 6px 0px 2px;
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
background-color: unquote('rgba(#{$color-black}, 0.08)');
|
||||
background-image: none;
|
||||
border-color: unquote('rgba(#{$color-black}, 0.12)');
|
||||
border-radius: 2px;
|
||||
box-shadow: none;
|
||||
margin-top: 3px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.select2-selection__choice__remove {
|
||||
line-height: 1;
|
||||
float: right;
|
||||
margin: 4px 0 0 8px;
|
||||
}
|
||||
}
|
||||
.select2-selection--single {
|
||||
border-radius: 2px;
|
||||
border: 2px solid unquote('rgba(#{$color-black}, 0.12)');
|
||||
.select2-selection__placeholder {
|
||||
color: unquote('rgba(#{$color-black}, 0.54)');
|
||||
}
|
||||
.select2-selection__rendered {
|
||||
padding-right: 30px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.select2-selection__arrow {
|
||||
height: 30px;
|
||||
width: 24px;
|
||||
top: 1px;
|
||||
b {
|
||||
border-width: 4px 4px 0;
|
||||
}
|
||||
}
|
||||
.select2-selection__clear {
|
||||
font-size: 20px;
|
||||
padding: 0 8px;
|
||||
margin-right: -50px;
|
||||
margin-left: 8px;
|
||||
background-color: unquote('rgb(#{$color-primary})');
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.select2-results__option--highlighted[aria-selected] {
|
||||
background-color: unquote('rgb(#{$color-primary})');
|
||||
}
|
||||
.select2-search--inline {
|
||||
float: left !important;
|
||||
.select2-search__field {
|
||||
width: 90% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select2-dropdown {
|
||||
border: 0;
|
||||
@include shadow-2dp();
|
||||
.select2-results__option {
|
||||
padding: 0 16px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
.select2-results__option-withimage{
|
||||
padding: 8px 0;
|
||||
}
|
||||
img{
|
||||
max-width: 80px;
|
||||
max-height: 60px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select2-container--disabled {
|
||||
.select2-selection__clear,
|
||||
.select2-selection__arrow {
|
||||
&:hover {
|
||||
background-color: transparent !important;
|
||||
b {
|
||||
border-color: #888 transparent transparent !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.select2-selection--single {
|
||||
border-color: unquote('rgba(#{$color-black}, 0.12)');
|
||||
.select2-selection__rendered {
|
||||
color: unquote('rgba(#{$color-black}, 0.24)');
|
||||
}
|
||||
}
|
||||
}
|
||||
101
app/views/qor/assets/stylesheets/scss/qor/qor-cropper.scss
Normal file
101
app/views/qor/assets/stylesheets/scss/qor/qor-cropper.scss
Normal file
@@ -0,0 +1,101 @@
|
||||
.qor-cropper__canvas {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 0 !important;
|
||||
overflow: hidden;
|
||||
line-height: 150px;
|
||||
text-align: center;
|
||||
img {
|
||||
display: inline-block !important;
|
||||
}
|
||||
}
|
||||
|
||||
.qor-cropper__toggle {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
background-color: #888;
|
||||
background-color: unquote('rgba(#{$color-black}, 0.75)');
|
||||
opacity: 0;
|
||||
text-align: center;
|
||||
line-height: 1;
|
||||
.qor-cropper__toggle--delete {
|
||||
z-index: 3;
|
||||
width: 32px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
.qor-cropper__toggle--crop,
|
||||
.qor-cropper__toggle--download {
|
||||
left: 0;
|
||||
top: 50%;
|
||||
margin-top: -12px;
|
||||
z-index: 2;
|
||||
}
|
||||
> div {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
i {
|
||||
color: unquote('rgb(#{$color-primary})');
|
||||
}
|
||||
}
|
||||
i {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.qor-cropper__wrapper {
|
||||
margin: -16px;
|
||||
> img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.qor-cropper__options {
|
||||
display: none;
|
||||
margin-top: 32px;
|
||||
@include clearfix();
|
||||
> p {
|
||||
margin-right: 16px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
> ul {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
overflow: hidden;
|
||||
> li {
|
||||
float: left;
|
||||
margin-right: 16px;
|
||||
> label {
|
||||
> input {
|
||||
margin-right: 2px;
|
||||
}
|
||||
> span {
|
||||
display: inline-block;
|
||||
&:first-letter {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
> small {
|
||||
margin-left: 4px;
|
||||
color: unquote('rgba(#{$color-black}, 0.26)');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
107
app/views/qor/assets/stylesheets/scss/qor/qor-datepicker.scss
Normal file
107
app/views/qor/assets/stylesheets/scss/qor/qor-datepicker.scss
Normal file
@@ -0,0 +1,107 @@
|
||||
.qor-datepicker {
|
||||
.mdl-card {
|
||||
width: 312px !important;
|
||||
}
|
||||
.mdl-card__title {
|
||||
display: none;
|
||||
}
|
||||
.mdl-card__supporting-text {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.qor-datepicker__picked {
|
||||
padding: 16px 24px;
|
||||
color: #fff;
|
||||
background-color: unquote('rgb(#{$color-primary})');
|
||||
}
|
||||
|
||||
.qor-datepicker__picked-year {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.qor-datepicker__picked-date {
|
||||
font-size: 34px;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.qor-datepicker__embedded {
|
||||
padding: 16px;
|
||||
// Reset Datepicker CSS
|
||||
.datepicker-container {
|
||||
float: none;
|
||||
position: static;
|
||||
width: auto;
|
||||
}
|
||||
.datepicker-panel > ul > li[data-view='month current'],
|
||||
.datepicker-panel > ul > li[data-view='years current'],
|
||||
.datepicker-panel > ul > li[data-view='year current'] {
|
||||
width: 200px;
|
||||
}
|
||||
.datepicker-panel {
|
||||
width: 280px;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.datepicker-panel li {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 20px;
|
||||
line-height: 40px;
|
||||
}
|
||||
.datepicker-panel .col-1 {
|
||||
width: 40px;
|
||||
}
|
||||
.datepicker-panel .col-2 {
|
||||
width: 80px;
|
||||
}
|
||||
.datepicker-panel .col-3 {
|
||||
width: 120px;
|
||||
}
|
||||
.datepicker-panel .col-4 {
|
||||
width: 160px;
|
||||
}
|
||||
.datepicker-panel .col-5 {
|
||||
width: 200px;
|
||||
}
|
||||
.datepicker-panel .col-6 {
|
||||
width: 240px;
|
||||
}
|
||||
.datepicker-panel .col-7 {
|
||||
width: 280px;
|
||||
}
|
||||
.datepicker-panel .picked,
|
||||
.datepicker-panel .picked:hover {
|
||||
background-color: unquote('rgb(#{$color-primary})');
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.qor-field__datetimepicker,
|
||||
.qor-field__datepicker {
|
||||
position: relative;
|
||||
.qor-datetimepicker__input:disabled,
|
||||
.qor-datepicker__input:disabled {
|
||||
& + div {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.qor-action__timepicker,
|
||||
.qor-action__datepicker {
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
}
|
||||
.qor-action__timepicker {
|
||||
right: 0;
|
||||
}
|
||||
.qor-action__datepicker {
|
||||
right: 40px;
|
||||
}
|
||||
&[data-picker-type='date'] {
|
||||
.qor-action__datepicker {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
60
app/views/qor/assets/stylesheets/scss/qor/qor-filter.scss
Normal file
60
app/views/qor/assets/stylesheets/scss/qor/qor-filter.scss
Normal file
@@ -0,0 +1,60 @@
|
||||
// Filter
|
||||
// --------------------------------------------------
|
||||
.qor-actions__filter-time {
|
||||
position: relative;
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
.qor-field__datetimepicker .qor-action__datepicker,
|
||||
.qor-field__datetimepicker .qor-action__timepicker {
|
||||
bottom: auto;
|
||||
top: 12px;
|
||||
}
|
||||
input {
|
||||
font-size: 14px;
|
||||
}
|
||||
.qor-filter__block {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 0;
|
||||
min-width: 240px;
|
||||
background-color: #fff;
|
||||
padding: 12px;
|
||||
z-index: 2;
|
||||
@include shadow-2dp();
|
||||
> .qor-field__label {
|
||||
margin-top: 16px;
|
||||
padding-left: 16px;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
}
|
||||
.qor-field__datetimepicker {
|
||||
padding-left: 16px;
|
||||
margin-top: -10px;
|
||||
}
|
||||
.qor-filter__block-buttons {
|
||||
border-bottom: 1px solid unquote("rgba(#{$color-black}, 0.24)");
|
||||
.qor-field__label {
|
||||
padding-left: 16px;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
.qor-filter__block-events {
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid unquote("rgba(#{$color-black}, 0.24)");
|
||||
}
|
||||
button {
|
||||
font-size: 12px;
|
||||
margin-bottom: 6px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
&.is-selected {
|
||||
background-color: rgba(158, 158, 158, .2);
|
||||
}
|
||||
}
|
||||
}
|
||||
.qor-filter__button-search {
|
||||
float: right;
|
||||
margin: 12px 0;
|
||||
}
|
||||
}
|
||||
28
app/views/qor/assets/stylesheets/scss/qor/qor-fixer.scss
Normal file
28
app/views/qor/assets/stylesheets/scss/qor/qor-fixer.scss
Normal file
@@ -0,0 +1,28 @@
|
||||
// Fixed table header
|
||||
|
||||
.qor-table {
|
||||
thead{
|
||||
position: static;
|
||||
}
|
||||
.is-fixed {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: $zindex-fixer;
|
||||
height: 48px;
|
||||
padding-bottom: 0;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 4px 8px -1px unquote("rgba(#{$color-black}, 0.24)");
|
||||
th{
|
||||
height: 48px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
}
|
||||
|
||||
.is-hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.qor-table-fixed-header > thead {
|
||||
position: fixed;
|
||||
}
|
||||
144
app/views/qor/assets/stylesheets/scss/qor/qor-inlineedit.scss
Normal file
144
app/views/qor/assets/stylesheets/scss/qor/qor-inlineedit.scss
Normal file
@@ -0,0 +1,144 @@
|
||||
[data-toggle="qor.inlineEdit"] {
|
||||
.qor-field__show {
|
||||
min-height: 24px;
|
||||
max-width: 95%;
|
||||
|
||||
&.qor-redactor__show {
|
||||
background-color: #fff;
|
||||
padding: 24px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,.1);
|
||||
max-width: 100%;
|
||||
|
||||
.qor-inlineedit__edit {
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.qor-fieldset {
|
||||
.qor-field.qor-inlineedit__field {
|
||||
background-color: #f5f5f5;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.qor-section-columns-2 {
|
||||
.qor-field.qor-inlineedit__field:nth-child(odd) {
|
||||
margin-right: 24px;
|
||||
width: calc(50% - 24px);
|
||||
padding-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.qor-section-columns-3 {
|
||||
.qor-field.qor-inlineedit__field {
|
||||
margin-right: 12px;
|
||||
width: calc(33.33% - 12px);
|
||||
padding-right: 8px;
|
||||
|
||||
&:nth-child(3n) {
|
||||
margin-right: 0;
|
||||
width: 33.33%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.qor-inlineedit__field.qor-field {
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
margin-top: 8px;
|
||||
padding: 16px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
|
||||
margin-bottom: 16px;
|
||||
|
||||
.redactor-box {
|
||||
box-shadow: none;
|
||||
border: 1px solid rgba(0, 0, 0, .1);
|
||||
|
||||
.redactor-toolbar {
|
||||
background-color: rgba(0, 0, 0, .02);
|
||||
}
|
||||
}
|
||||
|
||||
.qor-field__show {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.qor-field__edit {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.mdl-textfield {
|
||||
padding: 30px 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.qor-inlineedit__edit {
|
||||
width: 24px;
|
||||
min-width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
position: absolute;
|
||||
bottom: auto !important;
|
||||
margin-left: 16px;
|
||||
|
||||
i {
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.qor-inlineedit__buttons {
|
||||
margin-top: -10px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.qor-field__selectmany-show {
|
||||
> span {
|
||||
display: inline-block;
|
||||
display: inline-block;
|
||||
padding: 4px 8px;
|
||||
margin: 0 6px 6px 0;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
vertical-align: top;
|
||||
background-color: #f8f9fa;
|
||||
border: 1px solid #e0e1e2;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
[data-toggle="qor.variations"] {
|
||||
.qor-product__filter,
|
||||
.qor-product__property {
|
||||
display: none;
|
||||
}
|
||||
|
||||
table {
|
||||
td:first-child,
|
||||
th:first-child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.qor-product__action {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-toggle="qor.mediabox"] {
|
||||
.qor-cropper__toggle,
|
||||
[data-mediabox-url] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.qor-field__edit {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
105
app/views/qor/assets/stylesheets/scss/qor/qor-modal.scss
Normal file
105
app/views/qor/assets/stylesheets/scss/qor/qor-modal.scss
Normal file
@@ -0,0 +1,105 @@
|
||||
// Container that the modal scrolls within
|
||||
|
||||
.qor-modal {
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: $zindex-modal;
|
||||
background-color: unquote('rgba(#{$color-black}, 0.26)');
|
||||
outline: 0;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
.mdl-card {
|
||||
display: block;
|
||||
width: auto;
|
||||
min-height: 0;
|
||||
margin: 16px;
|
||||
|
||||
.mdl-card__supporting-text {
|
||||
width: auto;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.mdl-card__actions {
|
||||
padding: 16px;
|
||||
@include clearfix();
|
||||
|
||||
> .mdl-button {
|
||||
float: right;
|
||||
margin-left: 16px;
|
||||
min-width: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $layout-screen-size-threshold) {
|
||||
.mdl-card {
|
||||
max-width: 640px;
|
||||
margin: 128px auto;
|
||||
}
|
||||
}
|
||||
|
||||
&.fade .mdl-card {
|
||||
transform: translate(0, -25%);
|
||||
transition: transform 0.3s ease-out;
|
||||
}
|
||||
|
||||
&.in .mdl-card {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
.qor-modal-loading {
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
text-align: center;
|
||||
padding-top: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.qor-modal-mini {
|
||||
.mdl-card {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
.qor-modal-open {
|
||||
// Kill the scroll on the body
|
||||
overflow: hidden;
|
||||
|
||||
.qor-modal {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.qor-dialog {
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: unquote('rgba(#{$color-black}, 0.54)');
|
||||
.qor-dialog-content {
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
top: 100px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
background-color: unquote('rgb(#{$color-white})');
|
||||
padding: 24px 48px;
|
||||
@include shadow-4dp();
|
||||
border-radius: 2px;
|
||||
.mdl-textfield {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
258
app/views/qor/assets/stylesheets/scss/qor/qor-redactor.scss
Normal file
258
app/views/qor/assets/stylesheets/scss/qor/qor-redactor.scss
Normal file
@@ -0,0 +1,258 @@
|
||||
/*Reset for redactor*/
|
||||
|
||||
.redactor-box {
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
margin-top: 16px;
|
||||
position: static;
|
||||
}
|
||||
|
||||
.redactor-component[data-redactor-type="table"] td[data-active],
|
||||
.redactor-component[data-redactor-type="table"] th[data-active] {
|
||||
opacity: 0.5;
|
||||
box-shadow: 0 0 10px rgb(14, 101, 235);
|
||||
}
|
||||
|
||||
.redactor-component-table-line {
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background-color: rgba(44, 165, 242, 0.5);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.redactor-styles {
|
||||
position: static;
|
||||
font-family: 'Roboto', Helvetica, Arial, sans-serif !important;
|
||||
border: 0;
|
||||
min-height: 200px;
|
||||
|
||||
table {
|
||||
td,
|
||||
th {
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: normal;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
tr {
|
||||
td:last-child,
|
||||
th:last-child {
|
||||
cursor: default !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
iframe.qor-video-container {
|
||||
height: 380px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
pre {
|
||||
background-color: transparent;
|
||||
font-family: monospace, Helvetica Neue, Helvetica, Arial, "sans-serif";
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
font-style: inherit;
|
||||
color: inherit;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
figure,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p {
|
||||
font-family: 'Roboto', Helvetica, Arial, sans-serif !important;
|
||||
}
|
||||
|
||||
address,
|
||||
blockquote,
|
||||
dl,
|
||||
figure,
|
||||
hr,
|
||||
p,
|
||||
pre,
|
||||
table {
|
||||
margin: inherit;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
// for text alignment
|
||||
.rd-text-justify {
|
||||
text-align: justify;
|
||||
}
|
||||
.rd-text-right {
|
||||
text-align: right;
|
||||
}
|
||||
.rd-text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
li {
|
||||
&.rd-text-justify {
|
||||
text-align: justify !important;
|
||||
}
|
||||
|
||||
&.rd-text-left {
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
&.rd-text-right {
|
||||
text-align: right !important;
|
||||
}
|
||||
|
||||
&.rd-text-center {
|
||||
text-align: center !important;
|
||||
}
|
||||
}
|
||||
|
||||
// redactor display mode plugin style
|
||||
#redactor-image-displaymode {
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
top: 50%;
|
||||
left: 55%;
|
||||
margin-top: -11px;
|
||||
line-height: 1;
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
border-radius: 3px;
|
||||
color: rgb(255, 255, 255);
|
||||
font-size: 12px;
|
||||
padding: 7px 10px;
|
||||
cursor: pointer;
|
||||
margin-left: -120px;
|
||||
& + #redactor-image-editter {
|
||||
left: 57%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.redactor-styles h6,
|
||||
.redactor-dropdown-format .redactor-dropdown-item-h6 {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.redactor-in {
|
||||
blockquote:empty,
|
||||
h1:empty,
|
||||
h2:empty,
|
||||
h3:empty,
|
||||
h4:empty,
|
||||
h5:empty,
|
||||
h6:empty,
|
||||
p:empty {
|
||||
min-height: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.redactor-toolbar {
|
||||
box-shadow: none;
|
||||
li a {
|
||||
padding: 12px;
|
||||
}
|
||||
i {
|
||||
font-size: 18px;
|
||||
&.html:after {
|
||||
content: 'code';
|
||||
}
|
||||
&.link:after {
|
||||
content: 'insert_link';
|
||||
}
|
||||
&.image:after {
|
||||
content: 'image';
|
||||
}
|
||||
&.format:after {
|
||||
content: 'text_fields';
|
||||
}
|
||||
&.bold:after {
|
||||
content: 'format_bold';
|
||||
}
|
||||
&.file:after {
|
||||
content: 'attach_file';
|
||||
}
|
||||
&.italic:after {
|
||||
content: 'format_italic';
|
||||
}
|
||||
&.deleted:after {
|
||||
content: 'strikethrough_s';
|
||||
}
|
||||
&.lists:after {
|
||||
content: 'format_line_spacing';
|
||||
}
|
||||
&.table:after {
|
||||
content: 'grid_on';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.redactor-link-tooltip {
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
#redactor-modal-box {
|
||||
background-color: unquote('rgba(#{$color-black}, 0.75)');
|
||||
}
|
||||
|
||||
#redactor-modal {
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14),
|
||||
0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2);
|
||||
padding: 24px;
|
||||
font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
#redactor-modal-header {
|
||||
background: none;
|
||||
padding: 0;
|
||||
margin-bottom: 36px;
|
||||
font-weight: 300;
|
||||
border-radius: 0;
|
||||
font-size: 30px;
|
||||
border: 0;
|
||||
}
|
||||
input[type='text'],
|
||||
input[type='password'],
|
||||
input[type='email'],
|
||||
input[type='url'],
|
||||
select,
|
||||
textarea {
|
||||
border-radius: 0;
|
||||
font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
#redactor-modal-body {
|
||||
padding: 0;
|
||||
}
|
||||
button {
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
padding: 0 16px;
|
||||
font-size: 14px;
|
||||
border-radius: 2px;
|
||||
border: 0;
|
||||
background: none;
|
||||
&:hover {
|
||||
background-color: rgba(158, 158, 158, 0.2);
|
||||
}
|
||||
&#redactor-modal-button-action {
|
||||
background-color: unquote('rgb(#{$color-primary})');
|
||||
&:hover {
|
||||
background-color: unquote('rgb(#{$color-primary})');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
184
app/views/qor/assets/stylesheets/scss/qor/qor-search.scss
Normal file
184
app/views/qor/assets/stylesheets/scss/qor/qor-search.scss
Normal file
@@ -0,0 +1,184 @@
|
||||
.qor-global-search--container {
|
||||
.qor-table {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mdl-spinner {
|
||||
margin: 48px auto;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 901;
|
||||
}
|
||||
|
||||
.qor-page__header-tabbar {
|
||||
.mdl-layout__tab-bar {
|
||||
width: calc(100% - 260px);
|
||||
float: left;
|
||||
li {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.qor-global-search {
|
||||
float: right;
|
||||
z-index: 1;
|
||||
margin-right: 32px;
|
||||
color: unquote("rgb(#{$color-white})");
|
||||
}
|
||||
.mdl-button.mdl-button--colored {
|
||||
color: unquote("rgb(#{$color-white})");
|
||||
}
|
||||
}
|
||||
|
||||
[qor-icon-name] .qor-global-search--show {
|
||||
padding: 16px 40px;
|
||||
margin-top: -8px;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid unquote("rgba(#{$color-black}, 0.12)");
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: unquote("rgba(#{$color-black}, 0.12)");
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.active,
|
||||
&.active:hover,
|
||||
&.active:focus {
|
||||
color: unquote("rgb(#{$color-primary})");
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
// advanced search
|
||||
.qor-bottomsheets {
|
||||
.qor-advanced-filter {
|
||||
.qor-advanced-filter__save,
|
||||
.qor-advanced-filter__savedfilter {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.qor-advanced-filter {
|
||||
position: relative;
|
||||
float: right !important;
|
||||
margin-right: 16px !important;
|
||||
h3 {
|
||||
margin-top: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
button[type="submit"] {
|
||||
margin-top: 32px;
|
||||
float: right;
|
||||
margin-left: 24px;
|
||||
}
|
||||
.qor-advanced-filter__dropdown {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 420px;
|
||||
background-color: #fff;
|
||||
padding: 24px;
|
||||
height: 550px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
@include shadow-2dp();
|
||||
}
|
||||
.qor-advanced-filter__btns {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
.qor-advanced-filter__close {
|
||||
float: right;
|
||||
margin-top: -4px;
|
||||
}
|
||||
advanced-filter-group {
|
||||
margin: 12px 0;
|
||||
clear: both;
|
||||
}
|
||||
[type="filter-datetime"] {
|
||||
advanced-filter-group {
|
||||
width: 45%;
|
||||
float: left;
|
||||
clear: none;
|
||||
margin: 0;
|
||||
.qor-field__datetimepicker .qor-action__datepicker {
|
||||
right: 32px;
|
||||
}
|
||||
.qor-field__datetimepicker .qor-action__datepicker,
|
||||
.qor-field__datetimepicker .qor-action__timepicker {
|
||||
bottom: auto;
|
||||
top: 12px;
|
||||
}
|
||||
& + span {
|
||||
width: 10%;
|
||||
float: left;
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
padding-top: 19px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.qor-advanced-filter__save {
|
||||
float: left;
|
||||
margin-top: 32px;
|
||||
}
|
||||
.qor-field__flexbox {
|
||||
display: flex;
|
||||
}
|
||||
[type="filter-string"],
|
||||
[type="filter-number"] {
|
||||
.qor-field__edit {
|
||||
flex: 1;
|
||||
.mdl-textfield {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.qor-selector {
|
||||
margin-right: 1%;
|
||||
margin-top: 15px;
|
||||
min-width: 100px;
|
||||
}
|
||||
}
|
||||
.qor-advanced-filter__savedfilter {
|
||||
> button {
|
||||
float: right;
|
||||
margin-top: -48px;
|
||||
margin-right: 40px;
|
||||
font-size: 11px;
|
||||
}
|
||||
ul {
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
padding: 12px 24px;
|
||||
li {
|
||||
margin: 8px 0;
|
||||
.qor-advanced-filter__delete {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
min-width: 24px;
|
||||
line-height: 24px;
|
||||
.material-icons {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.qor-advanced-filter__delete {
|
||||
display: inline-block !important;
|
||||
}
|
||||
}
|
||||
> a,
|
||||
> button {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
131
app/views/qor/assets/stylesheets/scss/qor/qor-selector.scss
Normal file
131
app/views/qor/assets/stylesheets/scss/qor/qor-selector.scss
Normal file
@@ -0,0 +1,131 @@
|
||||
// Selector
|
||||
// --------------------------------------------------
|
||||
.qor-selector {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
&.bottom>.qor-selector-menu {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
&.open>.qor-selector-menu {
|
||||
display: block;
|
||||
}
|
||||
&.right-aligned>.qor-selector-menu {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
&.hover {
|
||||
.qor-selector-toggle {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
color: unquote("rgba(#{$color-black}, 0.87)");
|
||||
>.material-icons {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
}
|
||||
&.active {
|
||||
border: 0;
|
||||
}
|
||||
&:hover {
|
||||
background-color: #fff;
|
||||
border: 0;
|
||||
@include shadow-2dp();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.qor-selector-toggle {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 28px;
|
||||
padding-left: 8px;
|
||||
font-size: 14px;
|
||||
line-height: 28px;
|
||||
color: unquote("rgba(#{$color-black}, 0.54)");
|
||||
background-color: #fff;
|
||||
border: 2px solid unquote("rgba(#{$color-black}, 0.12)");
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
color: unquote("rgba(#{$color-black}, 0.54)");
|
||||
}
|
||||
&.active {
|
||||
padding-right: 0;
|
||||
color: unquote("rgba(#{$color-black}, 0.87)");
|
||||
border-color: unquote("rgb(#{$color-primary})");
|
||||
}
|
||||
>.material-icons {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
font-size: 16px;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
}
|
||||
>.qor-selector-clear {
|
||||
display: none;
|
||||
}
|
||||
&.clearable {
|
||||
>.qor-selector-clear {
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
padding-left: 2px;
|
||||
background-color: unquote("rgb(#{$color-primary})");
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.qor-selector-menu {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
display: none;
|
||||
min-width: 128px;
|
||||
max-height: 480px;
|
||||
padding: 8px 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
|
||||
overflow: auto;
|
||||
>li {
|
||||
display: block;
|
||||
height: 48px;
|
||||
padding: 0 16px;
|
||||
color: unquote("rgba(#{$color-black}, 0.87)");
|
||||
font-weight: normal;
|
||||
line-height: 48px;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: #eee;
|
||||
}
|
||||
}
|
||||
>.selected {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: #eee;
|
||||
}
|
||||
}
|
||||
>.disabled {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: unquote("rgba(#{$color-black}, 0.26)");
|
||||
background-color: transparent;
|
||||
cursor: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
184
app/views/qor/assets/stylesheets/scss/qor/qor-slideout.scss
Normal file
184
app/views/qor/assets/stylesheets/scss/qor/qor-slideout.scss
Normal file
@@ -0,0 +1,184 @@
|
||||
// Slideout
|
||||
// --------------------------------------------------
|
||||
// Class for body element to prevent scroll
|
||||
.qor-slideout-open {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.qor-slideout {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: $zindex-slideout;
|
||||
display: none;
|
||||
background-color: #f5f5f5;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
@include shadow-16dp();
|
||||
.qor-form-container {
|
||||
background-color: transparent;
|
||||
}
|
||||
.qor-fieldset {
|
||||
background-color: #fff;
|
||||
}
|
||||
figure {
|
||||
margin: 0;
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
&.is-shown {
|
||||
display: block;
|
||||
width: 0;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
&.is-slided {
|
||||
width: 100%;
|
||||
@media (min-width: $layout-screen-size-threshold) {
|
||||
width: 50%;
|
||||
&.qor-slideout-mini {
|
||||
width: 480px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.qor-slideout__fullscreen {
|
||||
width: 100% !important;
|
||||
}
|
||||
.qor-error {
|
||||
margin: 24px 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
.qor-action-bulk-edit,
|
||||
.qor-actions__filter-time {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.qor-slideout__header {
|
||||
position: fixed;
|
||||
width: inherit;
|
||||
box-sizing: border-box;
|
||||
height: 64px;
|
||||
padding: 0 24px;
|
||||
background-color: unquote('rgb(#{$color-primary})');
|
||||
z-index: 9999;
|
||||
.qor-slideout__header-link {
|
||||
position: absolute;
|
||||
right: 50px;
|
||||
top: 16px;
|
||||
a {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
&.qor-slideout__opennew {
|
||||
i {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
i {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.qor-slideout__title {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font-size: 24px;
|
||||
line-height: 64px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.qor-slideout__close {
|
||||
position: absolute !important;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.qor-slideout__body {
|
||||
padding: 0 24px;
|
||||
margin-top: 64px;
|
||||
height: calc(100% - 64px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
.qor-action-alert {
|
||||
margin: 56px 0 0;
|
||||
}
|
||||
.qor-action-bulk-buttons {
|
||||
display: none !important;
|
||||
}
|
||||
.qor-action-forms {
|
||||
display: block !important;
|
||||
margin-top: 0;
|
||||
.qor-form__actions {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
.qor-page__header {
|
||||
position: relative;
|
||||
top: inherit;
|
||||
width: calc(100% + 48px);
|
||||
+ .qor-page__body {
|
||||
padding-top: 0;
|
||||
}
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.qor-slideout .qor-page__body .qor-form-container {
|
||||
padding-bottom: 32px;
|
||||
margin: 20px 0;
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.qor-body__loading {
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
left: 50%;
|
||||
width: 100px;
|
||||
margin-left: -50px;
|
||||
padding: 30px 0;
|
||||
border-radius: 2px;
|
||||
z-index: 9999;
|
||||
background-color: unquote('rgba(#{$color-black}, 0.72)');
|
||||
> div {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
// actoins
|
||||
|
||||
.qor-slideout__body {
|
||||
.qor-page__header {
|
||||
box-shadow: none;
|
||||
background: transparent;
|
||||
height: auto;
|
||||
min-height: 0;
|
||||
padding-top: 0;
|
||||
margin: 0 -24px;
|
||||
.mdl-button {
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
margin-right: 0;
|
||||
margin-left: 24px;
|
||||
}
|
||||
.qor-action-forms {
|
||||
margin-top: 8px;
|
||||
text-align: right;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.qor-slideout__body .qor-page__header + .qor-page__body {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
28
app/views/qor/assets/stylesheets/vendors.css
Normal file
28
app/views/qor/assets/stylesheets/vendors.css
Normal file
File diff suppressed because one or more lines are too long
9
app/views/qor/assets/stylesheets/vendors/cropper.min.css
vendored
Normal file
9
app/views/qor/assets/stylesheets/vendors/cropper.min.css
vendored
Normal file
@@ -0,0 +1,9 @@
|
||||
/*!
|
||||
* Cropper v3.1.3
|
||||
* https://github.com/fengyuanchen/cropper
|
||||
*
|
||||
* Copyright (c) 2014-2017 Chen Fengyuan
|
||||
* Released under the MIT license
|
||||
*
|
||||
* Date: 2017-10-21T10:03:37.133Z
|
||||
*/.cropper-container{direction:ltr;font-size:0;line-height:0;position:relative;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cropper-container img{display:block;height:100%;image-orientation:0deg;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box{bottom:0;left:0;position:absolute;right:0;top:0}.cropper-canvas,.cropper-wrap-box{overflow:hidden}.cropper-drag-box{background-color:#fff;opacity:0}.cropper-modal{background-color:#000;opacity:.5}.cropper-view-box{display:block;height:100%;outline-color:rgba(51,153,255,.75);outline:1px solid #39f;overflow:hidden;width:100%}.cropper-dashed{border:0 dashed #eee;display:block;opacity:.5;position:absolute}.cropper-dashed.dashed-h{border-bottom-width:1px;border-top-width:1px;height:33.33333%;left:0;top:33.33333%;width:100%}.cropper-dashed.dashed-v{border-left-width:1px;border-right-width:1px;height:100%;left:33.33333%;top:0;width:33.33333%}.cropper-center{display:block;height:0;left:50%;opacity:.75;position:absolute;top:50%;width:0}.cropper-center:after,.cropper-center:before{background-color:#eee;content:" ";display:block;position:absolute}.cropper-center:before{height:1px;left:-3px;top:0;width:7px}.cropper-center:after{height:7px;left:0;top:-3px;width:1px}.cropper-face,.cropper-line,.cropper-point{display:block;height:100%;opacity:.1;position:absolute;width:100%}.cropper-face{background-color:#fff;left:0;top:0}.cropper-line{background-color:#39f}.cropper-line.line-e{cursor:e-resize;right:-3px;top:0;width:5px}.cropper-line.line-n{cursor:n-resize;height:5px;left:0;top:-3px}.cropper-line.line-w{cursor:w-resize;left:-3px;top:0;width:5px}.cropper-line.line-s{bottom:-3px;cursor:s-resize;height:5px;left:0}.cropper-point{background-color:#39f;height:5px;opacity:.75;width:5px}.cropper-point.point-e{cursor:e-resize;margin-top:-3px;right:-3px;top:50%}.cropper-point.point-n{cursor:n-resize;left:50%;margin-left:-3px;top:-3px}.cropper-point.point-w{cursor:w-resize;left:-3px;margin-top:-3px;top:50%}.cropper-point.point-s{bottom:-3px;cursor:s-resize;left:50%;margin-left:-3px}.cropper-point.point-ne{cursor:ne-resize;right:-3px;top:-3px}.cropper-point.point-nw{cursor:nw-resize;left:-3px;top:-3px}.cropper-point.point-sw{bottom:-3px;cursor:sw-resize;left:-3px}.cropper-point.point-se{bottom:-3px;cursor:se-resize;height:20px;opacity:1;right:-3px;width:20px}@media (min-width:768px){.cropper-point.point-se{height:15px;width:15px}}@media (min-width:992px){.cropper-point.point-se{height:10px;width:10px}}@media (min-width:1200px){.cropper-point.point-se{height:5px;opacity:.75;width:5px}}.cropper-point.point-se:before{background-color:#39f;bottom:-50%;content:" ";display:block;height:200%;opacity:0;position:absolute;right:-50%;width:200%}.cropper-invisible{opacity:0}.cropper-bg{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC")}.cropper-hide{display:block;height:0;position:absolute;width:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}
|
||||
8
app/views/qor/assets/stylesheets/vendors/material.min.css
vendored
Normal file
8
app/views/qor/assets/stylesheets/vendors/material.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
7
app/views/qor/assets/stylesheets/vendors/redactor.min.css
vendored
Normal file
7
app/views/qor/assets/stylesheets/vendors/redactor.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
app/views/qor/assets/stylesheets/vendors/select2.min.css
vendored
Normal file
1
app/views/qor/assets/stylesheets/vendors/select2.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user