init
This commit is contained in:
Jason Kulatunga
@@ -0,0 +1,167 @@
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Generate and apply base theme colors
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
@include treo-theme {
|
||||
|
||||
$background: map-get($theme, background);
|
||||
$foreground: map-get($theme, foreground);
|
||||
$is-dark: map-get($theme, is-dark);
|
||||
|
||||
// Base color and background
|
||||
& {
|
||||
color: map-get($foreground, text);
|
||||
background-color: map-get($background, background);
|
||||
}
|
||||
|
||||
// Base border color for all elements
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
border-color: map-get($foreground, divider);
|
||||
}
|
||||
|
||||
// Force the disabled colors on disabled elements
|
||||
[disabled] {
|
||||
|
||||
* {
|
||||
color: map-get($foreground, disabled) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-icon {
|
||||
|
||||
@if ($is-dark) {
|
||||
color: map-get($foreground, secondary-text);
|
||||
} @else {
|
||||
color: map-get($foreground, icon);
|
||||
}
|
||||
}
|
||||
|
||||
.text-card {
|
||||
color: map-get($background, card);
|
||||
}
|
||||
|
||||
.text-default {
|
||||
color: map-get($foreground, text);
|
||||
}
|
||||
|
||||
.text-secondary {
|
||||
color: map-get($foreground, secondary-text);
|
||||
}
|
||||
|
||||
.text-hint {
|
||||
color: map-get($foreground, hint-text);
|
||||
}
|
||||
|
||||
.text-disabled {
|
||||
color: map-get($foreground, disabled-text);
|
||||
}
|
||||
|
||||
.divider {
|
||||
color: map-get($foreground, divider);
|
||||
}
|
||||
|
||||
// Background colors
|
||||
.bg-default {
|
||||
background-color: map-get($background, background);
|
||||
}
|
||||
|
||||
.bg-dialog,
|
||||
.bg-card {
|
||||
background-color: map-get($background, card);
|
||||
}
|
||||
|
||||
.bg-hover {
|
||||
background-color: map-get($background, hover);
|
||||
}
|
||||
|
||||
// Dark - light variants
|
||||
@if ($is-dark) {
|
||||
|
||||
&.dark\:text-normal,
|
||||
.dark\:text-normal {
|
||||
color: map-get($foreground, text);
|
||||
}
|
||||
|
||||
&.dark\:text-secondary,
|
||||
.dark\:text-secondary {
|
||||
color: map-get($foreground, secondary-text);
|
||||
}
|
||||
|
||||
&.dark\:text-hint,
|
||||
.dark\:text-hint {
|
||||
color: map-get($foreground, hint-text);
|
||||
}
|
||||
|
||||
&.dark\:text-disabled,
|
||||
.dark\:text-disabled {
|
||||
color: map-get($foreground, disabled-text);
|
||||
}
|
||||
|
||||
&.dark\:text-divider,
|
||||
.dark\:text-divider {
|
||||
color: map-get($foreground, divider);
|
||||
}
|
||||
|
||||
&.dark\:bg-default,
|
||||
.dark\:bg-default {
|
||||
background-color: map-get($background, background);
|
||||
}
|
||||
|
||||
&.dark\:bg-dialog,
|
||||
.dark\:bg-dialog,
|
||||
&.dark\:bg-card,
|
||||
.dark\:bg-card {
|
||||
background-color: map-get($background, card);
|
||||
}
|
||||
|
||||
&.dark\:bg-hover,
|
||||
.dark\:bg-hover {
|
||||
background-color: map-get($background, hover);
|
||||
}
|
||||
|
||||
} @else {
|
||||
|
||||
&.light\:text-normal,
|
||||
.light\:text-normal {
|
||||
color: map-get($foreground, text);
|
||||
}
|
||||
|
||||
&.light\:text-secondary,
|
||||
.light\:text-secondary {
|
||||
color: map-get($foreground, secondary-text);
|
||||
}
|
||||
|
||||
&.light\:text-hint,
|
||||
.light\:text-hint {
|
||||
color: map-get($foreground, hint-text);
|
||||
}
|
||||
|
||||
&.light\:text-disabled,
|
||||
.light\:text-disabled {
|
||||
color: map-get($foreground, disabled-text);
|
||||
}
|
||||
|
||||
&.light\:text-divider,
|
||||
.light\:text-divider {
|
||||
color: map-get($foreground, divider);
|
||||
}
|
||||
|
||||
&.light\:bg-default,
|
||||
.light\:bg-default {
|
||||
background-color: map-get($background, background);
|
||||
}
|
||||
|
||||
&.light\:bg-dialog,
|
||||
.light\:bg-dialog,
|
||||
&.light\:bg-card,
|
||||
.light\:bg-card {
|
||||
background-color: map-get($background, card);
|
||||
}
|
||||
|
||||
&.light\:bg-hover,
|
||||
.light\:bg-hover {
|
||||
background-color: map-get($background, hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,279 @@
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Manually forked from TailwindCSS preflight.css
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Manually forked from SUIT CSS Base: https://github.com/suitcss/base
|
||||
* A thin layer on top of normalize.css that provides a starting point more
|
||||
* suitable for web applications.
|
||||
*/
|
||||
|
||||
/**
|
||||
* 1. Prevent padding and border from affecting element width
|
||||
* https://goo.gl/pYtbK7
|
||||
* 2. Change the default font family in all browsers (opinionated)
|
||||
*/
|
||||
|
||||
html {
|
||||
box-sizing: border-box; /* 1 */
|
||||
font-family: sans-serif; /* 2 */
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Removes the default spacing and border for appropriate elements.
|
||||
*/
|
||||
|
||||
blockquote,
|
||||
dl,
|
||||
dd,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
figure,
|
||||
p,
|
||||
pre {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Work around a Firefox/IE bug where the transparent `button` background
|
||||
* results in a loss of the default `button` focus styles.
|
||||
*/
|
||||
|
||||
button:focus {
|
||||
outline: 1px dotted;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Tailwind custom reset styles
|
||||
*/
|
||||
|
||||
/**
|
||||
* 1. Use the system font stack as a sane default.
|
||||
* 2. Use Tailwind's default "normal" line-height so the user isn't forced
|
||||
* to override it to ensure consistency even when using the default theme.
|
||||
*/
|
||||
|
||||
html {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */
|
||||
line-height: 1.5; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Allow adding a border to an element by just adding a border-width.
|
||||
*
|
||||
* By default, the way the browser specifies that an element should have no
|
||||
* border is by setting it's border-style to `none` in the user-agent
|
||||
* stylesheet.
|
||||
*
|
||||
* In order to easily add borders to elements by just setting the `border-width`
|
||||
* property, we change the default border-style for all elements to `solid`, and
|
||||
* use border-width to hide them instead. This way our `border` utilities only
|
||||
* need to set the `border-width` property instead of the entire `border`
|
||||
* shorthand, making our border utilities much more straightforward to compose.
|
||||
*
|
||||
* https://github.com/tailwindcss/tailwindcss/pull/116
|
||||
*/
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
border-width: 0;
|
||||
border-style: solid;
|
||||
// Default border color is defined in 'styles/base/_colors.scss' file for convenience
|
||||
}
|
||||
|
||||
/**
|
||||
* Undo the `border-style: none` reset that Normalize applies to images so that
|
||||
* our `border-{width}` utilities have the expected effect.
|
||||
*
|
||||
* The Normalize reset is unnecessary for us since we default the border-width
|
||||
* to 0 on all elements.
|
||||
*
|
||||
* https://github.com/tailwindcss/tailwindcss/issues/362
|
||||
*/
|
||||
img {
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
input::placeholder,
|
||||
textarea::placeholder {
|
||||
color: inherit;
|
||||
//opacity: 0.5;
|
||||
}
|
||||
|
||||
button,
|
||||
[role="button"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Reset links to optimize for opt-in styling instead of
|
||||
* opt-out.
|
||||
*/
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Reset form element properties that are easy to forget to
|
||||
* style explicitly so you don't inadvertently introduce
|
||||
* styles that deviate from your design system. These styles
|
||||
* supplement a partial reset that is already applied by
|
||||
* normalize.css.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
padding: 0;
|
||||
line-height: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Use the configured 'mono' font family for elements that
|
||||
* are expected to be rendered with a monospace font, falling
|
||||
* back to the system monospace stack if there is no configured
|
||||
* 'mono' font family.
|
||||
*/
|
||||
|
||||
pre,
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: $treo-font-mono;
|
||||
}
|
||||
|
||||
/**
|
||||
* Make replaced elements `display: block` by default as that's
|
||||
* the behavior you want almost all of the time. Inspired by
|
||||
* CSS Remedy, with `svg` added as well.
|
||||
*
|
||||
* https://github.com/mozdevs/cssremedy/issues/14
|
||||
*/
|
||||
|
||||
img,
|
||||
svg,
|
||||
video,
|
||||
canvas,
|
||||
audio,
|
||||
iframe,
|
||||
embed,
|
||||
object {
|
||||
display: block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/**
|
||||
* Constrain images and videos to the parent width and preserve
|
||||
* their instrinsic aspect ratio.
|
||||
*
|
||||
* https://github.com/mozdevs/cssremedy/issues/14
|
||||
*/
|
||||
|
||||
img,
|
||||
video {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Treo custom reset styles
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
* {
|
||||
// Text rendering
|
||||
text-rendering: optimizeLegibility;
|
||||
-o-text-rendering: optimizeLegibility;
|
||||
-ms-text-rendering: optimizeLegibility;
|
||||
-moz-text-rendering: optimizeLegibility;
|
||||
-webkit-text-rendering: optimizeLegibility;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
|
||||
// Disable default focus outline
|
||||
&:focus {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
// Enable focus outline only on keyboard focused buttons
|
||||
button.cdk-focused.cdk-keyboard-focused {
|
||||
outline: 1px dotted !important;
|
||||
outline: 5px auto -webkit-focus-ring-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
-webkit-font-smoothing: auto;
|
||||
-moz-osx-font-smoothing: auto;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 32px 0;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
// Fix: Disabled placeholder color is too faded on Safari
|
||||
input[disabled] {
|
||||
opacity: 1;
|
||||
-webkit-text-fill-color: currentColor;
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Apply Angular Material theme and generate Treo color classes for the theme
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
@include treo-theme {
|
||||
|
||||
// Generate Angular Material theme
|
||||
@include angular-material-theme($theme);
|
||||
|
||||
// Generate Treo color classes for the theme
|
||||
@include treo-color-classes(
|
||||
(
|
||||
primary: map-get($theme, primary),
|
||||
accent: map-get($theme, accent),
|
||||
warn: map-get($theme, warn)
|
||||
)
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,483 @@
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Angular Material typography config
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
@include angular-material-typography(
|
||||
mat-typography-config(
|
||||
$font-family: $treo-font-sans,
|
||||
$title: mat-typography-level(1.25rem, 2rem, 600),
|
||||
$body-2: mat-typography-level(0.875rem, 1.5rem, 600),
|
||||
$button: mat-typography-level(0.875rem, 0.875rem, 500),
|
||||
$input: mat-typography-level(0.875rem, 1.2857142857, 400) // line-height: 20px
|
||||
)
|
||||
);
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ General
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 0.875rem;
|
||||
font-family: $treo-font-sans;
|
||||
}
|
||||
|
||||
// Headings
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 1.25em 0 0.5em 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 32px;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.022em;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.022em;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.019em;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.017em;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.014em;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.011em;
|
||||
}
|
||||
|
||||
// Override links for web apps
|
||||
a {
|
||||
color: currentColor;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// Link helper for applying default 'a' style
|
||||
.link {
|
||||
cursor: pointer;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
// Breadcrumb
|
||||
.breadcrumb {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
|
||||
.path {
|
||||
white-space: nowrap;
|
||||
|
||||
&a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
&.current {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.separator {
|
||||
margin: 0 6px;
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Code and Pre
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
code,
|
||||
pre {
|
||||
font-family: $treo-font-mono;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
border-radius: 4px;
|
||||
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: 24px;
|
||||
margin: 0;
|
||||
@include treo-elevation();
|
||||
}
|
||||
|
||||
:not(pre) > code {
|
||||
padding: 2px 5px;
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Rich text
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
.rich-text {
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
h1 + * {
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
* + h2 {
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
h2 + * {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
* + h3 {
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
h2 + h3 {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
h3 + * {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
* + h4 {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
h3 + h4 {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
h4 + * {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
p + p {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style-type: decimal;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
* + ol {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
ol + * {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
li ol {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: disc;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
* + ul {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
ul + *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
li ul {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
li + li {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
li p {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
li p + p {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
li:first-child p:first-child {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
abbr {
|
||||
cursor: help;
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-style: dotted;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left-width: 3px;
|
||||
font-style: italic;
|
||||
margin: 16px 0;
|
||||
padding-left: 16px;
|
||||
|
||||
footer {
|
||||
font-style: normal;
|
||||
|
||||
&:before {
|
||||
content: '\2014 \00A0';
|
||||
}
|
||||
}
|
||||
|
||||
&.reverse {
|
||||
border-left-width: 0;
|
||||
border-right-width: 3px;
|
||||
text-align: right;
|
||||
padding-left: 0;
|
||||
padding-right: 16px;
|
||||
|
||||
footer {
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '\2014 \00A0';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
* + blockquote {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
blockquote + * {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
dl {
|
||||
|
||||
dt {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin: 4px 0 16px 0;
|
||||
}
|
||||
}
|
||||
|
||||
fieldset {
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: 0;
|
||||
padding-inline-start: 0;
|
||||
padding-inline-end: 0;
|
||||
padding-block-start: 0;
|
||||
padding-block-end: 0;
|
||||
width: 100%;
|
||||
border-width: 1px;
|
||||
border-radius: 4px;
|
||||
padding: 24px;
|
||||
|
||||
legend {
|
||||
padding: 0 6px;
|
||||
margin-left: -6px;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
margin-top: 32px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
* + pre {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
pre + * {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
pre code {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
// treo-highlight
|
||||
* + .treo-highlight {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.treo-highlight + p {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
// treo-message
|
||||
* + treo-message {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
treo-message + p {
|
||||
margin-top: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Theming
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
@include treo-theme {
|
||||
|
||||
$foreground: map-get($theme, foreground);
|
||||
$primary: map-get($theme, primary);
|
||||
$is-dark: map-get($theme, is-dark);
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ General
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
// Link helper for applying default 'a' style
|
||||
.link {
|
||||
color: map-get($primary, default);
|
||||
border-bottom-color: map-get($primary, default);
|
||||
}
|
||||
|
||||
// Breadcrumb
|
||||
.breadcrumb {
|
||||
|
||||
.path {
|
||||
color: map-get($primary, default);
|
||||
|
||||
&.current {
|
||||
color: map-get($foreground, secondary-text);
|
||||
}
|
||||
}
|
||||
|
||||
.separator {
|
||||
color: map-get($foreground, secondary-text);
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Code and Pre
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
code,
|
||||
pre {
|
||||
@if ($is-dark) {
|
||||
color: treo-color('cool-gray', 400);
|
||||
background: treo-color('cool-gray', 800);
|
||||
} @else {
|
||||
background: #FFFFFF;
|
||||
color: #728FCB;
|
||||
}
|
||||
}
|
||||
|
||||
:not(pre) > code {
|
||||
@if ($is-dark) {
|
||||
color: treo-color('cool-gray', 400);
|
||||
background: treo-color('cool-gray', 700);
|
||||
} @else {
|
||||
color: treo-color('cool-gray', 500);
|
||||
background: treo-color('cool-gray', 200);
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Rich text
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
.rich-text {
|
||||
|
||||
a {
|
||||
color: map-get($primary, default);
|
||||
border-bottom-color: map-get($primary, default);
|
||||
}
|
||||
|
||||
mark {
|
||||
background: #F7F49A;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,378 @@
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Extended styles for treo-card
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
treo-card {
|
||||
|
||||
&.auth-card {
|
||||
margin: 8px;
|
||||
|
||||
@include treo-breakpoint('xs') {
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
// Classic style
|
||||
&.classic {
|
||||
|
||||
.content-container {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Modern style
|
||||
&.modern,
|
||||
&.modern-alt {
|
||||
max-width: 1200px;
|
||||
width: calc(100% - 16px);
|
||||
|
||||
@include treo-breakpoint('lt-md') {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
|
||||
@include treo-breakpoint('gt-sm') {
|
||||
padding: 64px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.modern-alt {
|
||||
|
||||
.form-container {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.content-container {
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Fullscreen style
|
||||
&.fullscreen,
|
||||
&.fullscreen-alt {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
|
||||
@include treo-breakpoint('lt-md') {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
width: 45%;
|
||||
|
||||
@include treo-breakpoint('lt-md') {
|
||||
width: auto;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.form {
|
||||
margin: auto 32px auto auto;
|
||||
|
||||
@include treo-breakpoint('lt-md') {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.fullscreen-alt {
|
||||
|
||||
.form-container {
|
||||
order: 2;
|
||||
|
||||
.form {
|
||||
margin: auto auto auto 32px;
|
||||
|
||||
@include treo-breakpoint('lt-md') {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-container {
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Form container
|
||||
.form-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
order: 1;
|
||||
padding: 48px;
|
||||
|
||||
@include treo-breakpoint('xs') {
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.form {
|
||||
width: 100%;
|
||||
min-width: 320px;
|
||||
max-width: 320px;
|
||||
|
||||
@include treo-breakpoint('xs') {
|
||||
max-width: 0;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 48px;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 32px 0 0 0;
|
||||
font-size: 30px;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.022em;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
margin-top: 2px;
|
||||
font-weight: 500;
|
||||
|
||||
.link {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
treo-message {
|
||||
margin-top: 32px;
|
||||
margin-bottom: -16px;
|
||||
}
|
||||
|
||||
form {
|
||||
margin-top: 32px;
|
||||
|
||||
.mat-form-field {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.field-footer {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
margin: 6px 0 12px 0;
|
||||
|
||||
.link {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
width: 100%;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.sso {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.separator {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1 1 auto;
|
||||
margin: 32px 0;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
button {
|
||||
flex: 1 1 auto;
|
||||
margin-right: 8px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.mat-icon {
|
||||
@include treo-icon-size(20);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-footer {
|
||||
width: 100%;
|
||||
margin-top: 32px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
|
||||
.link {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Content container
|
||||
.content-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
order: 2;
|
||||
overflow: hidden;
|
||||
|
||||
@include treo-breakpoint('lt-md') {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 900px;
|
||||
pointer-events: none;
|
||||
|
||||
path {
|
||||
opacity: 0.1;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 480px;
|
||||
width: 100%;
|
||||
margin: 64px;
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
span {
|
||||
font-size: 40px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-top: 12px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.learn-more-button {
|
||||
width: 160px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Theming
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
@include treo-theme {
|
||||
|
||||
$foreground: map-get($theme, foreground);
|
||||
$is-dark: map-get($theme, is-dark);
|
||||
|
||||
treo-card {
|
||||
|
||||
&.auth-card {
|
||||
|
||||
@include treo-breakpoint('xs') {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
// Fullscreen style
|
||||
&.fullscreen,
|
||||
&.fullscreen-alt {
|
||||
|
||||
@include treo-breakpoint('lt-md') {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.form-container {
|
||||
|
||||
.form {
|
||||
|
||||
.form-footer {
|
||||
|
||||
span {
|
||||
color: map-get($foreground, secondary-text);
|
||||
}
|
||||
}
|
||||
|
||||
.sso {
|
||||
|
||||
.separator {
|
||||
color: map-get($foreground, secondary-text);
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
background: map-get($foreground, divider);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Content container
|
||||
.content-container {
|
||||
@if ($is-dark) {
|
||||
background: treo-color('cool-gray', 700);
|
||||
} @else {
|
||||
background: treo-color('indigo', 700);
|
||||
}
|
||||
color: white;
|
||||
|
||||
.background {
|
||||
|
||||
path {
|
||||
@if ($is-dark) {
|
||||
fill: treo-color('cool-gray', 900);
|
||||
} @else {
|
||||
fill: treo-color('indigo', 100);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
|
||||
.description {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
input {
|
||||
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Theming
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
@include treo-theme {
|
||||
|
||||
$foreground: map-get($theme, foreground);
|
||||
|
||||
input,
|
||||
textarea {
|
||||
background: transparent;
|
||||
|
||||
// Placeholder color
|
||||
&::placeholder {
|
||||
color: map-get($foreground, hint-text);
|
||||
}
|
||||
|
||||
&::-moz-placeholder {
|
||||
color: map-get($foreground, hint-text);
|
||||
}
|
||||
|
||||
&::-webkit-input-placeholder {
|
||||
color: map-get($foreground, hint-text);
|
||||
}
|
||||
|
||||
&:-ms-input-placeholder {
|
||||
color: map-get($foreground, hint-text);
|
||||
}
|
||||
|
||||
&:-webkit-autofill {
|
||||
-webkit-transition: 'background-color 9999s ease-out';
|
||||
-webkit-transition-delay: 9999s;
|
||||
}
|
||||
|
||||
&:-webkit-autofill:hover {
|
||||
-webkit-transition: 'background-color 9999s ease-out';
|
||||
-webkit-transition-delay: 9999s;
|
||||
}
|
||||
|
||||
&:-webkit-autofill:focus {
|
||||
-webkit-transition: 'background-color 9999s ease-out';
|
||||
-webkit-transition-delay: 9999s;
|
||||
}
|
||||
|
||||
&:-webkit-autofill:active {
|
||||
-webkit-transition: 'background-color 9999s ease-out';
|
||||
-webkit-transition-delay: 9999s;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
.rich-text {
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-spacing: 0;
|
||||
|
||||
thead {
|
||||
|
||||
tr {
|
||||
|
||||
th {
|
||||
padding: 16px;
|
||||
border-bottom-width: 2px;
|
||||
text-align: left;
|
||||
font-weight: 500;
|
||||
|
||||
&:first-child {
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
|
||||
tr {
|
||||
|
||||
td {
|
||||
padding: 16px;
|
||||
border-bottom-width: 1px;
|
||||
text-align: left;
|
||||
|
||||
&:first-child {
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
|
||||
td {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tfoot {
|
||||
|
||||
tr {
|
||||
|
||||
th {
|
||||
padding: 16px;
|
||||
border-top-width: 2px;
|
||||
text-align: left;
|
||||
font-weight: 500;
|
||||
|
||||
&:first-child {
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Theming
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
@include treo-theme {
|
||||
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,32 @@
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ This file meant to be imported only once!
|
||||
// Use treo.scss to access to the Angular Material and Treo utilities
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
// 1. Utilities
|
||||
@import 'treo';
|
||||
|
||||
// 2. Vendors
|
||||
@import 'vendors/normalize';
|
||||
@import 'vendors/angular-material';
|
||||
|
||||
// 3. Base
|
||||
@import 'base/preflight';
|
||||
@import 'base/typography';
|
||||
@import 'base/colors';
|
||||
@import 'base/theming';
|
||||
|
||||
// 4. Layout
|
||||
@import 'layout/content';
|
||||
|
||||
// 5. Components
|
||||
@import 'components/card';
|
||||
@import 'components/input';
|
||||
@import 'components/table';
|
||||
|
||||
// 6. Overrides
|
||||
@import 'overrides/angular-material';
|
||||
@import 'overrides/fullcalendar';
|
||||
@import 'overrides/highlightjs';
|
||||
@import 'overrides/perfect-scrollbar';
|
||||
@import 'overrides/quill';
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,878 @@
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ FullCalendar overrides
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
.fc {
|
||||
|
||||
.fc-view-container {
|
||||
|
||||
// Day Grid - Month view
|
||||
.fc-view.fc-dayGridMonth-view {
|
||||
|
||||
.fc-head {
|
||||
|
||||
> tr > .fc-head-container {
|
||||
border: none;
|
||||
|
||||
.fc-row {
|
||||
|
||||
.fc-day-header {
|
||||
|
||||
span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-top: 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-body {
|
||||
|
||||
> tr > .fc-widget-content {
|
||||
border: none;
|
||||
|
||||
.fc-day-grid {
|
||||
|
||||
.fc-week {
|
||||
|
||||
.fc-content-skeleton {
|
||||
|
||||
.fc-day-top {
|
||||
text-align: center;
|
||||
|
||||
&.fc-other-month {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.fc-day-number {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 22px;
|
||||
height: 21px;
|
||||
margin: 4px 0;
|
||||
font-size: 12px;
|
||||
border-radius: 50%;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-event-container {
|
||||
|
||||
.fc-day-grid-event {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 22px;
|
||||
min-height: 22px;
|
||||
max-height: 22px;
|
||||
margin: 0 6px 4px 6px;
|
||||
padding: 0 8px;
|
||||
font-size: 12px;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
||||
@include treo-breakpoint('xs') {
|
||||
padding: 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-more {
|
||||
padding: 0 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
|
||||
@include treo-breakpoint('xs') {
|
||||
padding: 0 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-highlight-skeleton {
|
||||
|
||||
.fc-highlight {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-popover {
|
||||
|
||||
&.fc-more-popover {
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
@include treo-elevation('2xl');
|
||||
|
||||
.fc-header {
|
||||
height: 32px;
|
||||
min-height: 32px;
|
||||
max-height: 32px;
|
||||
padding: 0 8px;
|
||||
|
||||
.fc-title {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-body {
|
||||
max-height: 160px;
|
||||
overflow: hidden auto;
|
||||
|
||||
.fc-event-container {
|
||||
padding: 8px;
|
||||
|
||||
.fc-day-grid-event {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 22px;
|
||||
min-height: 22px;
|
||||
max-height: 22px;
|
||||
margin: 0 0 6px 0;
|
||||
padding: 0 8px;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Time Grid - Week view
|
||||
.fc-view.fc-timeGridWeek-view {
|
||||
|
||||
.fc-head {
|
||||
|
||||
> tr > .fc-head-container {
|
||||
border: none;
|
||||
|
||||
.fc-row {
|
||||
|
||||
.fc-axis {
|
||||
width: 48px !important;
|
||||
}
|
||||
|
||||
.fc-day-header {
|
||||
|
||||
span {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
|
||||
&.fc-weekday {
|
||||
padding-top: 16px;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.055em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
&.fc-date {
|
||||
padding-bottom: 12px;
|
||||
font-size: 26px;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-body {
|
||||
|
||||
> tr > .fc-widget-content {
|
||||
border: none;
|
||||
|
||||
.fc-day-grid {
|
||||
|
||||
.fc-row {
|
||||
min-height: 0;
|
||||
|
||||
.fc-bg {
|
||||
|
||||
.fc-axis {
|
||||
width: 48px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-content-skeleton {
|
||||
padding-bottom: 0;
|
||||
|
||||
.fc-axis {
|
||||
width: 48px !important;
|
||||
}
|
||||
|
||||
.fc-event-container {
|
||||
|
||||
.fc-day-grid-event {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 22px;
|
||||
min-height: 22px;
|
||||
max-height: 22px;
|
||||
margin: 0 6px 6px 6px;
|
||||
padding: 0 8px;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-divider {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.fc-time-grid {
|
||||
|
||||
.fc-bg {
|
||||
|
||||
.fc-axis {
|
||||
border: none;
|
||||
width: 48px !important;
|
||||
|
||||
+ .fc-day {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-slats {
|
||||
|
||||
.fc-axis {
|
||||
width: 48px !important;
|
||||
height: 48px;
|
||||
text-align: center;
|
||||
|
||||
span {
|
||||
font-size: 12px;
|
||||
width: 48px;
|
||||
min-width: 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-content-skeleton {
|
||||
|
||||
.fc-axis {
|
||||
width: 48px !important;
|
||||
}
|
||||
|
||||
.fc-event-container {
|
||||
margin: 0 12px 0 0;
|
||||
|
||||
.fc-time-grid-event {
|
||||
display: flex;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
||||
.fc-time,
|
||||
.fc-title {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Time Grid - Day view
|
||||
.fc-view.fc-timeGridDay-view {
|
||||
|
||||
.fc-head {
|
||||
|
||||
> tr > .fc-head-container {
|
||||
border: none;
|
||||
|
||||
.fc-row {
|
||||
|
||||
.fc-axis {
|
||||
width: 48px !important;
|
||||
}
|
||||
|
||||
.fc-day-header {
|
||||
|
||||
span {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
|
||||
&.fc-weekday {
|
||||
padding-top: 16px;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.055em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
&.fc-date {
|
||||
padding-bottom: 12px;
|
||||
font-size: 26px;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-body {
|
||||
|
||||
> tr > .fc-widget-content {
|
||||
border: none;
|
||||
|
||||
.fc-day-grid {
|
||||
|
||||
.fc-row {
|
||||
min-height: 0;
|
||||
|
||||
.fc-bg {
|
||||
|
||||
.fc-axis {
|
||||
width: 48px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-content-skeleton {
|
||||
padding-bottom: 0;
|
||||
|
||||
.fc-axis {
|
||||
width: 48px !important;
|
||||
}
|
||||
|
||||
.fc-event-container {
|
||||
|
||||
.fc-day-grid-event {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 22px;
|
||||
min-height: 22px;
|
||||
max-height: 22px;
|
||||
margin: 0 6px 6px 6px;
|
||||
padding: 0 8px;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-divider {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.fc-time-grid {
|
||||
|
||||
.fc-bg {
|
||||
|
||||
.fc-axis {
|
||||
border: none;
|
||||
width: 48px !important;
|
||||
|
||||
+ .fc-day {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-slats {
|
||||
|
||||
.fc-axis {
|
||||
width: 48px !important;
|
||||
height: 48px;
|
||||
text-align: center;
|
||||
|
||||
span {
|
||||
font-size: 12px;
|
||||
width: 48px;
|
||||
min-width: 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-content-skeleton {
|
||||
|
||||
.fc-axis {
|
||||
width: 48px !important;
|
||||
}
|
||||
|
||||
.fc-event-container {
|
||||
margin: 0 12px 0 0;
|
||||
|
||||
.fc-time-grid-event {
|
||||
display: flex;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
||||
.fc-time,
|
||||
.fc-title {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// List - Year view
|
||||
.fc-view.fc-listYear-view {
|
||||
border: none;
|
||||
|
||||
.fc-list-table {
|
||||
|
||||
.fc-list-heading {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fc-list-item {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
|
||||
td {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: auto;
|
||||
height: 48px;
|
||||
min-height: 48px;
|
||||
padding: 0 8px;
|
||||
border-width: 0 0 1px 0;
|
||||
|
||||
&.fc-list-item-date {
|
||||
order: 1;
|
||||
padding-left: 16px;
|
||||
width: 120px;
|
||||
min-width: 120px;
|
||||
max-width: 120px;
|
||||
|
||||
@include treo-breakpoint('xs') {
|
||||
width: 100px;
|
||||
min-width: 100px;
|
||||
max-width: 100px;
|
||||
}
|
||||
|
||||
> span {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
|
||||
span {
|
||||
|
||||
&:first-child {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-right: 8px;
|
||||
width: 32px;
|
||||
min-width: 32px;
|
||||
max-width: 32px;
|
||||
font-size: 18px;
|
||||
|
||||
@include treo-breakpoint('xs') {
|
||||
padding-right: 2px;
|
||||
}
|
||||
|
||||
+ span {
|
||||
display: flex;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.055em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.fc-list-item-time {
|
||||
flex: 0 0 auto;
|
||||
order: 3;
|
||||
width: 160px;
|
||||
min-width: 160px;
|
||||
max-width: 160px;
|
||||
|
||||
@include treo-breakpoint('xs') {
|
||||
width: 120px;
|
||||
min-width: 120px;
|
||||
max-width: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
&.fc-list-item-marker {
|
||||
flex: 0 0 auto;
|
||||
order: 2;
|
||||
|
||||
.fc-event-dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
&.fc-list-item-title {
|
||||
flex: 1 1 auto;
|
||||
order: 4;
|
||||
padding-right: 24px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Day grid event - Dragging
|
||||
.fc-day-grid-event {
|
||||
|
||||
&.fc-dragging,
|
||||
&.fc-resizing {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 22px;
|
||||
min-height: 22px;
|
||||
max-height: 22px;
|
||||
margin: 0 6px 4px 6px;
|
||||
padding: 0 8px;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Theming
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
@include treo-theme {
|
||||
|
||||
$background: map-get($theme, background);
|
||||
$foreground: map-get($theme, foreground);
|
||||
$primary: map-get($theme, primary);
|
||||
|
||||
.fc {
|
||||
|
||||
.fc-view-container {
|
||||
|
||||
// Day Grid - Month view
|
||||
.fc-view.fc-dayGridMonth-view {
|
||||
|
||||
.fc-head {
|
||||
|
||||
> tr > .fc-head-container {
|
||||
|
||||
.fc-row {
|
||||
|
||||
.fc-day-header {
|
||||
border-color: map-get($foreground, divider);
|
||||
|
||||
span {
|
||||
color: map-get($foreground, secondary-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-body {
|
||||
|
||||
> tr > .fc-widget-content {
|
||||
|
||||
.fc-day-grid {
|
||||
|
||||
.fc-week {
|
||||
|
||||
.fc-bg {
|
||||
|
||||
.fc-day {
|
||||
border-color: map-get($foreground, divider);
|
||||
|
||||
&.fc-today {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-content-skeleton {
|
||||
|
||||
.fc-day-top {
|
||||
|
||||
&.fc-other-month {
|
||||
|
||||
.fc-day-number {
|
||||
color: map-get($foreground, hint-text);
|
||||
}
|
||||
}
|
||||
|
||||
&.fc-today {
|
||||
|
||||
.fc-day-number {
|
||||
background: map-get($primary, default);
|
||||
color: map-get($primary, default-contrast);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-more {
|
||||
color: map-get($foreground, secondary-text);
|
||||
}
|
||||
}
|
||||
|
||||
.fc-highlight-skeleton {
|
||||
|
||||
.fc-highlight {
|
||||
background: treo-color('cool-gray', 100);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-popover {
|
||||
background: map-get($background, card);
|
||||
|
||||
&.fc-more-popover {
|
||||
|
||||
.fc-header {
|
||||
background: map-get($background, hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Time Grid - Week view
|
||||
.fc-view.fc-timeGridWeek-view {
|
||||
|
||||
.fc-head {
|
||||
|
||||
> tr > .fc-head-container {
|
||||
|
||||
.fc-row {
|
||||
|
||||
.fc-axis {
|
||||
border-color: map-get($foreground, divider);
|
||||
}
|
||||
|
||||
.fc-day-header {
|
||||
border-color: map-get($foreground, divider);
|
||||
|
||||
span {
|
||||
color: map-get($foreground, secondary-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-body {
|
||||
|
||||
> tr > .fc-widget-content {
|
||||
border: none;
|
||||
|
||||
.fc-day-grid {
|
||||
|
||||
.fc-bg {
|
||||
|
||||
.fc-axis {
|
||||
border-color: map-get($foreground, divider);
|
||||
}
|
||||
|
||||
.fc-day {
|
||||
border-color: map-get($foreground, divider);
|
||||
|
||||
&.fc-today {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-divider {
|
||||
background: map-get($foreground, divider);
|
||||
}
|
||||
|
||||
.fc-time-grid {
|
||||
|
||||
.fc-bg {
|
||||
|
||||
.fc-day {
|
||||
border-color: map-get($foreground, divider);
|
||||
|
||||
&.fc-today {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-slats {
|
||||
|
||||
.fc-time {
|
||||
border-color: map-get($foreground, divider);
|
||||
}
|
||||
|
||||
.fc-widget-content {
|
||||
border-color: map-get($foreground, divider);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Time Grid - Day view
|
||||
.fc-view.fc-timeGridDay-view {
|
||||
|
||||
.fc-head {
|
||||
|
||||
> tr > .fc-head-container {
|
||||
|
||||
.fc-row {
|
||||
|
||||
.fc-axis {
|
||||
border-color: map-get($foreground, divider);
|
||||
}
|
||||
|
||||
.fc-day-header {
|
||||
border-color: map-get($foreground, divider);
|
||||
|
||||
span {
|
||||
color: map-get($foreground, secondary-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-body {
|
||||
|
||||
> tr > .fc-widget-content {
|
||||
border: none;
|
||||
|
||||
.fc-day-grid {
|
||||
|
||||
.fc-bg {
|
||||
|
||||
.fc-axis {
|
||||
border-color: map-get($foreground, divider);
|
||||
}
|
||||
|
||||
.fc-day {
|
||||
border-color: map-get($foreground, divider);
|
||||
|
||||
&.fc-today {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-divider {
|
||||
background: map-get($foreground, divider);
|
||||
}
|
||||
|
||||
.fc-time-grid {
|
||||
|
||||
.fc-bg {
|
||||
|
||||
.fc-day {
|
||||
border-color: map-get($foreground, divider);
|
||||
|
||||
&.fc-today {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-slats {
|
||||
|
||||
.fc-time {
|
||||
border-color: map-get($foreground, divider);
|
||||
}
|
||||
|
||||
.fc-widget-content {
|
||||
border-color: map-get($foreground, divider);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// List - Year view
|
||||
.fc-view.fc-listYear-view {
|
||||
|
||||
.fc-list-table {
|
||||
|
||||
.fc-list-item {
|
||||
|
||||
&:hover {
|
||||
|
||||
td {
|
||||
background-color: map-get($background, hover);
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
border-color: map-get($foreground, divider);
|
||||
|
||||
&.fc-list-item-date {
|
||||
|
||||
> span {
|
||||
|
||||
span {
|
||||
|
||||
&:first-child {
|
||||
|
||||
+ span {
|
||||
color: map-get($foreground, secondary-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,173 @@
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Highlight.js color scheme overrides
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Theming
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
@include treo-theme {
|
||||
|
||||
$foreground: map-get($theme, foreground);
|
||||
$is-dark: map-get($theme, is-dark);
|
||||
|
||||
// DARK COLOR SCHEME
|
||||
@if ($is-dark) {
|
||||
|
||||
code,
|
||||
pre {
|
||||
|
||||
.hljs-built_in,
|
||||
.hljs-selector-tag,
|
||||
.hljs-section,
|
||||
.hljs-link {
|
||||
color: #8BE9FD;
|
||||
}
|
||||
|
||||
.hljs-keyword {
|
||||
color: #FF79C6;
|
||||
}
|
||||
|
||||
.hljs,
|
||||
.hljs-subst {
|
||||
color: #F8F8F2;
|
||||
}
|
||||
|
||||
.hljs-title {
|
||||
color: #50FA7B;
|
||||
}
|
||||
|
||||
.hljs-meta,
|
||||
.hljs-type,
|
||||
.hljs-symbol,
|
||||
.hljs-bullet,
|
||||
.hljs-addition,
|
||||
.hljs-variable,
|
||||
.hljs-template-tag,
|
||||
.hljs-template-variable {
|
||||
color: #F1FA8C;
|
||||
}
|
||||
|
||||
.hljs-name {
|
||||
color: #80DEEA;
|
||||
}
|
||||
|
||||
.hljs-attr {
|
||||
color: #E1BEE7;
|
||||
}
|
||||
|
||||
.hljs-string {
|
||||
color: #A5D6A7;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-quote,
|
||||
.hljs-deletion {
|
||||
color: #6272A4;
|
||||
}
|
||||
|
||||
.hljs-keyword,
|
||||
.hljs-selector-tag,
|
||||
.hljs-literal,
|
||||
.hljs-title,
|
||||
.hljs-section,
|
||||
.hljs-doctag,
|
||||
.hljs-type,
|
||||
.hljs-name,
|
||||
.hljs-strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.hljs-literal,
|
||||
.hljs-number {
|
||||
color: #BD93F9;
|
||||
}
|
||||
|
||||
.hljs-emphasis {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
}
|
||||
// LIGHT COLOR SCHEME
|
||||
@else {
|
||||
|
||||
code[class*='language-'],
|
||||
pre[class*='language-'] {
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-quote {
|
||||
color: #A0A1A7;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-doctag,
|
||||
.hljs-keyword,
|
||||
.hljs-formula {
|
||||
color: #A626A4;
|
||||
}
|
||||
|
||||
.hljs-name {
|
||||
color: #7986CB;
|
||||
}
|
||||
|
||||
.hljs-tag {
|
||||
color: #B9BBD2;
|
||||
}
|
||||
|
||||
.hljs-section,
|
||||
.hljs-selector-tag,
|
||||
.hljs-deletion,
|
||||
.hljs-subst {
|
||||
color: #E45649;
|
||||
}
|
||||
|
||||
.hljs-literal {
|
||||
color: #0184BB;
|
||||
}
|
||||
|
||||
.hljs-string,
|
||||
.hljs-regexp,
|
||||
.hljs-addition,
|
||||
.hljs-attribute,
|
||||
.hljs-meta-string {
|
||||
color: #50A14F;
|
||||
}
|
||||
|
||||
.hljs-built_in,
|
||||
.hljs-class .hljs-title {
|
||||
color: #C18401;
|
||||
}
|
||||
|
||||
.hljs-attr,
|
||||
.hljs-variable,
|
||||
.hljs-template-variable,
|
||||
.hljs-type,
|
||||
.hljs-selector-class,
|
||||
.hljs-selector-attr,
|
||||
.hljs-selector-pseudo,
|
||||
.hljs-number {
|
||||
color: #BA68C8;
|
||||
}
|
||||
|
||||
.hljs-symbol,
|
||||
.hljs-bullet,
|
||||
.hljs-link,
|
||||
.hljs-meta,
|
||||
.hljs-selector-id,
|
||||
.hljs-title {
|
||||
color: #4078F2;
|
||||
}
|
||||
|
||||
.hljs-emphasis {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.hljs-link {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Perfect scrollbar overrides
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
.ps {
|
||||
position: relative;
|
||||
|
||||
&:hover,
|
||||
&.ps--focus,
|
||||
&.ps--scrolling-x,
|
||||
&.ps--scrolling-y {
|
||||
|
||||
> .ps__rail-x,
|
||||
> .ps__rail-y {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
> .ps__rail-x,
|
||||
> .ps__rail-y {
|
||||
z-index: 99999;
|
||||
}
|
||||
|
||||
> .ps__rail-x {
|
||||
height: 14px;
|
||||
background: transparent !important;
|
||||
transition: none !important;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.ps--clicking {
|
||||
opacity: 1;
|
||||
|
||||
.ps__thumb-x {
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.ps__thumb-x {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);
|
||||
height: 6px;
|
||||
transition: height 225ms cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
}
|
||||
}
|
||||
|
||||
> .ps__rail-y {
|
||||
width: 14px;
|
||||
background: transparent !important;
|
||||
transition: none !important;
|
||||
left: auto !important;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.ps--clicking {
|
||||
opacity: 1;
|
||||
|
||||
.ps__thumb-y {
|
||||
width: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.ps__thumb-y {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);
|
||||
width: 6px;
|
||||
transition: width 225ms cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,143 @@
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Quill editor style overrides
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
.ql-toolbar {
|
||||
border-radius: 6px 6px 0 0;
|
||||
padding: 0 !important;
|
||||
|
||||
.ql-formats {
|
||||
margin: 11px 8px !important;
|
||||
}
|
||||
|
||||
.ql-picker {
|
||||
|
||||
&.ql-expanded {
|
||||
|
||||
.ql-picker-options {
|
||||
z-index: 10 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ql-container {
|
||||
overflow: hidden;
|
||||
border-radius: 0 0 6px 6px;
|
||||
@include treo-elevation('sm');
|
||||
|
||||
.ql-editor {
|
||||
min-height: 160px;
|
||||
max-height: 160px;
|
||||
height: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Theming
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
@include treo-theme {
|
||||
|
||||
$background: map-get($theme, background);
|
||||
$foreground: map-get($theme, foreground);
|
||||
$primary: map-get($theme, primary);
|
||||
$is-dark: map-get($theme, is-dark);
|
||||
|
||||
.ql-toolbar {
|
||||
@if ($is-dark) {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
border-color: treo-color('cool-gray', 500);
|
||||
} @else {
|
||||
background: treo-color('cool-gray', 100);
|
||||
border-color: treo-color('cool-gray', 300);
|
||||
}
|
||||
|
||||
.ql-picker {
|
||||
|
||||
&.ql-expanded {
|
||||
|
||||
.ql-picker-label {
|
||||
@if ($is-dark) {
|
||||
border-color: treo-color('cool-gray', 500);
|
||||
} @else {
|
||||
border-color: treo-color('cool-gray', 300);
|
||||
}
|
||||
}
|
||||
|
||||
.ql-picker-options {
|
||||
@if ($is-dark) {
|
||||
border-color: treo-color('cool-gray', 500);
|
||||
} @else {
|
||||
border-color: treo-color('cool-gray', 300);
|
||||
}
|
||||
background: map-get($background, card);
|
||||
}
|
||||
}
|
||||
|
||||
.ql-picker-label {
|
||||
color: map-get($foreground, text);
|
||||
}
|
||||
|
||||
.ql-picker-options {
|
||||
|
||||
.ql-picker-item {
|
||||
color: map-get($foreground, text);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ql-stroke,
|
||||
.ql-stroke-mitter {
|
||||
stroke: map-get($foreground, icon);
|
||||
}
|
||||
|
||||
.ql-fill {
|
||||
fill: map-get($foreground, icon);
|
||||
}
|
||||
|
||||
button:hover,
|
||||
button:focus,
|
||||
button.ql-active,
|
||||
.ql-picker-label:hover,
|
||||
.ql-picker-label.ql-active,
|
||||
.ql-picker-item:hover,
|
||||
.ql-picker-item.ql-selected {
|
||||
color: map-get($primary, default) !important;
|
||||
|
||||
.ql-stroke,
|
||||
.ql-stroke-mitter {
|
||||
stroke: map-get($primary, default) !important;
|
||||
}
|
||||
|
||||
.ql-fill {
|
||||
fill: map-get($primary, default) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ql-container {
|
||||
@if ($is-dark) {
|
||||
border-color: treo-color('cool-gray', 500);
|
||||
} @else {
|
||||
border-color: treo-color('cool-gray', 300);
|
||||
}
|
||||
|
||||
.ql-editor {
|
||||
@if ($is-dark) {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
} @else {
|
||||
background-color: treo-color('cool-gray', 50);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: map-get($background, card);
|
||||
}
|
||||
|
||||
&.ql-blank::before {
|
||||
color: map-get($foreground, hint-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Use this file to access to the core Angular Material and Treo utilities
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
// 1. Angular Material theming tools
|
||||
@import '~@angular/material/theming';
|
||||
|
||||
// 2. Utilities
|
||||
@import '../tailwind/exported/variables';
|
||||
@import 'utilities/theming';
|
||||
@import 'utilities/breakpoints';
|
||||
@import 'utilities/colors';
|
||||
@import 'utilities/elevations';
|
||||
@import 'utilities/icons';
|
||||
@import 'utilities/keyframes';
|
||||
|
||||
// 3. Themes definition file that includes $treo-themes map
|
||||
@import 'src/styles/themes';
|
||||
@@ -0,0 +1,28 @@
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Mixins
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
///
|
||||
/// Wrap the mixin content with the given media breakpoint.
|
||||
/// If breakpoint name does not exist on the breakpoints list,
|
||||
/// apply the given name as a media rule.
|
||||
///
|
||||
/// @access public
|
||||
/// @param {String} $breakpoint - Name of the breakpoint or a media rule
|
||||
///
|
||||
@mixin treo-breakpoint($breakpoint) {
|
||||
|
||||
$mediaQuery: map-get($treo-breakpoints, $breakpoint);
|
||||
|
||||
@if ($mediaQuery != null) {
|
||||
|
||||
@media #{$mediaQuery} {
|
||||
@content
|
||||
}
|
||||
} @else {
|
||||
|
||||
@media #{$breakpoint} {
|
||||
@content
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,304 @@
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Functions
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
///
|
||||
/// Get color from treo color maps
|
||||
///
|
||||
/// @access public
|
||||
/// @param {String} $color - Desired color
|
||||
/// @param {String|Number} $hue - Desired hue
|
||||
/// @param {Number} $opacity - Desired opacity
|
||||
///
|
||||
@function treo-color($color, $hue: 500, $opacity: 1) {
|
||||
|
||||
// Get the color palette
|
||||
$palette: map-get($treo-colors, $color);
|
||||
|
||||
// Make sure the palette is available
|
||||
@if ($palette == null) {
|
||||
@error "Color '#{$color}' is not available!";
|
||||
}
|
||||
|
||||
// Get the color
|
||||
$color: map-get($palette, $hue);
|
||||
|
||||
// Make sure the hue is available
|
||||
@if ($color == null) {
|
||||
@error "Hue '#{$hue}' is not available!";
|
||||
}
|
||||
|
||||
// Apply the opacity if possible
|
||||
@if (type-of($color) == color) {
|
||||
$color: rgba($color, $opacity);
|
||||
}
|
||||
|
||||
// Return the color
|
||||
@return $color;
|
||||
}
|
||||
|
||||
///
|
||||
/// Get contrast color from treo color maps
|
||||
///
|
||||
/// @access public
|
||||
/// @param {String} $contrast - Desired contrast
|
||||
/// @param {String|Number} $hue - Desired hue
|
||||
/// @param {Number} $opacity - Desired opacity
|
||||
///
|
||||
@function treo-contrast($contrast, $hue: 500, $opacity: 1) {
|
||||
|
||||
// Get the color palette
|
||||
$palette: map-get($treo-colors, $contrast);
|
||||
|
||||
// Make sure the palette is available
|
||||
@if ($palette == null) {
|
||||
@error "Contrast '#{$contrast}' is not available!";
|
||||
}
|
||||
|
||||
// Get the contrast
|
||||
$contrast: map-get(map-get($palette, contrast), $hue);
|
||||
|
||||
// Make sure the hue is available
|
||||
@if ($contrast == null) {
|
||||
@error "Hue '#{$hue}' is not available!";
|
||||
}
|
||||
|
||||
// Apply the opacity if possible
|
||||
@if (type-of($contrast) == color) {
|
||||
$color: rgba($contrast, $opacity);
|
||||
}
|
||||
|
||||
// Return the contrast
|
||||
@return $contrast;
|
||||
}
|
||||
|
||||
///
|
||||
/// Modify the Angular Material theme object to soften foreground colors
|
||||
/// on light themes and increase contrast on dark themes
|
||||
///
|
||||
/// @access private
|
||||
/// @param {Map} $theme - Angular Material theme map
|
||||
///
|
||||
@function _treo-modify-angular-material-theme-colors($theme) {
|
||||
|
||||
// Store the is-dark for convenience
|
||||
$is-dark: map-get($theme, is-dark);
|
||||
|
||||
// Generate the modified foreground palette based on
|
||||
// Angular Material's mat-xxx-theme-foreground map
|
||||
$foreground: (
|
||||
base: if($is-dark, white, black),
|
||||
divider: if($is-dark, rgba(treo-color('cool-gray', 100), 0.12), treo-color('cool-gray', 200)),
|
||||
dividers: if($is-dark, rgba(treo-color('cool-gray', 100), 0.12), treo-color('cool-gray', 200)),
|
||||
disabled: if($is-dark, treo-color('cool-gray', 600), treo-color('cool-gray', 400)),
|
||||
disabled-button: if($is-dark, treo-color('cool-gray', 800), treo-color('cool-gray', 400)),
|
||||
disabled-text: if($is-dark, treo-color('cool-gray', 600), treo-color('cool-gray', 400)),
|
||||
elevation: black,
|
||||
hint-text: if($is-dark, treo-color('cool-gray', 500), treo-color('cool-gray', 400)),
|
||||
secondary-text: if($is-dark, treo-color('cool-gray', 400), treo-color('cool-gray', 500)),
|
||||
icon: if($is-dark, treo-color('cool-gray', 100), treo-color('cool-gray', 500)),
|
||||
icons: if($is-dark, treo-color('cool-gray', 100), treo-color('cool-gray', 500)),
|
||||
text: if($is-dark, white, treo-color('cool-gray', 800)),
|
||||
slider-min: if($is-dark, white, treo-color('cool-gray', 800)),
|
||||
slider-off: if($is-dark, treo-color('cool-gray', 500), treo-color('cool-gray', 300)),
|
||||
slider-off-active: if($is-dark, treo-color('cool-gray', 400), treo-color('cool-gray', 400)),
|
||||
);
|
||||
|
||||
// Generate the modified background palette based on
|
||||
// Angular Material's mat-xxx-theme-background map
|
||||
$background: (
|
||||
status-bar: if($is-dark, treo-color('cool-gray', 900), treo-color('cool-gray', 300)),
|
||||
app-bar: if($is-dark, treo-color('cool-gray', 900), white),
|
||||
background: if($is-dark, treo-color('cool-gray', 900), treo-color('cool-gray', 100)),
|
||||
hover: if($is-dark, rgba(255, 255, 255, 0.05), rgba(treo-color('cool-gray', 400), 0.12)),
|
||||
card: if($is-dark, treo-color('cool-gray', 800), white),
|
||||
dialog: if($is-dark, treo-color('cool-gray', 800), white),
|
||||
disabled-button: if($is-dark, rgba(treo-color('cool-gray', 900), 0.38), rgba(treo-color('cool-gray', 400), 0.38)),
|
||||
raised-button: if($is-dark, treo-color('cool-gray', 900), white),
|
||||
focused-button: if($is-dark, treo-color('cool-gray', 200), treo-color('cool-gray', 500)),
|
||||
selected-button: if($is-dark, rgba(255, 255, 255, 0.05), treo-color('cool-gray', 200)),
|
||||
selected-disabled-button: if($is-dark, treo-color('cool-gray', 800), treo-color('cool-gray', 200)),
|
||||
disabled-button-toggle: if($is-dark, treo-color('cool-gray', 900), treo-color('cool-gray', 300)),
|
||||
unselected-chip: if($is-dark, treo-color('cool-gray', 600), treo-color('cool-gray', 200)),
|
||||
disabled-list-option: if($is-dark, treo-color('cool-gray', 200), treo-color('cool-gray', 300)),
|
||||
tooltip: if($is-dark, treo-color('cool-gray', 500), treo-color('cool-gray', 800)),
|
||||
);
|
||||
|
||||
// Store the modified theme.
|
||||
//
|
||||
// Since modifications only being done on 'foreground'
|
||||
// and 'background' palettes, add them from above but
|
||||
// keep everything else original
|
||||
$modified-theme: (
|
||||
primary: map-get($theme, primary),
|
||||
accent: map-get($theme, accent),
|
||||
warn: map-get($theme, warn),
|
||||
is-dark: map-get($theme, is-dark),
|
||||
foreground: $foreground,
|
||||
background: $background
|
||||
);
|
||||
|
||||
// Return the modified theme
|
||||
@return $modified-theme;
|
||||
}
|
||||
|
||||
///
|
||||
/// Generate an Angular Material light theme
|
||||
/// and modify it before returning
|
||||
///
|
||||
/// @access public
|
||||
/// @param {Map} $primary-palette - Desired primary palette
|
||||
/// @param {Map} $accent-palette - Desired accent palette
|
||||
/// @param {Map} $warn-palette - Desired warn palette
|
||||
///
|
||||
@function treo-light-theme($primary-palette, $accent-palette, $warn-palette) {
|
||||
|
||||
// Generate the Angular Material theme
|
||||
$angular-material-theme: mat-light-theme($primary-palette, $accent-palette, $warn-palette);
|
||||
|
||||
// Modify and return the theme
|
||||
@return _treo-modify-angular-material-theme-colors($angular-material-theme);
|
||||
}
|
||||
|
||||
///
|
||||
/// Generate an Angular Material dark theme
|
||||
/// and modify it before returning
|
||||
///
|
||||
/// @access public
|
||||
/// @param {Map} $primary-palette - Desired primary palette
|
||||
/// @param {Map} $accent-palette - Desired accent palette
|
||||
/// @param {Map} $warn-palette - Desired warn palette
|
||||
///
|
||||
@function treo-dark-theme($primary-palette, $accent-palette, $warn-palette) {
|
||||
|
||||
// Generate the Angular Material theme
|
||||
$angular-material-theme: mat-dark-theme($primary-palette, $accent-palette, $warn-palette);
|
||||
|
||||
// Modify and return the theme
|
||||
@return _treo-modify-angular-material-theme-colors($angular-material-theme);
|
||||
}
|
||||
|
||||
///
|
||||
/// Generate an Angular Material compatible palette
|
||||
///
|
||||
/// @access public
|
||||
/// @param {Map} $palette - Name of the palette
|
||||
/// @param {Map} $default - Default hue
|
||||
/// @param {Map} $lighter - Lighter hue
|
||||
/// @param {Map} $darker - Darker hue
|
||||
/// @param {Map} $text - Text color
|
||||
///
|
||||
@function treo-palette($palette, $default: 500, $lighter: 100, $darker: 700, $text: $default) {
|
||||
@return mat-palette(map-get($treo-colors, $palette), $default, $lighter, $darker, $text);
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Mixins
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
///
|
||||
/// Generate color classes
|
||||
///
|
||||
/// @access private
|
||||
/// @param {String} $color-name - Name of the color
|
||||
/// @param {Color} $color - Color
|
||||
/// @param {Color} $contrast-color - Contrasting color of the Color
|
||||
/// @param {String} $hue-value - Hue value of the Color
|
||||
///
|
||||
@mixin _generate-color-classes($color-name, $color, $contrast-color, $hue-value) {
|
||||
|
||||
// Text color
|
||||
.text-#{$color-name}#{$hue-value} {
|
||||
color: $color !important;
|
||||
}
|
||||
|
||||
// Background color
|
||||
.bg-#{$color-name}#{$hue-value} {
|
||||
background: $color !important;
|
||||
}
|
||||
|
||||
// Background and text color
|
||||
.#{$color-name}#{$hue-value} {
|
||||
background: $color !important;
|
||||
color: $contrast-color !important;
|
||||
|
||||
// Icon
|
||||
.mat-icon {
|
||||
color: $contrast-color !important;
|
||||
}
|
||||
|
||||
// Text
|
||||
&.text-secondary,
|
||||
.text-secondary {
|
||||
color: rgba($contrast-color, 0.6) !important;
|
||||
}
|
||||
|
||||
&.text-hint,
|
||||
.text-hint {
|
||||
color: rgba($contrast-color, 0.38) !important;
|
||||
}
|
||||
|
||||
&.text-disabled,
|
||||
.text-disabled {
|
||||
color: rgba($contrast-color, 0.38) !important;
|
||||
}
|
||||
|
||||
&.divider,
|
||||
.divider {
|
||||
color: rgba($contrast-color, 0.12) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Border color
|
||||
.border-#{$color-name}#{$hue-value} {
|
||||
border-color: $color !important;
|
||||
}
|
||||
|
||||
.hover\:border-#{$color-name}#{$hue-value}:hover {
|
||||
border-color: $color !important;
|
||||
}
|
||||
|
||||
.focus\:border-#{$color-name}#{$hue-value}:focus {
|
||||
border-color: $color !important;
|
||||
}
|
||||
|
||||
.active\:border-#{$color-name}#{$hue-value}:active {
|
||||
border-color: $color !important;
|
||||
}
|
||||
}
|
||||
|
||||
///
|
||||
/// Generate helper classes for 'primary', 'accent' and 'warn' colors
|
||||
///
|
||||
/// @access public
|
||||
/// @param {Map} $palettes - Palettes to generate classes for
|
||||
///
|
||||
@mixin treo-color-classes($palettes) {
|
||||
|
||||
// Go through each palette
|
||||
@each $palette-name, $palette in $palettes {
|
||||
|
||||
// Get each hue value
|
||||
@each $hue in (100, 200, 300, 400, 500, 600, 700, 800, 900) {
|
||||
|
||||
// Get color and contrast
|
||||
$color: map-get($palette, $hue);
|
||||
$contrast: map-get($palette, '#{$hue}-contrast');
|
||||
|
||||
// If both color and its contrasting color exist, generate the color classes...
|
||||
@if ($color != null and $contrast != null) {
|
||||
|
||||
// Generate color classes
|
||||
@include _generate-color-classes($palette-name, $color, $contrast, '-#{$hue}');
|
||||
|
||||
// If the hue equals to 500, generate color classes one more time,
|
||||
// but without the hue value suffix
|
||||
@if ($hue == 500) {
|
||||
|
||||
// Generate color classes
|
||||
@include _generate-color-classes($palette-name, $color, $contrast, '');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Mixins
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
///
|
||||
/// Adds an elevation from pre-defined elevations map. Elevation values are the same
|
||||
/// as default TailwindCSS elevations to keep things consistent.
|
||||
///
|
||||
/// @access public
|
||||
/// @param {String} $elevation - The amount of the elevation that the element will have
|
||||
/// @param {Boolean} $important - Whether to add an !important tag to the shadow rule
|
||||
/// @param {Color} $color - Color of the shadow
|
||||
///
|
||||
@mixin treo-elevation($elevation: 'default', $important: false, $color: rgb(0, 0, 0)) {
|
||||
|
||||
// Get the shadow value
|
||||
$shadow: map-get($treo-elevations, $elevation);
|
||||
|
||||
// Throw an error if the shadow does not exist
|
||||
@if ($shadow == null) {
|
||||
@error 'Elevation `' + $elevation + '` does not exists!';
|
||||
}
|
||||
|
||||
box-shadow: #{$shadow} if($important, !important, null);
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Mixins
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
///
|
||||
/// Correctly sets the icon size
|
||||
///
|
||||
/// @access public
|
||||
/// @param {String} $size - Size of the icon (px)
|
||||
/// @param {Boolean} $important - Set the '!important' tag on the rules
|
||||
///
|
||||
@mixin treo-icon-size($size, $important: false) {
|
||||
width: #{($size) + 'px'} if($important, !important, null);
|
||||
height: #{($size) + 'px'} if($important, !important, null);
|
||||
min-width: #{($size) + 'px'} if($important, !important, null);
|
||||
min-height: #{($size) + 'px'} if($important, !important, null);
|
||||
font-size: #{($size) + 'px'} if($important, !important, null);
|
||||
line-height: #{($size) + 'px'} if($important, !important, null);
|
||||
|
||||
svg {
|
||||
width: #{($size) + 'px'} if($important, !important, null);
|
||||
height: #{($size) + 'px'} if($important, !important, null);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Rotation - animation: rotation 8s infinite linear;
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
@keyframes rotation {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Mixins
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
///
|
||||
/// Go through the each defined theme and apply it to whatever content this mixin has
|
||||
///
|
||||
/// @access public
|
||||
/// @param {Boolean} $encapsulated - Should the generated rules compatible with encapsulated components?
|
||||
///
|
||||
@mixin treo-theme($encapsulated: false) {
|
||||
|
||||
@each $class-name, $theme in $treo-themes {
|
||||
|
||||
// Set the theme as global so it can be accessible from outside
|
||||
$theme: $theme !global;
|
||||
|
||||
// If encapsulated...
|
||||
@if ($encapsulated) {
|
||||
|
||||
// Do everything inside a host context
|
||||
:host-context(.#{$class-name}) {
|
||||
@content;
|
||||
}
|
||||
|
||||
} @else {
|
||||
|
||||
// Do everything openly
|
||||
.#{$class-name} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
// Include core Angular Material styles from '~@angular/material/theming'
|
||||
@include mat-core();
|
||||
@@ -0,0 +1,350 @@
|
||||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/* Document
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Correct the line height in all browsers.
|
||||
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
||||
*/
|
||||
|
||||
html {
|
||||
line-height: 1.15; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the margin in all browsers.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the `main` element consistently in IE.
|
||||
*/
|
||||
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the font size and margin on `h1` elements within `section` and
|
||||
* `article` contexts in Chrome, Firefox, and Safari.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
//font-size: 2em;
|
||||
//margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in Firefox.
|
||||
* 2. Show the overflow in Edge and IE.
|
||||
*/
|
||||
|
||||
hr {
|
||||
box-sizing: content-box; /* 1 */
|
||||
height: 0; /* 1 */
|
||||
overflow: visible; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the gray background on active links in IE 10.
|
||||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in Chrome 57-
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none; /* 1 */
|
||||
text-decoration: underline; /* 2 */
|
||||
-webkit-text-decoration: underline dotted;
|
||||
text-decoration: underline dotted; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||
* all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the border on images inside links in IE 10.
|
||||
*/
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Change the font styles in all browsers.
|
||||
* 2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
line-height: 1.15; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the overflow in IE.
|
||||
* 1. Show the overflow in Edge.
|
||||
*/
|
||||
|
||||
button,
|
||||
input { /* 1 */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
* 1. Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select { /* 1 */
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
[type='button'],
|
||||
[type='reset'],
|
||||
[type='submit'] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner border and padding in Firefox.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type='button']::-moz-focus-inner,
|
||||
[type='reset']::-moz-focus-inner,
|
||||
[type='submit']::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
|
||||
button:-moz-focusring,
|
||||
[type='button']:-moz-focusring,
|
||||
[type='reset']:-moz-focusring,
|
||||
[type='submit']:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the padding in Firefox.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
padding: 0.35em 0.75em 0.625em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the text wrapping in Edge and IE.
|
||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
* 3. Remove the padding so developers are not caught out when they zero out
|
||||
* `fieldset` elements in all browsers.
|
||||
*/
|
||||
|
||||
legend {
|
||||
box-sizing: border-box; /* 1 */
|
||||
color: inherit; /* 2 */
|
||||
display: table; /* 1 */
|
||||
max-width: 100%; /* 1 */
|
||||
padding: 0; /* 3 */
|
||||
white-space: normal; /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE 10+.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in IE 10.
|
||||
* 2. Remove the padding in IE 10.
|
||||
*/
|
||||
|
||||
[type='checkbox'],
|
||||
[type='radio'] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
*/
|
||||
|
||||
[type='number']::-webkit-inner-spin-button,
|
||||
[type='number']::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the odd appearance in Chrome and Safari.
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
[type='search'] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner padding in Chrome and Safari on macOS.
|
||||
*/
|
||||
|
||||
[type='search']::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/* Interactive
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Add the correct display in Edge, IE 10+, and Firefox.
|
||||
*/
|
||||
|
||||
details {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Add the correct display in all browsers.
|
||||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/* Misc
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10+.
|
||||
*/
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
Reference in New Issue
Block a user