Telerik
/
kendo-theme-default
зеркало из https://github.com/telerik/kendo-theme-default.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

chore: organize imports

This commit is contained in:
joneff 2016-11-08 11:41:01 +02:00 коммит произвёл Alex Gyoshev
Родитель 2368682a1a
Коммит 123de11c49
46 изменённых файлов: 897 добавлений и 773 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

3
build/data-uri.template
Просмотреть файл

@ -1,5 +1,4 @@
@import '../../mixins/import-once';
@import '../../mixins/data-uri';
@import '../../mixins/core/all';
@include exports('<FILENAME>') {
@include register-data-uri('<FILENAME>', 'data:<MIME>;base64,<BASE64>')

164
src/_variables.scss
Просмотреть файл

@ -26,3 +26,167 @@ $series-f: #aa46be !default;
$base-font-size: 14px !default;
$base-font-family: inherit !default;
/////////////////////////////////////////////////
$font-size: 14px !default;
$font-family: inherit !default;
$spacer: 1em !default;
$padding-x: 14px !default;
$padding-y: 7px !default;
$border-radius: 2px !default;
$accent: #ff6358 !default;
$accent-contrast: #ffffff !default;
$text-color: #656565 !default;
$bg-color: #ffffff !default;
$border-color: darken($bg-color, 3%) !default;
$base-text: #656565 !default;
$base-bg: #f6f6f6 !default;
$base-border: darken($base-bg, 3%) !default;
$hover-text: #656565 !default;
$hover-bg: #ededed !default;
$hover-border: darken($hover-bg, 3%) !default;
$selected-text: $accent-contrast !default;
$selected-bg: $accent !default;
$selected-border: darken($selected-bg, 3%) !default;
$transition: background-color .2s ease !default;
$error: #f31700 !default;
$warning: #ffc000 !default;
$success: #37b400 !default;
$info: #0058e9 !default;
$series-a: #ff6358 !default;
$series-b: #ffd246 !default;
$series-c: #78d237 !default;
$series-d: #28b4c8 !default;
$series-e: #2d73f5 !default;
$series-f: #aa46be !default;
// Widget
$widget-text: $text-color !default;
$widget-bg: $bg-color !default;
$widget-border: darken( $widget-bg, 2 ) !default;
// Panel
$panel-text: $widget-text !default;
$panel-bg: $widget-bg !default;
$panel-border: darken( $panel-bg, 2 ) !default;
// Popup
$popup-text: $widget-text !default;
$popup-bg: $widget-bg !default;
$popup-border: darken( $popup-bg, 2 ) !default;
// Header
$header-text: $base-text !default;
$header-bg: $base-bg !default;
$header-border: darken( $header-bg, 2 ) !default;
$header-gradient: null !default;
$header-hover-text: $hover-text !default;
$header-hover-bg: $hover-bg !default;
$header-hover-border: darken( $header-hover-bg, 2 ) !default;
$header-hover-gradient: null !default;
$header-selected-text: $selected-text !default;
$header-selected-bg: $selected-bg !default;
$header-selected-border: darken( $header-selected-bg, 2 ) !default;
$header-selected-gradient: null !default;
// Button
$button-text: $base-text !default;
$button-bg: $base-bg !default;
$button-border: darken( $button-bg, 2 ) !default;
$button-gradient: null !default;
$button-hover-text: $hover-text !default;
$button-hover-bg: $hover-bg !default;
$button-hover-border: darken( $button-hover-bg, 2 ) !default;
$button-hover-gradient: null !default;
$button-pressed-text: $selected-text !default;
$button-pressed-bg: $selected-bg !default;
$button-pressed-border: darken( $button-pressed-bg, 2 ) !default;
$button-pressed-gradient: null !default;
// Input
$input-text: $panel-text !default;
$input-bg: $panel-bg !default;
$input-border: $button-border !default;
$input-hover-text: $input-text !default;
$input-hover-bg: $input-bg !default;
$input-hover-border: $button-hover-border !default;
$input-focused-text: $input-text !default;
$input-focused-bg: $input-bg !default;
$input-focused-border: $button-pressed-border !default;
// Node
$node-text: $button-text !default;
$node-bg: $button-bg !default;
$node-border: darken( $node-bg, 2) !default;
$node-gradient: null !default;
$node-hover-text: $button-hover-text !default;
$node-hover-bg: $button-hover-bg !default;
$node-hover-border: darken( $node-hover-bg, 2 ) !default;
$node-hover-gradient: null !default;
$node-selected-text: $button-pressed-text !default;
$node-selected-bg: $button-pressed-bg !default;
$node-selected-border: darken( $node-selected-bg, 2 ) !default;
$node-selected-gradient: null !default;
// List
$list-text: $node-text !default;
$list-bg: $node-bg !default;
$list-hover-text: $node-hover-text !default;
$list-hover-bg: $node-hover-bg !default;
$list-selected-text: $node-selected-text !default;
$list-selected-bg: $node-selected-bg !default;
// Color maps
$widget-colors: ( $widget-text, $widget-bg, $widget-border );
$panel-colors: ( $panel-text, $panel-bg, $panel-border );
$popup-colors: ( $popup-text, $popup-bg, $popup-border );
$header-colors: ( $header-text, $header-bg, $header-border );
$header-hover-colors: ( $header-hover-text, $header-hover-bg, $header-hover-border );
$header-selected-colors: ( $header-selected-text, $header-selected-bg, $header-selected-border );
$button-colors: ( $button-text, $button-bg, $button-border );
$button-hover-colors: ( $button-hover-text, $button-hover-bg, $button-hover-border );
$button-pressed-colors: ( $button-pressed-text, $button-pressed-bg, $button-pressed-border );
$input-colors: ( $input-text, $input-bg, $input-border );
$input-hover-colors: ( $input-hover-text, $input-hover-bg, $input-hover-border );
$input-focused-colors: ( $input-focused-text, $input-focused-bg, $input-focused-border );
$node-colors: ( $node-text, $node-bg, $node-border );
$node-hover-colors: ( $node-hover-text, $node-hover-bg, $node-hover-border );
$node-selected-colors: ( $node-selected-text, $node-selected-bg, $node-selected-border );
$list-colors: ( $list-text, $list-bg, null );
$list-hover-colors: ( $list-hover-text, $list-hover-bg, null );
$list-selected-colors: ( $list-selected-text, $list-selected-bg, null );

2
src/action-buttons/main.scss
Просмотреть файл

@ -1,3 +1,3 @@
@import '../variables';
@import '../mixins/import-once';
@import '../mixins/all';
@import 'theme';

2
src/animation/main.scss
Просмотреть файл

@ -1,3 +1,3 @@
@import '../mixins/import-once';
@import '../mixins/all';
@import 'container';
@import 'effect';

2
src/button/main.scss
Просмотреть файл

@ -1,3 +1,3 @@
@import '../variables';
@import '../mixins/import-once';
@import '../mixins/all';
@import 'theme';

257
src/calendar/_layout.scss
Просмотреть файл

@ -1,128 +1,155 @@
@import '../base/layout';
@import '../icons/main';
$calendar-cell-padding-y: .25rem !default;
$calendar-cell-padding-x: .25rem !default;
$calendar-line-height: 1.25 !default;
@include exports('calendar/layout') {
.k-calendar {
position: relative;
display: inline-block;
width: 16.917em;
overflow: hidden;
border-width: 1px;
border-style: solid;
td,
.k-link {
text-decoration: none;
}
.k-action-link {
text-decoration: underline;
}
.k-header,
.k-footer {
// Base
.k-calendar {
width: 16.917em;
position: relative;
text-align: center;
}
.k-nav-prev,
.k-nav-next {
position: absolute;
top: .16666em;
line-height: 1.8333em;
height: 1.8333em;
}
.k-nav-prev { left: 1%; }
.k-nav-next { right: 1%; }
.k-content {
border-spacing: 0;
width: 100%;
height: 14.167em;
border-width: 0;
margin: 0;
table-layout: fixed;
outline: 0;
}
.k-content,
.k-content th {
text-align: right;
}
.k-animation-container .k-content {
height: 100%;
}
.k-nav-fast {
display: inline-block;
width: 75%;
height: 1.8333em;
line-height: 1.8333em;
margin: .16666em -.08333em .3333em 0;
}
.k-header {
.k-icon {
vertical-align: middle;
}
.k-link.k-nav-prev,
.k-link.k-nav-next {
height: 1.8333em;
width: 1.8333em;
}
}
th {
border-bottom-style: solid;
border-bottom-width: 1px;
padding: .4em .45em .4em .1em;
font-weight: normal;
cursor: default;
}
td {
padding: .08333em;
cursor: pointer;
}
.k-state-focus {
border-style: dotted;
border-width: .08333em;
padding: 0;
}
.k-content .k-link {
display: block;
display: inline-flex;
flex-direction: column;
overflow: hidden;
min-height: 1.8333em;
line-height: 1.8333em;
padding: 0 .45em 0 .1em;
}
.k-meta-view .k-link {
padding: .25em 0 .3em;
text-align: center;
}
.k-footer {
clear: both;
.k-nav-today,
> .k-state-disabled {
// Common
.k-link {
padding: $calendar-cell-padding-y $calendar-cell-padding-x;
color: inherit;
line-height: $calendar-line-height;
text-decoration: none;
display: block;
height: 100%;
padding: .5em 0;
}
th {
border-width: 0 0 1px;
border-style: solid;
padding: $calendar-cell-padding-y $calendar-cell-padding-x;
font-weight: normal;
cursor: default;
}
td {
border-width: 1px;
border-style: solid;
cursor: pointer;
}
// Header / footer
& {
.k-header,
.k-footer {
padding: $calendar-cell-padding-y;
text-align: center;
display: flex;
flex-direction: row;
position: relative;
.k-link {
@include border-radius( $border-radius );
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
}
// Footer
.k-footer {
clear: both;
}
// Previous / next
.k-nav-prev,
.k-nav-next {
padding: $calendar-cell-padding-y;
width: $calendar-line-height * 1em;
height: $calendar-line-height * 1em;
box-sizing: content-box;
}
.k-nav-prev { left: $calendar-cell-padding-y; }
.k-nav-next { right: $calendar-cell-padding-y; }
// Fast navigation
.k-nav-fast {
margin: 0 $calendar-cell-padding-y;
flex: 1;
}
// Today
.k-nav-today {
flex: 1;
}
}
// Content
& {
.k-content {
margin: 0;
width: 100%;
height: 14.167em;
border-width: 0;
border-spacing: 0;
border-collapse: separate;
table-layout: fixed;
float: left;
outline: 0;
}
.k-content,
.k-content th {
text-align: right;
}
.k-content td {
@include border-radius( $border-radius );
border-color: transparent;
}
.k-animation-container .k-content {
height: 100%;
}
.k-content .k-link {
overflow: hidden;
}
.k-weekend,
.k-other-month {
opacity: .6;
}
}
// Meta view
.k-meta-view .k-link {
text-align: center;
}
}
// Calendar container
.k-calendar-container {
padding: 0;
.k-calendar {
border-width: 0;
}
}
.k-nav-today:hover {
text-decoration: underline;
}
}
}
}

1
src/calendar/_theme.scss
Просмотреть файл

@ -1,7 +1,6 @@
@import '../base/states';
@import '../animation/main';
@import './layout';
@import '../mixins/blend-modes';
@include exports('calendar/theme') {

2
src/calendar/main.scss
Просмотреть файл

@ -1,3 +1,3 @@
@import '../variables';
@import '../mixins/import-once';
@import '../mixins/all';
@import 'theme';

2
src/charts/main.scss
Просмотреть файл

@ -1,3 +1,3 @@
@import '../variables';
@import '../mixins/import-once';
@import '../mixins/all';
@import 'theme';

2
src/dialog/main.scss
Просмотреть файл

@ -1,3 +1,3 @@
@import '../variables';
@import '../mixins/import-once';
@import '../mixins/all';
@import 'theme';

2
src/dropdowns/main.scss
Просмотреть файл

@ -1,3 +1,3 @@
@import '../variables';
@import '../mixins/import-once';
@import '../mixins/all';
@import 'theme';

2
src/example/main.scss
Просмотреть файл

@ -1,3 +1,3 @@
@import '../variables';
@import '../mixins/import-once';
@import '../mixins/all';
@import 'theme';

1
src/grid/_theme.scss
Просмотреть файл

@ -1,6 +1,5 @@
@import '../base/states';
@import './layout';
@import '../mixins/blend-modes';
$grid-header-color: $accent !default;
$grid-color: $normal-text-color !default;

2
src/grid/main.scss
Просмотреть файл

@ -1,3 +1,3 @@
@import '../variables';
@import '../mixins/import-once';
@import '../mixins/all';
@import 'theme';

3
src/icons/font/KendoUIGlyphs.scss
Просмотреть файл

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

2
src/icons/main.scss
Просмотреть файл

@ -1,4 +1,4 @@
@import '../mixins/import-once';
@import '../mixins/all';
@import './font/KendoUIGlyphs';
$icon-size: 16px !default;

11
src/mixins/_all.scss
Просмотреть файл

@ -1,12 +1,13 @@
// Core
@import "import-once";
@import "placeholder-selectors";
@import "core/import-once";
@import "core/placeholder-selectors";
@import "core/data-uri";
// Utils
@import "utils/all";
@import "decoration";
@import "compact";
@import "utils/decoration";
@import "utils/compact";
@import "utils/blend-modes";
// Appearance

533
src/mixins/_blend-modes.scss
Просмотреть файл

@ -1,533 +0,0 @@
@import '../mixins/import-once';
// SCSS blend modes, https://github.k-com/heygrady/scss-blend-modes
// Import the Compass Plugin
//--------------------------------
// Normal
//--------------------------------
@function blend-normal ($foreground, $background) {
$opacity: opacity($foreground);
$background-opacity: opacity($background);
// calculate opacity
$bm-red: red($foreground) * $opacity + red($background) * $background-opacity * (1 - $opacity);
$bm-green: green($foreground) * $opacity + green($background) * $background-opacity * (1 - $opacity);
$bm-blue: blue($foreground) * $opacity + blue($background) * $background-opacity * (1 - $opacity);
@return rgb($bm-red, $bm-green, $bm-blue);
}
//--------------------------------
// Multiply
//--------------------------------
@function blend-multiply ($foreground, $background) {
$bm-red: red($background) * red($foreground) / 255;
$bm-green: green($background) * green($foreground) / 255;
$bm-blue: blue($background) * blue($foreground) / 255;
@return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
}
//--------------------------------
// Lighten
//--------------------------------
@function blend-lighten ($foreground, $background) {
$bm-red: blend-lighten-color(red($foreground), red($background));
$bm-green: blend-lighten-color(green($foreground), green($background));
$bm-blue: blend-lighten-color(blue($foreground), blue($background));
@return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
}
@function blend-lighten-color($foreground, $background) {
@if $background > $foreground {
$foreground: $background;
}
@return $foreground;
}
//--------------------------------
// Darken
//--------------------------------
@function blend-darken ($foreground, $background) {
$bm-red: blend-darken-color(red($foreground), red($background));
$bm-green: blend-darken-color(green($foreground), green($background));
$bm-blue: blend-darken-color(blue($foreground), blue($background));
@return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
}
@function blend-darken-color($foreground, $background) {
@if $background < $foreground {
$foreground: $background;
}
@return $foreground;
}
//--------------------------------
// Darker Color
//--------------------------------
@function blend-darkercolor ($foreground, $background) {
$bm-red: red($foreground);
$bm-green: green($foreground);
$bm-blue: blue($foreground);
$background-red: red($background);
$background-green: green($background);
$background-blue: blue($background);
@if $background-red * 0.3 + $background-green * 0.59 + $background-blue * 0.11 <= $bm-red * 0.3 + $bm-green * 0.59 + $bm-blue * 0.11 {
$bm-red: $background-red;
$bm-green: $background-green;
$bm-blue: $background-blue;
}
@return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
}
//--------------------------------
// Lighter Color
//--------------------------------
@function blend-lightercolor ($foreground, $background) {
$bm-red: red($foreground);
$bm-green: green($foreground);
$bm-blue: blue($foreground);
$background-red: red($background);
$background-green: green($background);
$background-blue: blue($background);
@if $background-red * 0.3 + $background-green * 0.59 + $background-blue * 0.11 > $bm-red * 0.3 + $bm-green * 0.59 + $bm-blue * 0.11 {
$bm-red: $background-red;
$bm-green: $background-green;
$bm-blue: $background-blue;
}
@return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
}
//--------------------------------
// Linear Dodge
//--------------------------------
@function blend-lineardodge ($foreground, $background) {
$bm-red: blend-lineardodge-color(red($foreground), red($background));
$bm-green: blend-lineardodge-color(green($foreground), green($background));
$bm-blue: blend-lineardodge-color(blue($foreground), blue($background));
@return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
}
@function blend-lineardodge-color($foreground, $background) {
@if $background + $foreground > 255 {
$foreground: 255;
}
@else {
$foreground: $background + $foreground;
}
@return $foreground;
}
//--------------------------------
// Linear Burn
//--------------------------------
@function blend-linearburn ($foreground, $background) {
$bm-red: blend-linearburn-color(red($foreground), red($background));
$bm-green: blend-linearburn-color(green($foreground), green($background));
$bm-blue: blend-linearburn-color(blue($foreground), blue($background));
@return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
}
@function blend-linearburn-color($foreground, $background) {
@if $background + $foreground < 255 {
$foreground: 0;
}
@else {
$foreground: $background + $foreground - 255;
}
@return $foreground;
}
//--------------------------------
// Difference
//--------------------------------
@function blend-difference ($foreground, $background) {
$bm-red: abs(red($background) - red($foreground));
$bm-green: abs(green($background) - green($foreground));
$bm-blue: abs(blue($background) - blue($foreground));
@return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
}
//--------------------------------
// Screen
//--------------------------------
@function blend-screen ($foreground, $background) {
$bm-red: blend-screen-color(red($foreground), red($background));
$bm-green: blend-screen-color(green($foreground), green($background));
$bm-blue: blend-screen-color(blue($foreground), blue($background));
@return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
}
@function blend-screen-color($foreground, $background) {
@return (255 - ( ( (255 - $foreground) * (255 - $background)) / 256));
}
//--------------------------------
// Exclusion
//--------------------------------
@function blend-exclusion ($foreground, $background) {
$bm-red: blend-exclusion-color(red($foreground), red($background));
$bm-green: blend-exclusion-color(green($foreground), green($background));
$bm-blue: blend-exclusion-color(blue($foreground), blue($background));
@return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
}
@function blend-exclusion-color($foreground, $background) {
@return $background - ($background * (2 / 255) - 1) * $foreground;
}
//--------------------------------
// Overlay
//--------------------------------
@function blend-overlay ($foreground, $background) {
$bm-red: blend-overlay-color(red($foreground), red($background));
$bm-green: blend-overlay-color(green($foreground), green($background));
$bm-blue: blend-overlay-color(blue($foreground), blue($background));
@return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
}
@function blend-overlay-color($foreground, $background) {
@if $background <= 255 / 2 {
$foreground: (2 * $background * $foreground) / 255;
} @else {
$foreground: 255 - (255 - 2 * ($background - (255 / 2))) * (255 - $foreground) / 255;
}
@return $foreground;
}
//--------------------------------
// Soft Light
//--------------------------------
@function blend-softlight ($foreground, $background) {
$bm-red: blend-softlight-color(red($foreground), red($background));
$bm-green: blend-softlight-color(green($foreground), green($background));
$bm-blue: blend-softlight-color(blue($foreground), blue($background));
@return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
}
@function blend-softlight-color($foreground, $background) {
@if $background < 128 {
$foreground: (($foreground / 2) + 64) * $background * (2 / 255);
} @else {
$foreground: 255 - (191 - ($foreground / 2)) * (255 - $background) * (2 / 255);
}
@return $foreground;
}
//--------------------------------
// Hard Light
//--------------------------------
@function blend-hardlight ($foreground, $background) {
$bm-red: blend-hardlight-color(red($foreground), red($background));
$bm-green: blend-hardlight-color(green($foreground), green($background));
$bm-blue: blend-hardlight-color(blue($foreground), blue($background));
@return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
}
@function blend-hardlight-color($foreground, $background) {
$tmp-blend: $foreground;
@if $tmp-blend < 128 {
$foreground: $background * $tmp-blend * (2 / 255);
} @else {
$foreground: 255 - (255-$background) * (255-$tmp-blend) * (2 / 255);
}
@return $foreground;
}
//--------------------------------
// Color Dodge
//--------------------------------
@function blend-colordodge ($foreground, $background) {
$bm-red: blend-colordodge-color(red($foreground), red($background));
$bm-green: blend-colordodge-color(green($foreground), green($background));
$bm-blue: blend-colordodge-color(blue($foreground), blue($background));
@return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
}
@function blend-colordodge-color($foreground, $background) {
$tmp: $background * 256 / (255 - $foreground);
@if $tmp > 255 or $foreground == 255 {
$foreground: 255;
} @else {
$foreground: $tmp;
}
@return $foreground;
}
//--------------------------------
// Color Burn
//--------------------------------
@function blend-colorburn ($foreground, $background) {
$bm-red: blend-colorburn-color(red($foreground), red($background));
$bm-green: blend-colorburn-color(green($foreground), green($background));
$bm-blue: blend-colorburn-color(blue($foreground), blue($background));
@return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
}
@function blend-colorburn-color($foreground, $background) {
$tmp: (255 - ((255 - $background) * 255) / $foreground);
// TODO: hacked to replicate photoshop
@if $foreground == 0 {
$foreground: 255;
} @elseif $tmp < 0 {
$foreground: 0;
} @else {
$foreground: $tmp;
}
@return $foreground;
}
//--------------------------------
// Linear Light
//--------------------------------
@function blend-linearlight ($foreground, $background) {
$bm-red: blend-linearlight-color(red($foreground), red($background));
$bm-green: blend-linearlight-color(green($foreground), green($background));
$bm-blue: blend-linearlight-color(blue($foreground), blue($background));
@return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
}
@function blend-linearlight-color($foreground, $background) {
@if $foreground < 128 {
$foreground: blend-linearburn-color($background, 2 * $foreground);
} @else {
$foreground: blend-lineardodge-color($background, 2 * ($foreground - 128));
}
@return $foreground;
}
//--------------------------------
// Vivid Light
//--------------------------------
@function blend-vividlight ($foreground, $background) {
$bm-red: blend-vividlight-color(red($foreground), red($background));
$bm-green: blend-vividlight-color(green($foreground), green($background));
$bm-blue: blend-vividlight-color(blue($foreground), blue($background));
@return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
}
@function blend-vividlight-color($foreground, $background) {
@if $foreground < 128 {
$foreground: blend-colorburn-color(2 * $foreground, $background);
} @else {
$foreground: blend-colordodge-color(2 * ($foreground - 128), $background);
}
@return $foreground;
}
//--------------------------------
// Pin Light
//--------------------------------
@function blend-pinlight ($foreground, $background) {
$bm-red: blend-pinlight-color(red($foreground), red($background));
$bm-green: blend-pinlight-color(green($foreground), green($background));
$bm-blue: blend-pinlight-color(blue($foreground), blue($background));
@return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
}
@function blend-pinlight-color($foreground, $background) {
@if $foreground < 128 {
$foreground: blend-darken-color($background, 2 * $foreground);
} @else {
$foreground: blend-lighten-color($background, 2 * ($foreground - 128));
}
@return $foreground;
}
//--------------------------------
// Hard Mix
//--------------------------------
@function blend-hardmix ($foreground, $background) {
$bm-red: blend-hardmix-color(red($foreground), red($background));
$bm-green: blend-hardmix-color(green($foreground), green($background));
$bm-blue: blend-hardmix-color(blue($foreground), blue($background));
@return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
}
@function blend-hardmix-color($foreground, $background) {
$tmp: blend-vividlight-color($foreground, $background);
@if $tmp < 128 {
$foreground: 0;
} @else {
$foreground: 255;
}
@return $foreground;
}
// Unique to Photoshop
//--------------------------------
// Color Blend
//--------------------------------
@function blend-colorblend ($foreground, $background) {
$foreground-hsv: color-to-hsv($foreground);
$background-hsv: color-to-hsv($background);
$bm-hsv: nth($foreground-hsv, 1), nth($foreground-hsv, 2), nth($background-hsv, 3);
$bm-color: hsv-to-color($bm-hsv);
@return blend-normal(rgba(red($bm-color), green($bm-color), blue($bm-color), opacity($foreground)), $background);
}
//--------------------------------
// Dissolve
//--------------------------------
@function blend-dissolve ($foreground, $background) {
// The Dissolve blend mode acts on transparent and partially transparent pixels
// it treats transparency as a pixel pattern and applies a diffusion dither pattern.
// @see http://photoblogstop.k-com/photoshop/photoshop-blend-modes-explained
@return $foreground;
}
//--------------------------------
// Divide
//--------------------------------
@function blend-divide ($foreground, $background) {
$bm-red: blend-divide-colors(red($foreground), red($background));
$bm-green: blend-divide-colors(green($foreground), green($background));
$bm-blue:blend-divide-colors(blue($foreground), blue($background));
@return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
}
@function blend-divide-colors($foreground, $background) {
@return min((($background / 255) / ($foreground / 255)) * 255, 255);
}
//--------------------------------
// Hue
//--------------------------------
@function blend-hue ($foreground, $background) {
$foreground-hsv: color-to-hsv($foreground);
$background-hsv: color-to-hsv($background);
$bm-hsv: nth($foreground-hsv, 1), nth($background-hsv, 2), nth($background-hsv, 3);
$bm-color: hsv-to-color($bm-hsv);
@return blend-normal(rgba(red($bm-color), green($bm-color), blue($bm-color), opacity($foreground)), $background);
}
//--------------------------------
// Luminosity
//--------------------------------
@function blend-luminosity ($foreground, $background) {
$foreground-hsv: color-to-hsv($foreground);
$background-hsv: color-to-hsv($background);
$bm-hsv: nth($background-hsv, 1), nth($background-hsv, 2), nth($foreground-hsv, 3);
$bm-color: hsv-to-color($bm-hsv);
@return blend-normal(rgba(red($bm-color), green($bm-color), blue($bm-color), opacity($foreground)), $background);
}
//--------------------------------
// Saturation
//--------------------------------
@function blend-saturation ($foreground, $background) {
$foreground-hsv: color-to-hsv($foreground);
$background-hsv: color-to-hsv($background);
$bm-hsv: nth($background-hsv, 1), nth($foreground-hsv, 2), nth($background-hsv, 3);
$bm-color: hsv-to-color($bm-hsv);
@return blend-normal(rgba(red($bm-color), green($bm-color), blue($bm-color), opacity($foreground)), $background);
}
//--------------------------------
// Subtract
//--------------------------------
@function blend-subtract ($foreground, $background) {
$bm-red: max(red($background) - red($foreground), 0);
$bm-green: max(green($background) - green($foreground), 0);
$bm-blue: max(blue($background) - blue($foreground), 0);
@return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
}
//--------------------------------
// HSL and HSV
//--------------------------------
// @see https://gist.k-github.k-com/1069204
@function hsv-to-hsl($h, $s: 0, $v: 0) {
@if type-of($h) == 'list' {
$v: nth($h, 3);
$s: nth($h, 2);
$h: nth($h, 1);
}
@if unit($h) == 'deg' {
$h: 3.1415 * 2 * ($h / 360deg);
}
@if unit($s) == '%' {
$s: 0 + ($s / 100%);
}
@if unit($v) == '%' {
$v: 0 + ($v / 100%);
}
$ss: $s * $v;
$ll: (2 - $s) * $v;
@if $ll <= 1 and $ll != 0 {
$ss: $ss / $ll;
} @else if ($ll == 2) {
$ss: 0;
} @else {
$ss: $ss / (2 - $ll);
}
$ll: $ll / 2;
@return 360deg * $h / (3.1415 * 2), percentage(max(0, min(1, $ss))), percentage(max(0, min(1, $ll)));
}
@function hsl-to-hsv($h, $ss: 0, $ll: 0) {
@if type-of($h) == 'list' {
$ll: nth($h, 3);
$ss: nth($h, 2);
$h: nth($h, 1);
} @else if type-of($h) == 'color' {
$ll: lightness($h);
$ss: saturation($h);
$h: hue($h);
}
@if unit($h) == 'deg' {
$h: 3.1415 * 2 * ($h / 360deg);
}
@if unit($ss) == '%' {
$ss: 0 + ($ss / 100%);
}
@if unit($ll) == '%' {
$ll: 0 + ($ll / 100%);
}
$ll: $ll * 2;
@if $ll <= 1 {
$ss: $ss * $ll;
} @else {
$ss: $ss * (2 - $ll);
}
$v: ($ll + $ss) / 2;
$s: if($ll + $ss == 0, 0, (2 * $ss) / ($ll + $ss));
@return 360deg * $h / (3.1415 * 2), percentage(max(0, min(1, $s))), percentage(max(0, min(1, $v)));
}
@function color-to-hsv($color) {
@return hsl-to-hsv($color);
}
@function hsv-to-color($h, $s: 0, $v: 0) {
$hsl: hsv-to-hsl($h, $s, $v);
@return hsl(nth($hsl, 1), nth($hsl, 2), nth($hsl, 3));
}

26
src/mixins/appearance/_all.scss
Просмотреть файл

@ -24,9 +24,6 @@
@if ( $what == selected-header ) {
@include appearance_selected-header;
}
@if ( $what == disabled-header ) {
@include appearance_disabled-header;
}
// Button
@ -36,11 +33,8 @@
@if ( $what == hovered-button ) {
@include appearance_hovered-button;
}
@if ( $what == active-button ) {
@include appearance_active-button;
}
@if ( $what == disabled-button ) {
@include appearance_disabled-button;
@if ( $what == pressed-button ) {
@include appearance_pressed-button;
}
@ -51,11 +45,8 @@
@if ( $what == hovered-primary-button ) {
@include appearance_hovered-primary-button;
}
@if ( $what == active-primary-button ) {
@include appearance_active-primary-button;
}
@if ( $what == disabled-primary-button ) {
@include appearance_disabled-primary-button;
@if ( $what == pressed-primary-button ) {
@include appearance_pressed-primary-button;
}
@ -69,9 +60,6 @@
@if ( $what == focused-input ) {
@include appearance_focused-input;
}
@if ( $what == disabled-input ) {
@include appearance_disabled-input;
}
// Node
@ -84,9 +72,6 @@
@if ( $what == selected-node ) {
@include appearance_selected-node;
}
@if ( $what == disabled-node ) {
@include appearance_disabled-node;
}
// List item
@ -99,8 +84,5 @@
@if ( $what == selected-list-item ) {
@include appearance_selected-list-item;
}
@if ( $what == disabled-list-item ) {
@include appearance_disabled-list-item;
}
}

46
src/mixins/appearance/_button.scss
Просмотреть файл

@ -3,53 +3,41 @@ $_button-imported: false !default;
@if ( $_button-imported == false ) {
%appearance_button {
// color: $button-color;
// color: $button-text;
// background-color: $button-bg;
// border-color: $button-border;
// @include linear-gradient( $button-gradient );
}
%appearance_hovered-button {
// color: $button-hovered-color;
// color: $button-hovered-text;
// background-color: $button-hovered-bg;
// border-color: $button-hovered-border;
// @include linear-gradient( $button-hovered-gradient );
}
%appearance_active-button {
// color: $button-active-color;
// background-color: $button-active-bg;
// border-color: $button-active-border;
// @include linear-gradient( $button-active-gradient );
}
%appearance_disabled-button {
// color: $button-disabled-color;
// background-color: $button-disabled-bg;
// border-color: $button-disabled-border;
// @include linear-gradient( $button-disabled-gradient );
%appearance_pressed-button {
// color: $button-pressed-text;
// background-color: $button-pressed-bg;
// border-color: $button-pressed-border;
// @include linear-gradient( $button-pressed-gradient );
}
%appearance_primary-button {
// color: $primary-button-color;
// color: $primary-button-text;
// background-color: $primary-button-bg;
// border-color: $primary-button-border;
// @include linear-gradient( $primary-button-gradient );
}
%appearance_hovered-primary-button {
// color: $primary-button-hovered-color;
// color: $primary-button-hovered-text;
// background-color: $primary-button-hovered-bg;
// border-color: $primary-button-hovered-border;
// @include linear-gradient( $primary-button-hovered-gradient );
}
%appearance_active-primary-button {
// color: $primary-button-active-color;
// background-color: $primary-button-active-bg;
// border-color: $primary-button-active-border;
// @include linear-gradient( $primary-button-active-gradient );
}
%appearance_disabled-primary-button {
// color: $primary-button-disabled-color;
// background-color: $primary-button-disabled-bg;
// border-color: $primary-button-disabled-border;
// @include linear-gradient( $primary-button-disabled-gradient );
%appearance_pressed-primary-button {
// color: $primary-button-pressed-text;
// background-color: $primary-button-pressed-bg;
// border-color: $primary-button-pressed-border;
// @include linear-gradient( $primary-button-pressed-gradient );
}
$_button-imported: true;
@ -59,10 +47,8 @@ $_button-imported: false !default;
@mixin appearance_button { @extend %appearance_button };
@mixin appearance_hovered-button { @extend %appearance_hovered-button };
@mixin appearance_active-button { @extend %appearance_active-button };
@mixin appearance_disabled-button { @extend %appearance_disabled-button };
@mixin appearance_pressed-button { @extend %appearance_pressed-button };
@mixin appearance_primary-button { @extend %appearance_primary-button };
@mixin appearance_hovered-primary-button { @extend %appearance_hovered-primary-button };
@mixin appearance_active-primary-button { @extend %appearance_active-primary-button };
@mixin appearance_disabled-primary-button { @extend %appearance_disabled-primary-button };
@mixin appearance_pressed-primary-button { @extend %appearance_pressed-primary-button };

8
src/mixins/appearance/_input.scss
Просмотреть файл

@ -17,11 +17,6 @@ $_input-imported: false !default;
// background-color: $input-active-bg;
// border-color: $input-active-border;
}
%appearance_disabled-input {
// color: $input-disabled-color;
// background-color: $input-disabled-bg;
// border-color: $input-disabled-border;
}
$_input-imported: true;
@ -30,5 +25,4 @@ $_input-imported: false !default;
@mixin appearance_input { @extend %appearance_input; }
@mixin appearance_hovered-input { @extend %appearance_hovered-input; }
@mixin appearance_focused-input { @extend %appearance_focused-input; }
@mixin appearance_disabled-input { @extend %appearance_disabled-input; }
@mixin appearance_focused-input { @extend %appearance_focused-input; }

14
src/mixins/appearance/_node.scss
Просмотреть файл

@ -20,12 +20,6 @@ $_node-imported: false !default;
// border-color: $node-selected-border;
// @include linear-gradient( $node-selected-gradient );
}
%appearance_disabled-node {
// color: $node-disabled-color;
// background-color: $node-disabled-bg;
// border-color: $node-disabled-border;
// @include linear-gradient( $node-disabled-gradient );
}
%appearance_list-item {
// color: $list-item-color;
@ -39,10 +33,6 @@ $_node-imported: false !default;
// color: $list-item-selected-color;
// background-color: $list-item-selected-bg;
}
%appearance_disabled-list-item {
// color: $list-item-disabled-color;
// background-color: $list-item-disabled-bg;
}
$_node-imported: true;
@ -52,9 +42,7 @@ $_node-imported: false !default;
@mixin appearance_node { @extend %appearance_node };
@mixin appearance_hovered-node { @extend %appearance_hovered-node };
@mixin appearance_selected-node { @extend %appearance_selected-node };
@mixin appearance_disabled-node { @extend %appearance_disabled-node };
@mixin appearance_list-item { @extend %appearance_list-item };
@mixin appearance_hovered-list-item { @extend %appearance_hovered-list-item };
@mixin appearance_selected-list-item { @extend %appearance_selected-list-item };
@mixin appearance_disabled-list-item { @extend %appearance_disabled-list-item };
@mixin appearance_selected-list-item { @extend %appearance_selected-list-item };

9
src/mixins/appearance/_panel.scss
Просмотреть файл

@ -31,12 +31,6 @@ $_panel-imported: false !default;
// border-color: $header-selected-border;
// @include linear-gradient( $header-selected-gradient );
}
%appearance_disabled-header {
// color: $header-disabled-color;
// background-color: $header-disabled-bg;
// border-color: $header-disabled-border;
// @include linear-gradient( $header-disabled-gradient );
}
$_panel-imported: true;
@ -48,5 +42,4 @@ $_panel-imported: false !default;
@mixin appearance_header { @extend %appearance_header };
@mixin appearance_hovered-header { @extend %appearance_hovered-header };
@mixin appearance_selected-header { @extend %appearance_selected-header };
@mixin appearance_disabled-header { @extend %appearance_disabled-header };
@mixin appearance_selected-header { @extend %appearance_selected-header };

3
src/mixins/core/_all.scss Normal file
Просмотреть файл

@ -0,0 +1,3 @@
@import "import-once";
@import "placeholder-selectors";
@import "data-uri";

0
src/mixins/_data-uri.scss → src/mixins/core/_data-uri.scss
Просмотреть файл

0
src/mixins/_import-once.scss → src/mixins/core/_import-once.scss
Просмотреть файл

0
src/mixins/_placeholder-selectors.scss → src/mixins/core/_placeholder-selectors.scss
Просмотреть файл

4
src/mixins/utils/_all.scss
Просмотреть файл

@ -1 +1,3 @@
@import "color-maps";
@import "decoration";
@import "compact";
@import "blend-modes";

531
src/mixins/utils/_blend-modes.scss Normal file
Просмотреть файл

@ -0,0 +1,531 @@
// SCSS blend modes, https://github.k-com/heygrady/scss-blend-modes
// Import the Compass Plugin
//--------------------------------
// Normal
//--------------------------------
@function blend-normal ($foreground, $background) {
$opacity: opacity($foreground);
$background-opacity: opacity($background);
// calculate opacity
$bm-red: red($foreground) * $opacity + red($background) * $background-opacity * (1 - $opacity);
$bm-green: green($foreground) * $opacity + green($background) * $background-opacity * (1 - $opacity);
$bm-blue: blue($foreground) * $opacity + blue($background) * $background-opacity * (1 - $opacity);
@return rgb($bm-red, $bm-green, $bm-blue);
}
//--------------------------------
// Multiply
//--------------------------------
@function blend-multiply ($foreground, $background) {
$bm-red: red($background) * red($foreground) / 255;
$bm-green: green($background) * green($foreground) / 255;
$bm-blue: blue($background) * blue($foreground) / 255;
@return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
}
//--------------------------------
// Lighten
//--------------------------------
@function blend-lighten ($foreground, $background) {
$bm-red: blend-lighten-color(red($foreground), red($background));
$bm-green: blend-lighten-color(green($foreground), green($background));
$bm-blue: blend-lighten-color(blue($foreground), blue($background));
@return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
}
@function blend-lighten-color($foreground, $background) {
@if $background > $foreground {
$foreground: $background;
}
@return $foreground;
}
//--------------------------------
// Darken
//--------------------------------
@function blend-darken ($foreground, $background) {
$bm-red: blend-darken-color(red($foreground), red($background));
$bm-green: blend-darken-color(green($foreground), green($background));
$bm-blue: blend-darken-color(blue($foreground), blue($background));
@return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
}
@function blend-darken-color($foreground, $background) {
@if $background < $foreground {
$foreground: $background;
}
@return $foreground;
}
//--------------------------------
// Darker Color
//--------------------------------
@function blend-darkercolor ($foreground, $background) {
$bm-red: red($foreground);
$bm-green: green($foreground);
$bm-blue: blue($foreground);
$background-red: red($background);
$background-green: green($background);
$background-blue: blue($background);
@if $background-red * 0.3 + $background-green * 0.59 + $background-blue * 0.11 <= $bm-red * 0.3 + $bm-green * 0.59 + $bm-blue * 0.11 {
$bm-red: $background-red;
$bm-green: $background-green;
$bm-blue: $background-blue;
}
@return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
}
//--------------------------------
// Lighter Color
//--------------------------------
@function blend-lightercolor ($foreground, $background) {
$bm-red: red($foreground);
$bm-green: green($foreground);
$bm-blue: blue($foreground);
$background-red: red($background);
$background-green: green($background);
$background-blue: blue($background);
@if $background-red * 0.3 + $background-green * 0.59 + $background-blue * 0.11 > $bm-red * 0.3 + $bm-green * 0.59 + $bm-blue * 0.11 {
$bm-red: $background-red;
$bm-green: $background-green;
$bm-blue: $background-blue;
}
@return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
}
//--------------------------------
// Linear Dodge
//--------------------------------
@function blend-lineardodge ($foreground, $background) {
$bm-red: blend-lineardodge-color(red($foreground), red($background));
$bm-green: blend-lineardodge-color(green($foreground), green($background));
$bm-blue: blend-lineardodge-color(blue($foreground), blue($background));
@return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
}
@function blend-lineardodge-color($foreground, $background) {
@if $background + $foreground > 255 {
$foreground: 255;
}
@else {
$foreground: $background + $foreground;
}
@return $foreground;
}
//--------------------------------
// Linear Burn
//--------------------------------
@function blend-linearburn ($foreground, $background) {
$bm-red: blend-linearburn-color(red($foreground), red($background));
$bm-green: blend-linearburn-color(green($foreground), green($background));
$bm-blue: blend-linearburn-color(blue($foreground), blue($background));
@return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
}
@function blend-linearburn-color($foreground, $background) {
@if $background + $foreground < 255 {
$foreground: 0;
}
@else {
$foreground: $background + $foreground - 255;
}
@return $foreground;
}
//--------------------------------
// Difference
//--------------------------------
@function blend-difference ($foreground, $background) {
$bm-red: abs(red($background) - red($foreground));
$bm-green: abs(green($background) - green($foreground));
$bm-blue: abs(blue($background) - blue($foreground));
@return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
}
//--------------------------------
// Screen
//--------------------------------
@function blend-screen ($foreground, $background) {
$bm-red: blend-screen-color(red($foreground), red($background));
$bm-green: blend-screen-color(green($foreground), green($background));
$bm-blue: blend-screen-color(blue($foreground), blue($background));
@return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
}
@function blend-screen-color($foreground, $background) {
@return (255 - ( ( (255 - $foreground) * (255 - $background)) / 256));
}
//--------------------------------
// Exclusion
//--------------------------------
@function blend-exclusion ($foreground, $background) {
$bm-red: blend-exclusion-color(red($foreground), red($background));
$bm-green: blend-exclusion-color(green($foreground), green($background));
$bm-blue: blend-exclusion-color(blue($foreground), blue($background));
@return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
}
@function blend-exclusion-color($foreground, $background) {
@return $background - ($background * (2 / 255) - 1) * $foreground;
}
//--------------------------------
// Overlay
//--------------------------------
@function blend-overlay ($foreground, $background) {
$bm-red: blend-overlay-color(red($foreground), red($background));
$bm-green: blend-overlay-color(green($foreground), green($background));
$bm-blue: blend-overlay-color(blue($foreground), blue($background));
@return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
}
@function blend-overlay-color($foreground, $background) {
@if $background <= 255 / 2 {
$foreground: (2 * $background * $foreground) / 255;
} @else {
$foreground: 255 - (255 - 2 * ($background - (255 / 2))) * (255 - $foreground) / 255;
}
@return $foreground;
}
//--------------------------------
// Soft Light
//--------------------------------
@function blend-softlight ($foreground, $background) {
$bm-red: blend-softlight-color(red($foreground), red($background));
$bm-green: blend-softlight-color(green($foreground), green($background));
$bm-blue: blend-softlight-color(blue($foreground), blue($background));
@return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
}
@function blend-softlight-color($foreground, $background) {
@if $background < 128 {
$foreground: (($foreground / 2) + 64) * $background * (2 / 255);
} @else {
$foreground: 255 - (191 - ($foreground / 2)) * (255 - $background) * (2 / 255);
}
@return $foreground;
}
//--------------------------------
// Hard Light
//--------------------------------
@function blend-hardlight ($foreground, $background) {
$bm-red: blend-hardlight-color(red($foreground), red($background));
$bm-green: blend-hardlight-color(green($foreground), green($background));
$bm-blue: blend-hardlight-color(blue($foreground), blue($background));
@return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
}
@function blend-hardlight-color($foreground, $background) {
$tmp-blend: $foreground;
@if $tmp-blend < 128 {
$foreground: $background * $tmp-blend * (2 / 255);
} @else {
$foreground: 255 - (255-$background) * (255-$tmp-blend) * (2 / 255);
}
@return $foreground;
}
//--------------------------------
// Color Dodge
//--------------------------------
@function blend-colordodge ($foreground, $background) {
$bm-red: blend-colordodge-color(red($foreground), red($background));
$bm-green: blend-colordodge-color(green($foreground), green($background));
$bm-blue: blend-colordodge-color(blue($foreground), blue($background));
@return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
}
@function blend-colordodge-color($foreground, $background) {
$tmp: $background * 256 / (255 - $foreground);
@if $tmp > 255 or $foreground == 255 {
$foreground: 255;
} @else {
$foreground: $tmp;
}
@return $foreground;
}
//--------------------------------
// Color Burn
//--------------------------------
@function blend-colorburn ($foreground, $background) {
$bm-red: blend-colorburn-color(red($foreground), red($background));
$bm-green: blend-colorburn-color(green($foreground), green($background));
$bm-blue: blend-colorburn-color(blue($foreground), blue($background));
@return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
}
@function blend-colorburn-color($foreground, $background) {
$tmp: (255 - ((255 - $background) * 255) / $foreground);
// TODO: hacked to replicate photoshop
@if $foreground == 0 {
$foreground: 255;
} @elseif $tmp < 0 {
$foreground: 0;
} @else {
$foreground: $tmp;
}
@return $foreground;
}
//--------------------------------
// Linear Light
//--------------------------------
@function blend-linearlight ($foreground, $background) {
$bm-red: blend-linearlight-color(red($foreground), red($background));
$bm-green: blend-linearlight-color(green($foreground), green($background));
$bm-blue: blend-linearlight-color(blue($foreground), blue($background));
@return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
}
@function blend-linearlight-color($foreground, $background) {
@if $foreground < 128 {
$foreground: blend-linearburn-color($background, 2 * $foreground);
} @else {
$foreground: blend-lineardodge-color($background, 2 * ($foreground - 128));
}
@return $foreground;
}
//--------------------------------
// Vivid Light
//--------------------------------
@function blend-vividlight ($foreground, $background) {
$bm-red: blend-vividlight-color(red($foreground), red($background));
$bm-green: blend-vividlight-color(green($foreground), green($background));
$bm-blue: blend-vividlight-color(blue($foreground), blue($background));
@return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
}
@function blend-vividlight-color($foreground, $background) {
@if $foreground < 128 {
$foreground: blend-colorburn-color(2 * $foreground, $background);
} @else {
$foreground: blend-colordodge-color(2 * ($foreground - 128), $background);
}
@return $foreground;
}
//--------------------------------
// Pin Light
//--------------------------------
@function blend-pinlight ($foreground, $background) {
$bm-red: blend-pinlight-color(red($foreground), red($background));
$bm-green: blend-pinlight-color(green($foreground), green($background));
$bm-blue: blend-pinlight-color(blue($foreground), blue($background));
@return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
}
@function blend-pinlight-color($foreground, $background) {
@if $foreground < 128 {
$foreground: blend-darken-color($background, 2 * $foreground);
} @else {
$foreground: blend-lighten-color($background, 2 * ($foreground - 128));
}
@return $foreground;
}
//--------------------------------
// Hard Mix
//--------------------------------
@function blend-hardmix ($foreground, $background) {
$bm-red: blend-hardmix-color(red($foreground), red($background));
$bm-green: blend-hardmix-color(green($foreground), green($background));
$bm-blue: blend-hardmix-color(blue($foreground), blue($background));
@return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
}
@function blend-hardmix-color($foreground, $background) {
$tmp: blend-vividlight-color($foreground, $background);
@if $tmp < 128 {
$foreground: 0;
} @else {
$foreground: 255;
}
@return $foreground;
}
// Unique to Photoshop
//--------------------------------
// Color Blend
//--------------------------------
@function blend-colorblend ($foreground, $background) {
$foreground-hsv: color-to-hsv($foreground);
$background-hsv: color-to-hsv($background);
$bm-hsv: nth($foreground-hsv, 1), nth($foreground-hsv, 2), nth($background-hsv, 3);
$bm-color: hsv-to-color($bm-hsv);
@return blend-normal(rgba(red($bm-color), green($bm-color), blue($bm-color), opacity($foreground)), $background);
}
//--------------------------------
// Dissolve
//--------------------------------
@function blend-dissolve ($foreground, $background) {
// The Dissolve blend mode acts on transparent and partially transparent pixels
// it treats transparency as a pixel pattern and applies a diffusion dither pattern.
// @see http://photoblogstop.k-com/photoshop/photoshop-blend-modes-explained
@return $foreground;
}
//--------------------------------
// Divide
//--------------------------------
@function blend-divide ($foreground, $background) {
$bm-red: blend-divide-colors(red($foreground), red($background));
$bm-green: blend-divide-colors(green($foreground), green($background));
$bm-blue:blend-divide-colors(blue($foreground), blue($background));
@return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
}
@function blend-divide-colors($foreground, $background) {
@return min((($background / 255) / ($foreground / 255)) * 255, 255);
}
//--------------------------------
// Hue
//--------------------------------
@function blend-hue ($foreground, $background) {
$foreground-hsv: color-to-hsv($foreground);
$background-hsv: color-to-hsv($background);
$bm-hsv: nth($foreground-hsv, 1), nth($background-hsv, 2), nth($background-hsv, 3);
$bm-color: hsv-to-color($bm-hsv);
@return blend-normal(rgba(red($bm-color), green($bm-color), blue($bm-color), opacity($foreground)), $background);
}
//--------------------------------
// Luminosity
//--------------------------------
@function blend-luminosity ($foreground, $background) {
$foreground-hsv: color-to-hsv($foreground);
$background-hsv: color-to-hsv($background);
$bm-hsv: nth($background-hsv, 1), nth($background-hsv, 2), nth($foreground-hsv, 3);
$bm-color: hsv-to-color($bm-hsv);
@return blend-normal(rgba(red($bm-color), green($bm-color), blue($bm-color), opacity($foreground)), $background);
}
//--------------------------------
// Saturation
//--------------------------------
@function blend-saturation ($foreground, $background) {
$foreground-hsv: color-to-hsv($foreground);
$background-hsv: color-to-hsv($background);
$bm-hsv: nth($background-hsv, 1), nth($foreground-hsv, 2), nth($background-hsv, 3);
$bm-color: hsv-to-color($bm-hsv);
@return blend-normal(rgba(red($bm-color), green($bm-color), blue($bm-color), opacity($foreground)), $background);
}
//--------------------------------
// Subtract
//--------------------------------
@function blend-subtract ($foreground, $background) {
$bm-red: max(red($background) - red($foreground), 0);
$bm-green: max(green($background) - green($foreground), 0);
$bm-blue: max(blue($background) - blue($foreground), 0);
@return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
}
//--------------------------------
// HSL and HSV
//--------------------------------
// @see https://gist.k-github.k-com/1069204
@function hsv-to-hsl($h, $s: 0, $v: 0) {
@if type-of($h) == 'list' {
$v: nth($h, 3);
$s: nth($h, 2);
$h: nth($h, 1);
}
@if unit($h) == 'deg' {
$h: 3.1415 * 2 * ($h / 360deg);
}
@if unit($s) == '%' {
$s: 0 + ($s / 100%);
}
@if unit($v) == '%' {
$v: 0 + ($v / 100%);
}
$ss: $s * $v;
$ll: (2 - $s) * $v;
@if $ll <= 1 and $ll != 0 {
$ss: $ss / $ll;
} @else if ($ll == 2) {
$ss: 0;
} @else {
$ss: $ss / (2 - $ll);
}
$ll: $ll / 2;
@return 360deg * $h / (3.1415 * 2), percentage(max(0, min(1, $ss))), percentage(max(0, min(1, $ll)));
}
@function hsl-to-hsv($h, $ss: 0, $ll: 0) {
@if type-of($h) == 'list' {
$ll: nth($h, 3);
$ss: nth($h, 2);
$h: nth($h, 1);
} @else if type-of($h) == 'color' {
$ll: lightness($h);
$ss: saturation($h);
$h: hue($h);
}
@if unit($h) == 'deg' {
$h: 3.1415 * 2 * ($h / 360deg);
}
@if unit($ss) == '%' {
$ss: 0 + ($ss / 100%);
}
@if unit($ll) == '%' {
$ll: 0 + ($ll / 100%);
}
$ll: $ll * 2;
@if $ll <= 1 {
$ss: $ss * $ll;
} @else {
$ss: $ss * (2 - $ll);
}
$v: ($ll + $ss) / 2;
$s: if($ll + $ss == 0, 0, (2 * $ss) / ($ll + $ss));
@return 360deg * $h / (3.1415 * 2), percentage(max(0, min(1, $s))), percentage(max(0, min(1, $v)));
}
@function color-to-hsv($color) {
@return hsl-to-hsv($color);
}
@function hsv-to-color($h, $s: 0, $v: 0) {
$hsl: hsv-to-hsl($h, $s, $v);
@return hsl(nth($hsl, 1), nth($hsl, 2), nth($hsl, 3));
}

3
src/mixins/utils/_color-maps.scss
Просмотреть файл

@ -1,3 +0,0 @@
// Calendar widget
// $calendar-colors: ( $calendar-text, $calendar-bg, $calendar-border );
// $calendar-header-color: ( $calendar-header-text, $calendar-header-bg, $calendar-header-border );

0
src/mixins/_compact.scss → src/mixins/utils/_compact.scss
Просмотреть файл

0
src/mixins/_decoration.scss → src/mixins/utils/_decoration.scss
Просмотреть файл

1
src/panelbar/_theme.scss
Просмотреть файл

@ -1,6 +1,5 @@
@import '../base/states';
@import './layout';
@import '../mixins/blend-modes';
$panelbar-color: $normal-text-color !default;
$panelbar-border-color: rgba(0, 0, 0, .08) !default;

2
src/panelbar/main.scss
Просмотреть файл

@ -1,3 +1,3 @@
@import '../variables';
@import '../mixins/import-once';
@import '../mixins/all';
@import 'theme';

1
src/popup/_theme.scss
Просмотреть файл

@ -1,4 +1,3 @@
@import '../mixins/blend-modes';
@import '../animation/main';
@import '../base/states';
@import './layout';

2
src/popup/main.scss
Просмотреть файл

@ -1,3 +1,3 @@
@import '../variables';
@import '../mixins/import-once';
@import '../mixins/all';
@import 'theme';

6
src/progressbar/images/indeterminate.scss
Просмотреть файл

@ -1,7 +1,5 @@
@import '../../mixins/import-once';
@import '../../mixins/data-uri';
@import '../../mixins/core/all';
@include exports('indeterminate.gif') {
@include register-data-uri('indeterminate.gif', 'data:image/gif;base64,R0lGODlhFgAWAJECAPDw8OTk5AAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFBAACACwAAAAAFgAWAAACL4yPAcsNmZyESDp6bMNGM654DyeOWAmipJiyqweGWuy+Fg23s37zk38BboQf4qIAACH5BAUEAAIALAAAAAAWABYAAAIwBIKpYe231ntRTlfTxZlt03lf+IFdCWUoWbLj2cKvGstXKN6ubk94Tdv8ZkFe0VEAACH5BAUEAAIALAAAAAAWABYAAAIwhBGpG+fH4nuRTVfXhTltnn1G14ikiHToaapt+Far+7E1vZFlbl96LLvhJj8hzFEAACH5BAUEAAIALAAAAAAWABYAAAIwhB+pG+fI2HtRTljTxXmbrHgAqImkOILoaapt91ar67E1vdk5fpHNzaPoJr6Y7FAAACH5BAUEAAIALAAAAAAWABYAAAIvhG+hy4EPmoRINnosw0krHnkOJ45YCaKpB4ZaK8Ls+tKWXJOznp+736OogMGHqgAAIfkEBQQAAgAsAAAAABYAFgAAAi+Ej6HLgQ+ahEkyeuzFUSveeaD3caRjkqOaiqsGhlbMtvN72xO+6w3t8m2EC6CnAAAh+QQFBAACACwAAAAAFgAWAAACMAyOCcHtCp1kME1Z0X15bdp9YCYaodh5X1qy6LnCW6pe9CtPd5xj7vyzBXVDX69RAAAh+QQFBAACACwAAAAAFgAWAAACMIyBqWDtseJ7cU1X1cWZ7dN9YCZCodh5X1qy6LnCmxuTrzyl6qXf9kzjBXNDSjFQAAAh+QQFBAACACwAAAAAFgAWAAACLowNqQvnx+J7kU1X14U5bdQ1XxCOZGeWo/qxm3vBk0yhq93iL83pMw/y1YQYWAEAIfkEBQQAAgAsAAAAABYAFgAAAjCMH6DLgJ9ag0hOaizDWSseeaD3caQziqkGhlZLwqo5Y/H64pLM6hddg5x8P8rQUAAAIfkEBQQAAgAsAAAAABYAFgAAAjCMf6DLgB+ahEg2muzCRm/uKVwUjqEDlqk3klqrrhbMmrU82a8+8zl+8QWBQ8opUAAAOw==')
}
}

2
src/progressbar/main.scss
Просмотреть файл

@ -1,3 +1,3 @@
@import '../variables';
@import '../mixins/import-once';
@import '../mixins/all';
@import 'theme';

2
src/scrollview/main.scss
Просмотреть файл

@ -1,3 +1,3 @@
@import '../variables';
@import '../mixins/import-once';
@import '../mixins/all';
@import 'theme';

3
src/slider/images/slider-h.scss
Просмотреть файл

@ -1,5 +1,4 @@
@import '../../mixins/import-once';
@import '../../mixins/data-uri';
@import '../../mixins/core/all';
@include exports('slider-h.gif') {
@include register-data-uri('slider-h.gif', 'data:image/gif;base64,R0lGODlhAQC0AIABALi4uAAAACH5BAEAAAEALAAAAAABALQAAAIWjIGJxqzazlux2ovlzND2rAHgSIZWAQA7')

3
src/slider/images/slider-v.scss
Просмотреть файл

@ -1,5 +1,4 @@
@import '../../mixins/import-once';
@import '../../mixins/data-uri';
@import '../../mixins/core/all';
@include exports('slider-v.gif') {
@include register-data-uri('slider-v.gif', 'data:image/gif;base64,R0lGODlhtAABAIABALi4uAAAACH5BAEAAAEALAAAAAC0AAEAAAIWjIGJxqzazlux2ovlzND2rAHgSIZWAQA7')

2
src/slider/main.scss
Просмотреть файл

@ -1,3 +1,3 @@
@import '../variables';
@import '../mixins/import-once';
@import '../mixins/all';
@import 'theme';

2
src/switch/main.scss
Просмотреть файл

@ -1,3 +1,3 @@
@import '../variables';
@import '../mixins/import-once';
@import '../mixins/all';
@import 'theme';

1
src/tabstrip/_theme.scss
Просмотреть файл

@ -1,6 +1,5 @@
@import '../base/states';
@import './layout';
@import '../mixins/blend-modes';
$tabstrip-tabs-color: $accent !default;
$tabstrip-background-color: $background !default;

2
src/tabstrip/main.scss
Просмотреть файл

@ -1,3 +1,3 @@
@import '../variables';
@import '../mixins/import-once';
@import '../mixins/all';
@import 'theme';

4
src/upload/main.scss
Просмотреть файл

@ -1,3 +1,3 @@
@import '../variables';
@import '../mixins/import-once';
@import 'theme';
@import '../mixins/all';
@import 'theme';