up bourbon

pull/1267/head
antelle 2019-09-08 13:43:55 +02:00
parent 135c4dc60e
commit 13f90d7a39
20 changed files with 1433 additions and 1339 deletions

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@ -583,8 +583,8 @@
}
&-arrow-prev,
&-arrow-next {
@include transform(scaleX(2));
@include transform-origin(left top);
transform: scaleX(2);
transform-origin: left top;
cursor: pointer;
position: absolute;
top: 30px;

View File

@ -77,6 +77,6 @@
&__update-icon {
color: var(--action-color);
@include animation(shake 50s cubic-bezier(0.36, 0.07, 0.19, 0.97) 0s infinite);
animation: shake 50s cubic-bezier(0.36, 0.07, 0.19, 0.97) 0s infinite;
}
}

View File

@ -15,7 +15,8 @@
overflow-x: hidden;
}
&__content, &__buttons {
&__content,
&__buttons {
margin: $base-padding;
}

View File

@ -15,7 +15,8 @@
overflow-x: hidden;
}
&__content, &__buttons {
&__content,
&__buttons {
padding: $base-padding;
}

View File

@ -167,34 +167,22 @@
&--custom {
vertical-align: text-bottom;
&.yellow {
@include filter(
grayscale(1) sepia(1) hue-rotate(20deg) brightness(1.17) saturate(5.7)
);
filter: grayscale(1) sepia(1) hue-rotate(20deg) brightness(1.17) saturate(5.7);
}
&.green {
@include filter(
grayscale(1) sepia(1) hue-rotate(55deg) brightness(1.01) saturate(4.9)
);
filter: grayscale(1) sepia(1) hue-rotate(55deg) brightness(1.01) saturate(4.9);
}
&.red {
@include filter(
grayscale(1) sepia(1) hue-rotate(316deg) brightness(1.1) saturate(6)
);
filter: grayscale(1) sepia(1) hue-rotate(316deg) brightness(1.1) saturate(6);
}
&.orange {
@include filter(
grayscale(1) sepia(1) hue-rotate(355deg) brightness(0.92) saturate(5)
);
filter: grayscale(1) sepia(1) hue-rotate(355deg) brightness(0.92) saturate(5);
}
&.blue {
@include filter(
grayscale(1) sepia(1) hue-rotate(180deg) brightness(0.9) saturate(5)
);
filter: grayscale(1) sepia(1) hue-rotate(180deg) brightness(0.9) saturate(5);
}
&.violet {
@include filter(
grayscale(1) sepia(1) hue-rotate(238deg) brightness(1) saturate(6.2)
);
filter: grayscale(1) sepia(1) hue-rotate(238deg) brightness(1) saturate(6.2);
}
}
}

View File

@ -66,7 +66,7 @@
position: absolute;
cursor: pointer;
@include position(absolute, 50% null null 1em);
@include transform(translateY(-50%));
transform: translateY(-50%);
}
}

View File

@ -3,6 +3,7 @@
// Copyright 2013-2015 thoughtbot, inc.
// MIT License
@import 'override-mixins';
@import 'colors';
@import 'variables';
@import 'media';

View File

@ -92,7 +92,7 @@ input:not([type]) {
&:invalid {
border-color: var(--error-color);
box-shadow: form-box-shadow-focus-error();
@include selection(true) {
&::selection {
background-color: var(--text-selection-bg-color-error);
}
}
@ -101,7 +101,7 @@ input:not([type]) {
padding-right: 1.7em;
}
@include placeholder {
&::placeholder {
color: var(--muted-color);
}
}

View File

@ -0,0 +1,76 @@
@charset "UTF-8";
// Copied from bourbon/core/bourbon/library/_triangle.scss
// Disabled is-color because it doesn't work with CSS variables
/// Generates a triangle pointing in a specified direction.
///
/// @argument {string} $direction
/// The direction the triangle should point. Accepts `up`, `up-right`,
/// `right`, `down-right`, `down`, `down-left`, `left` or `up-left`.
///
/// @argument {number (with unit)} $width
/// Width of the triangle.
///
/// @argument {number (with unit)} $height
/// Height of the triangle.
///
/// @argument {color} $color
/// Color of the triangle.
///
/// @example scss
/// .element {
/// &::before {
/// @include triangle("up", 2rem, 1rem, #b25c9c);
/// content: "";
/// }
/// }
///
/// // CSS Output
/// .element::before {
/// border-style: solid;
/// height: 0;
/// width: 0;
/// border-color: transparent transparent #b25c9c;
/// border-width: 0 1rem 1rem;
/// content: "";
/// }
@mixin triangle($direction, $width, $height, $color) {
@if not
index('up' 'up-right' 'right' 'down-right' 'down' 'down-left' 'left' 'up-left', $direction)
{
@error "Direction must be `up`, `up-right`, `right`, `down-right`, " +
"`down`, `down-left`, `left` or `up-left`.";
} @else {
border-style: solid;
height: 0;
width: 0;
@if $direction == 'up' {
border-color: transparent transparent $color;
border-width: 0 ($width / 2) $height;
} @else if $direction == 'up-right' {
border-color: transparent $color transparent transparent;
border-width: 0 $width $width 0;
} @else if $direction == 'right' {
border-color: transparent transparent transparent $color;
border-width: ($height / 2) 0 ($height / 2) $width;
} @else if $direction == 'down-right' {
border-color: transparent transparent $color;
border-width: 0 0 $width $width;
} @else if $direction == 'down' {
border-color: $color transparent transparent;
border-width: $height ($width / 2) 0;
} @else if $direction == 'down-left' {
border-color: transparent transparent transparent $color;
border-width: $width 0 0 $width;
} @else if $direction == 'left' {
border-color: transparent $color transparent transparent;
border-width: ($height / 2) $width ($height / 2) 0;
} @else if $direction == 'up-left' {
border-color: $color transparent transparent;
border-width: $width $width 0 0;
}
}
}

View File

@ -31,7 +31,7 @@ h6 {
}
$small-header-font-size: modular-scale(2, 1rem);
$large-header-font-size: modular-scale(3, 1rem);
$large-header-font-size: modular-scale(4, 1rem);
h6 {
font-size: 1rem;
@ -95,7 +95,7 @@ img {
body:not(.edge) * {
// https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/12132854/
@include selection(true) {
&::selection {
background-color: var(--text-selection-bg-color);
}
}

View File

@ -59,10 +59,13 @@ $titlebar-padding-large: 40px;
@return inset 0 1px 3px rgba(0, 0, 0, 0.06);
}
@function form-box-shadow-focus() {
@return form-box-shadow(), 0 0 var(--focus-shadow-blur) var(--focus-shadow-spread) var(--form-box-shadow-color-focus);
@return form-box-shadow(),
0 0 var(--focus-shadow-blur) var(--focus-shadow-spread) var(--form-box-shadow-color-focus);
}
@function form-box-shadow-focus-error() {
@return form-box-shadow(), 0 0 var(--focus-shadow-blur) var(--focus-shadow-spread) var(--form-box-shadow-color-focus-error);
@return form-box-shadow(),
0 0 var(--focus-shadow-blur) var(--focus-shadow-spread)
var(--form-box-shadow-color-focus-error);
}
// Shadows

View File

@ -26,11 +26,11 @@ button.pika-next:after {
}
button.pika-prev:after {
@include triangle(14px 7px, var(--text-color), left);
@include triangle('left', 14px, 7px, var(--text-color));
}
button.pika-next:after {
@include triangle(14px 7px, var(--text-color), right);
@include triangle('right', 14px, 7px, var(--text-color));
}
.pika-table th {

View File

@ -13,48 +13,48 @@
}
.flip3d {
@include animation(flip3d 1s linear 0s infinite);
@include transform-style(perspective-3d);
animation: flip3d 1s linear 0s infinite;
transform-style: preserve-3d;
}
.grayscale {
@include filter(grayscale(1));
filter: grayscale(1);
}
.input-shake {
@include animation(shake 50s cubic-bezier(0.36, 0.07, 0.19, 0.97) 0s);
animation: shake 50s cubic-bezier(0.36, 0.07, 0.19, 0.97) 0s;
}
@include keyframes(flip3d) {
@keyframes flip3d {
from {
@include transform(rotateY(0));
transform: rotateY(0);
}
to {
@include transform(rotateY(360deg));
transform: rotateY(360deg);
}
}
@include keyframes(shake) {
@keyframes shake {
0%,
1%,
100% {
@include transform(translate3d(0, 0, 0));
transform: translate3d(0, 0, 0);
}
.1%,
.9% {
@include transform(translate3d(-1px, 0, 0));
transform: translate3d(-1px, 0, 0);
}
.2%,
.8% {
@include transform(translate3d(2px, 0, 0));
transform: translate3d(2px, 0, 0);
}
.3%,
.5%,
.7% {
@include transform(translate3d(-3px, 0, 0));
transform: translate3d(-3px, 0, 0);
}
.4%,
.6% {
@include transform(translate3d(3px, 0, 0));
transform: translate3d(3px, 0, 0);
}
}

View File

@ -42,54 +42,104 @@
&.tip--bottom:after {
@include position(absolute, -(nth($arrow-size-small, 2)) null null 50%);
@include transform(translate(-50%, 0));
@include triangle($arrow-size-small, var(--background-color), up);
transform: translate(-50%, 0);
@include triangle(
'up',
nth($arrow-size-small, 1),
nth($arrow-size-small, 2),
var(--background-color)
);
}
&.tip--top:after {
@include position(absolute, 100% null null 50%);
@include transform(translate(-50%, 0));
@include triangle($arrow-size-small, var(--background-color), down);
transform: translate(-50%, 0);
@include triangle(
'down',
nth($arrow-size-small, 1),
nth($arrow-size-small, 2),
var(--background-color)
);
}
&.tip--top-left:after {
@include position(absolute, 100% null null calc(100% - #{$arrow-offset-small}));
@include transform(translate(-50%, 0));
@include triangle($arrow-size-small, var(--background-color), down);
transform: translate(-50%, 0);
@include triangle(
'down',
nth($arrow-size-small, 1),
nth($arrow-size-small, 2),
var(--background-color)
);
}
&.tip--left:after {
@include position(absolute, 50% null null 100%);
@include transform(translate(0, -50%));
@include triangle($arrow-size-small, var(--background-color), right);
transform: translate(0, -50%);
@include triangle(
'right',
nth($arrow-size-small, 1),
nth($arrow-size-small, 2),
var(--background-color)
);
}
&.tip--right:after {
@include position(absolute, 50% null null (-(nth($arrow-size-small, 2))));
@include transform(translate(0, -50%));
@include triangle($arrow-size-small, var(--background-color), left);
transform: translate(0, -50%);
@include triangle(
'left',
nth($arrow-size-small, 1),
nth($arrow-size-small, 2),
var(--background-color)
);
}
&.tip--bottom:before {
@include position(absolute, (-(nth($arrow-size-large, 2))) null null 50%);
@include transform(translate(-50%, 0));
@include triangle($arrow-size-large, var(--light-border-color), up);
transform: translate(-50%, 0);
@include triangle(
'up',
nth($arrow-size-large, 1),
nth($arrow-size-large, 2),
var(--light-border-color)
);
}
&.tip--top:before {
@include position(absolute, 100% null null 50%);
@include transform(translate(-50%, 0));
@include triangle($arrow-size-large, var(--light-border-color), down);
transform: translate(-50%, 0);
@include triangle(
'down',
nth($arrow-size-large, 1),
nth($arrow-size-large, 2),
var(--light-border-color)
);
}
&.tip--top-left:before {
@include position(absolute, 100% null null calc(100% - #{$arrow-offset-small}));
@include transform(translate(-50%, 0));
@include triangle($arrow-size-large, var(--light-border-color), down);
transform: translate(-50%, 0);
@include triangle(
'down',
nth($arrow-size-large, 1),
nth($arrow-size-large, 2),
var(--light-border-color)
);
}
&.tip--left:before {
@include position(absolute, 50% null null 100%);
@include transform(translate(0, -50%));
@include triangle($arrow-size-large, var(--light-border-color), right);
transform: translate(0, -50%);
@include triangle(
'right',
nth($arrow-size-large, 1),
nth($arrow-size-large, 2),
var(--light-border-color)
);
}
&.tip--right:before {
@include position(absolute, 50% null null (-(nth($arrow-size-large, 2))));
@include transform(translate(0, -50%));
@include triangle($arrow-size-large, var(--light-border-color), left);
transform: translate(0, -50%);
@include triangle(
'left',
nth($arrow-size-large, 1),
nth($arrow-size-large, 2),
var(--light-border-color)
);
}
}

View File

@ -3,7 +3,7 @@ $fa-font-path: '~font-awesome/fonts';
@import '~normalize.css/normalize';
@import '~font-awesome/scss/font-awesome';
@import '~pikaday/scss/pikaday';
@import '~bourbon/app/assets/stylesheets/bourbon';
@import '~bourbon';
@import 'base/base';

View File

@ -1,32 +1,35 @@
$themes: map-merge(
$themes,
(
macdark:
$themes,
(
macdark:
map-merge(
$theme-defaults,
(
background-color: #1F1F20,
medium-color: #B7B7B8,
text-color: #F7F7F7,
action-color: #3063D4,
error-color: #EC5F5D,
focus-shadow-blur: 0,
focus-shadow-spread: 3px,
button-border-radius: 2px,
input-border-radius: 3px,
selected-border-width: 0,
accent-border-width: 0
)
$theme-defaults,
(
background-color: #1f1f20,
medium-color: #b7b7b8,
text-color: #f7f7f7,
action-color: #3063d4,
error-color: #ec5f5d,
focus-shadow-blur: 0,
focus-shadow-spread: 3px,
button-border-radius: 2px,
input-border-radius: 3px,
selected-border-width: 0,
accent-border-width: 0
)
)
)
)
);
body.th-macdark {
--light-border-color: rgb(68, 68, 69, 0.7);
--secondary-background-color: #2D2D2E;
--form-box-border-focus: #6697C0;
--form-box-shadow-color-focus: #44749D;
input[type='text'], input[type='password'], textarea, input:not([type]) {
--secondary-background-color: #2d2d2e;
--form-box-border-focus: #6697c0;
--form-box-shadow-color-focus: #44749d;
input[type='text'],
input[type='password'],
textarea,
input:not([type]) {
&:focus {
background-color: rgba(108, 108, 109, 0.05);
}
@ -37,21 +40,24 @@ body.th-macdark {
.menu__item.menu__item--active.menu__item--hover > .menu__item-body {
background-color: #515152;
}
.menu__item-edit, .menu__item-empty-trash {
right: .5em;
.menu__item-edit,
.menu__item-empty-trash {
right: 0.5em;
}
.menu__item-edit:not(:hover), .menu__item-empty-trash:not(:hover) {
color: #8F8F91;
.menu__item-edit:not(:hover),
.menu__item-empty-trash:not(:hover) {
color: #8f8f91;
}
}
.app__footer {
background-color: var(--secondary-background-color);
}
@include nomobile {
.list__item--active, .list__item--active:hover {
background-color: #2457C9;
.list__item--active,
.list__item--active:hover {
background-color: #2457c9;
.list__item-descr {
color: #8F8F91;
color: #8f8f91;
}
}
}

6
package-lock.json generated
View File

@ -1703,9 +1703,9 @@
"integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
},
"bourbon": {
"version": "4.2.7",
"resolved": "https://registry.npmjs.org/bourbon/-/bourbon-4.2.7.tgz",
"integrity": "sha1-SKgF3/R1+/YeACpk4eTbaNL4L7o="
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/bourbon/-/bourbon-6.0.0.tgz",
"integrity": "sha512-Skds0R1+GY3c1oBddh9BggYVq39Uo4ySvW33zttPk+4+nfGYpbZqwaDwENkbtV7PYhCk0ctTFkzfTNFv5365ag=="
},
"bplist-creator": {
"version": "0.0.8",

View File

@ -1,99 +1,99 @@
{
"name": "keeweb",
"version": "1.9.3",
"description": "Free cross-platform password manager compatible with KeePass",
"main": "Gruntfile.js",
"private": true,
"homepage": "https://keeweb.info",
"repository": {
"type": "git",
"url": "https://github.com/keeweb/keeweb"
},
"dependencies": {
"@babel/core": "^7.6.0",
"@babel/preset-env": "^7.6.0",
"argon2-browser": "1.10.2",
"babel-loader": "8.0.6",
"backbone": "1.4.0",
"baron": "3.0.3",
"base64-loader": "1.0.0",
"bourbon": "^4.2.7",
"electron": "^6.0.7",
"eslint": "^6.3.0",
"eslint-config-prettier": "^6.2.0",
"eslint-config-standard": "^14.1.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-node": "^10.0.0",
"eslint-plugin-prettier": "^3.1.0",
"eslint-plugin-promise": "4.2.1",
"eslint-plugin-standard": "4.0.1",
"exports-loader": "0.7.0",
"font-awesome": "4.7.0",
"grunt": "1.0.4",
"grunt-contrib-clean": "2.0.0",
"grunt-contrib-compress": "github:keeweb/grunt-contrib-compress#08966cd",
"grunt-contrib-copy": "1.0.0",
"grunt-contrib-deb": "github:keeweb/grunt-contrib-deb#e9b6e9f",
"grunt-contrib-htmlmin": "3.1.0",
"grunt-contrib-uglify": "4.0.1",
"grunt-contrib-watch": "1.1.0",
"grunt-electron": "11.0.0",
"grunt-eslint": "22.0.0",
"grunt-gitinfo": "github:keeweb/grunt-gitinfo#b61aaed",
"grunt-inline-alt": "github:keeweb/grunt-inline-alt#ec9f6ad",
"grunt-string-replace": "1.3.1",
"grunt-webpack": "3.1.3",
"handlebars": "4.2.0",
"handlebars-loader": "1.7.1",
"html-minifier": "4.0.0",
"ignore-loader": "^0.1.2",
"jquery": "3.4.1",
"json-loader": "^0.5.7",
"jsqrcode": "github:antelle/jsqrcode#0.1.3",
"kdbxweb": "1.2.7",
"load-grunt-tasks": "5.1.0",
"mini-css-extract-plugin": "^0.8.0",
"node-sass": "^4.12.0",
"node-stream-zip": "1.8.2",
"normalize.css": "8.0.1",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"pikaday": "1.8.0",
"pkcs15-smartcard-sign": "^1.0.0",
"prettier": "^1.18.2",
"raw-loader": "^3.1.0",
"sass-loader": "^8.0.0",
"stats-webpack-plugin": "0.7.0",
"string-replace-webpack-plugin": "0.1.3",
"strip-sourcemap-loader": "0.0.1",
"sumchecker": "^3.0.0",
"time-grunt": "2.0.0",
"uglify-loader": "3.0.0",
"uglifyjs-webpack-plugin": "^2.2.0",
"url-loader": "^2.1.0",
"webpack": "^4.39.3",
"webpack-bundle-analyzer": "^3.4.1",
"webpack-dev-server": "^3.8.0"
},
"optionalDependencies": {
"grunt-appdmg": "github:keeweb/grunt-appdmg#874ad83",
"keytar": "^5.0.0-beta.0"
},
"scripts": {
"start": "grunt",
"test": "grunt test",
"postinstall": "cd desktop && npm install",
"build-beta": "grunt --skip-sign --beta && sed 's/<html manifest=\"manifest.appcache\">//' dist/index.html > ../keeweb-beta/index.html && cd ../keeweb-beta && git add index.html && git commit -a -m 'beta' && git push origin master",
"electron": "ELECTRON_DISABLE_SECURITY_WARNINGS=1 electron desktop --htmlpath=http://localhost:8085",
"dev": "grunt dev --skip-sign"
},
"author": {
"name": "Antelle",
"email": "antelle.net@gmail.com",
"url": "http://antelle.net"
},
"engines": {
"node": ">=10.0"
},
"license": "MIT",
"readme": "README.md"
"name": "keeweb",
"version": "1.9.3",
"description": "Free cross-platform password manager compatible with KeePass",
"main": "Gruntfile.js",
"private": true,
"homepage": "https://keeweb.info",
"repository": {
"type": "git",
"url": "https://github.com/keeweb/keeweb"
},
"dependencies": {
"@babel/core": "^7.6.0",
"@babel/preset-env": "^7.6.0",
"argon2-browser": "1.10.2",
"babel-loader": "8.0.6",
"backbone": "1.4.0",
"baron": "3.0.3",
"base64-loader": "1.0.0",
"bourbon": "^6.0.0",
"electron": "^6.0.7",
"eslint": "^6.3.0",
"eslint-config-prettier": "^6.2.0",
"eslint-config-standard": "^14.1.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-node": "^10.0.0",
"eslint-plugin-prettier": "^3.1.0",
"eslint-plugin-promise": "4.2.1",
"eslint-plugin-standard": "4.0.1",
"exports-loader": "0.7.0",
"font-awesome": "4.7.0",
"grunt": "1.0.4",
"grunt-contrib-clean": "2.0.0",
"grunt-contrib-compress": "github:keeweb/grunt-contrib-compress#08966cd",
"grunt-contrib-copy": "1.0.0",
"grunt-contrib-deb": "github:keeweb/grunt-contrib-deb#e9b6e9f",
"grunt-contrib-htmlmin": "3.1.0",
"grunt-contrib-uglify": "4.0.1",
"grunt-contrib-watch": "1.1.0",
"grunt-electron": "11.0.0",
"grunt-eslint": "22.0.0",
"grunt-gitinfo": "github:keeweb/grunt-gitinfo#b61aaed",
"grunt-inline-alt": "github:keeweb/grunt-inline-alt#ec9f6ad",
"grunt-string-replace": "1.3.1",
"grunt-webpack": "3.1.3",
"handlebars": "4.2.0",
"handlebars-loader": "1.7.1",
"html-minifier": "4.0.0",
"ignore-loader": "^0.1.2",
"jquery": "3.4.1",
"json-loader": "^0.5.7",
"jsqrcode": "github:antelle/jsqrcode#0.1.3",
"kdbxweb": "1.2.7",
"load-grunt-tasks": "5.1.0",
"mini-css-extract-plugin": "^0.8.0",
"node-sass": "^4.12.0",
"node-stream-zip": "1.8.2",
"normalize.css": "8.0.1",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"pikaday": "1.8.0",
"pkcs15-smartcard-sign": "^1.0.0",
"prettier": "^1.18.2",
"raw-loader": "^3.1.0",
"sass-loader": "^8.0.0",
"stats-webpack-plugin": "0.7.0",
"string-replace-webpack-plugin": "0.1.3",
"strip-sourcemap-loader": "0.0.1",
"sumchecker": "^3.0.0",
"time-grunt": "2.0.0",
"uglify-loader": "3.0.0",
"uglifyjs-webpack-plugin": "^2.2.0",
"url-loader": "^2.1.0",
"webpack": "^4.39.3",
"webpack-bundle-analyzer": "^3.4.1",
"webpack-dev-server": "^3.8.0"
},
"optionalDependencies": {
"grunt-appdmg": "github:keeweb/grunt-appdmg#874ad83",
"keytar": "^5.0.0-beta.0"
},
"scripts": {
"start": "grunt",
"test": "grunt test",
"postinstall": "cd desktop && npm install",
"build-beta": "grunt --skip-sign --beta && sed 's/<html manifest=\"manifest.appcache\">//' dist/index.html > ../keeweb-beta/index.html && cd ../keeweb-beta && git add index.html && git commit -a -m 'beta' && git push origin master",
"electron": "ELECTRON_DISABLE_SECURITY_WARNINGS=1 electron desktop --htmlpath=http://localhost:8085",
"dev": "grunt dev --skip-sign"
},
"author": {
"name": "Antelle",
"email": "antelle.net@gmail.com",
"url": "http://antelle.net"
},
"engines": {
"node": ">=10.0"
},
"license": "MIT",
"readme": "README.md"
}