keeweb
/
keeweb
mirror of https://github.com/keeweb/keeweb.git
1
0
Fork 0
Code Issues Releases Wiki Activity

use flexbox without vendor-prefixes

This commit is contained in:
antelle 2017-04-16 18:37:16 +02:00
parent 85d4f9797d
commit e1d798917f
15 changed files with 272 additions and 272 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
app/styles/areas/_app.scss
View File

@ -1,20 +1,20 @@
.app {
@include size(100%);
@include display(flex);
@include align-items(stretch);
@include flex-direction(column);
@include justify-content(flex-start);
display: flex;
align-items: stretch;
flex-direction: column;
justify-content: flex-start;
&--titlebar-style-hidden-inset {
-webkit-app-region: drag;
}
&__body {
@include flex(1);
@include display(flex);
@include align-items(stretch);
@include flex-direction(row);
@include justify-content(flex-start);
flex: 1;
display: flex;
align-items: stretch;
flex-direction: row;
justify-content: flex-start;
overflow: hidden;
}
@ -28,8 +28,8 @@
}
&__menu {
@include flex(0 0 auto);
@include display(flex);
flex: 0 0 auto;
display: flex;
width: 150px;
@include mobile {
&:not(.menu-visible) {
@ -49,20 +49,20 @@
}
&__list-wrap {
@include flex(1);
@include display(flex);
@include align-items(stretch);
@include flex-direction(row);
@include justify-content(flex-start);
flex: 1;
display: flex;
align-items: stretch;
flex-direction: row;
justify-content: flex-start;
overflow: hidden;
&.app__list-wrap--table {
@include flex-direction(column);
flex-direction: column;
}
}
&__menu-drag, &__list-drag {
@include drag-handle;
@include flex(0 0 auto);
flex: 0 0 auto;
width: 1px;
cursor: col-resize;
@include mobile { display: none; }
@ -81,13 +81,13 @@
}
&__list {
@include flex(0 0 250px);
@include display(flex);
@include align-items(stretch);
@include flex-direction(column);
flex: 0 0 250px;
display: flex;
align-items: stretch;
flex-direction: column;
overflow-y: auto;
@include mobile {
@include flex(1 1);
flex: 1 1;
.app--details-visible & {
display: none;
}
@ -95,8 +95,8 @@
}
&__details {
@include flex(1);
@include display(flex);
flex: 1;
display: flex;
overflow: hidden;
padding: $base-spacing;
position: relative;
@ -105,14 +105,14 @@
padding: $base-padding;
display: none;
.app--details-visible & {
@include display(flex);
display: flex;
}
}
}
&__panel {
@include flex(1);
@include display(flex);
flex: 1;
display: flex;
overflow: hidden;
padding: $base-spacing;
position: relative;
@ -122,7 +122,7 @@
}
&__footer {
@include flex(0 0 auto);
flex: 0 0 auto;
@include th { border-top: light-border(); }
}

30
app/styles/areas/_auto-type.scss
View File

@ -2,26 +2,26 @@
@include position(absolute, 0 null null 0);
@include size(100%);
@include th { background-color: background-color(); }
@include display(flex);
@include flex-direction(column);
@include align-items(stretch);
@include justify-content(flex-start);
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
box-sizing: border-box;
z-index: $z-index-no-modal;
opacity: 1;
padding: $base-padding;
&__header {
@include display(flex);
display: flex;
&-text {
@include flex(1 1);
flex: 1 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-right: $base-padding-h;
}
&-filter {
@include flex(auto 0);
flex: auto 0;
position: relative;
}
&-filter-input {
@ -35,10 +35,10 @@
}
}
&__message {
@include display(flex);
display: flex;
margin-bottom: $base-padding-v * 2;
&-text {
@include flex(1 1);
flex: 1 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@ -46,19 +46,19 @@
}
}
&__items {
@include flex(1);
flex: 1;
@include scrollbar-on-hover;
margin-bottom: $base-padding-v;
position: relative;
overflow: hidden;
>.scroller {
@include display(flex);
@include flex-direction(row);
@include justify-content(center);
display: flex;
flex-direction: row;
justify-content: center;
}
}
&__table {
@include flex(1);
flex: 1;
width: 100%;
overflow: hidden;
border-collapse: collapse;
@ -85,6 +85,6 @@
}
}
&__empty-title {
@include align-self(center);
align-self: center;
}
}

150
app/styles/areas/_details.scss
View File

@ -1,8 +1,8 @@
.details {
@include display(flex);
@include align-items(stretch);
@include flex-direction(column);
@include justify-content(flex-start);
display: flex;
align-items: stretch;
flex-direction: column;
justify-content: flex-start;
@include user-select(text);
width: 100%;
@ -19,14 +19,14 @@
}
&__header {
@include display(flex);
display: flex;
padding-bottom: $small-spacing;
overflow: visible;
min-height: 40px;
&-title {
@include user-select(text);
@include flex(1);
@include align-self(flex-start);
flex: 1;
align-self: flex-start;
cursor: text;
margin: 0 6px;
padding: 3px 6px 1px;
@ -45,7 +45,7 @@
}
input.details__header-title-input {
@include user-select(text);
@include flex(1);
flex: 1;
margin: 0 6px;
padding: 0 6px;
font-size: $large-header-font-size;
@ -111,12 +111,12 @@
}
&__body {
@include flex(1);
@include display(flex);
@include align-items(stretch);
@include flex-direction(column);
@include justify-content(flex-start);
@include flex-wrap(wrap);
flex: 1;
display: flex;
align-items: stretch;
flex-direction: column;
justify-content: flex-start;
flex-wrap: wrap;
@include scrollbar-on-hover;
position: relative;
overflow: hidden;
@ -124,43 +124,43 @@
.details--drag & { display: none; }
>.scroller {
@include flex(1);
@include display(flex);
@include align-items(stretch);
@include align-content(flex-start);
@include flex-direction(row);
@include justify-content(flex-start);
@include flex-wrap(wrap);
flex: 1;
display: flex;
align-items: stretch;
align-content: flex-start;
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap;
overflow-x: hidden;
padding-top: 3px;
@media screen and (-webkit-min-device-pixel-ratio:0) { width: 100% !important; }
}
&-fields {
@include flex(1 0 50%);
flex: 1 0 50%;
min-width: 0;
}
&-aside {
@include flex(0 0 auto);
@include display(flex);
@include align-items(stretch);
@include flex-direction(column);
@include justify-content(flex-start);
flex: 0 0 auto;
display: flex;
align-items: stretch;
flex-direction: column;
justify-content: flex-start;
}
&-after {
@include flex(100% 1 0);
flex: 100% 1 0;
}
}
&__field {
$details-field-line-height: 18px;
@include display(flex);
@include align-items(stretch);
@include flex-direction(row);
@include justify-content(flex-start);
display: flex;
align-items: stretch;
flex-direction: row;
justify-content: flex-start;
margin-bottom: .5em;
&-label {
@ -190,9 +190,9 @@
}
}
&-value {
@include flex(1);
flex: 1;
@include user-select(text);
@include align-self(flex-start);
align-self: flex-start;
position: relative;
cursor: text;
padding: 0 $base-padding-h;
@ -271,7 +271,7 @@
width: 13em;
padding-right: 0;
margin-right: 0;
@include flex(0 0 auto);
flex: 0 0 auto;
}
&-btn {
@include position(absolute, 0 0 null null);
@ -331,12 +331,12 @@
}
&__attachments {
@include flex(1);
@include display(flex);
@include align-items(stretch);
@include flex-direction(row);
@include justify-content(flex-end);
@include flex-wrap(nowrap);
flex: 1;
display: flex;
align-items: stretch;
flex-direction: row;
justify-content: flex-end;
flex-wrap: nowrap;
@include user-select(none);
overflow: hidden;
white-space: nowrap;
@ -346,8 +346,8 @@
&__attachment {
@include user-select(none);
@include area-selectable();
@include align-self(flex-end);
@include flex(0 1 auto);
align-self: flex-end;
flex: 0 1 auto;
@include th { border: light-border(); }
margin-right: $small-spacing;
padding: $base-padding;
@ -362,8 +362,8 @@
&__attachment-add {
@include user-select(none);
@include align-self(flex-end);
@include flex(0 0 auto);
align-self: flex-end;
flex: 0 0 auto;
@include th { color: muted-color(); }
border: 1px solid transparent;
margin-right: $small-spacing;
@ -412,12 +412,12 @@
display: none;
}
&--empty {
@include display(flex);
@include flex-direction(column);
@include flex(1 0 auto);
@include justify-content(center);
@include align-self(center);
@include align-items(center);
display: flex;
flex-direction: column;
flex: 1 0 auto;
justify-content: center;
align-self: center;
align-items: center;
text-align: center;
.details__attachment-preview-icon {
display: block;
@ -432,18 +432,18 @@
}
&__buttons {
@include display(flex);
@include align-items(stretch);
@include flex-direction(row);
@include flex-shrink(0);
@include justify-content(flex-start);
display: flex;
align-items: stretch;
flex-direction: row;
flex-shrink: 0;
justify-content: flex-start;
margin-top: $base-padding-v;
.details--drag & { display: none; }
&-trash, &-trash-del {
@include icon-btn($error:true);
@include align-self(flex-end);
align-self: flex-end;
margin-right: 10px;
}
@ -457,23 +457,23 @@
}
&__history {
@include flex(1 0 auto);
@include display(flex);
@include align-items(stretch);
@include flex-direction(column);
@include justify-content(flex-start);
flex: 1 0 auto;
display: flex;
align-items: stretch;
flex-direction: column;
justify-content: flex-start;
margin-right: $base-padding-h;
&-top {
@include display(flex);
@include align-items(stretch);
@include flex-direction(row);
@include justify-content(flex-start);
display: flex;
align-items: stretch;
flex-direction: row;
justify-content: flex-start;
}
&-desc {
@include user-select(none);
}
&-timeline {
@include flex(1 0 auto);
flex: 1 0 auto;
position: relative;
height: 44px;
margin-left: 5px;
@ -524,11 +524,11 @@
margin-left: 20px;
}
&-body {
@include flex(1 1 auto);
flex: 1 1 auto;
}
&-buttons {
@include user-select(none);
@include align-self(flex-end);
align-self: flex-end;
margin-bottom: $base-padding-v;
}
}
@ -536,12 +536,12 @@
&__dropzone {
display: none;
.details--drag & {
@include display(flex);
@include flex-direction(column);
@include flex(1 0 auto);
@include justify-content(center);
@include align-self(center);
@include align-items(center);
display: flex;
flex-direction: column;
flex: 1 0 auto;
justify-content: center;
align-self: center;
align-items: center;
text-align: center;
}
&-icon {

18
app/styles/areas/_footer.scss
View File

@ -1,11 +1,11 @@
.footer {
@include display(flex);
@include align-items(stretch);
@include flex-direction(row);
@include justify-content(flex-start);
display: flex;
align-items: stretch;
flex-direction: row;
justify-content: flex-start;
&__db {
@include flex(0 0 auto);
flex: 0 0 auto;
@include area-selectable(top);
position: relative;
padding: $medium-padding;
@ -23,9 +23,9 @@
}
&--expanded {
@include flex(1);
flex: 1;
@include mobile {
@include flex(0 0 auto);
flex: 0 0 auto;
>.footer__db-text {
display: none;
}
@ -52,7 +52,7 @@
> .fa {
display: none;
}
@include flex(1 1 auto);
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
}
@ -60,7 +60,7 @@
}
&__btn {
@include flex(0 0 auto);
flex: 0 0 auto;
@include area-selectable(top);
padding: $base-padding;
font-size: 1.4em;

12
app/styles/areas/_generator-presets.scss
View File

@ -1,9 +1,9 @@
.gen-ps {
@include flex(1);
@include display(flex);
@include align-items(stretch);
@include flex-direction(column);
@include justify-content(flex-start);
flex: 1;
display: flex;
align-items: stretch;
flex-direction: column;
justify-content: flex-start;
@include scrollbar-on-hover;
width: 100%;
user-select: none;
@ -11,7 +11,7 @@
position: relative;
>.scroller {
@include flex(1);
flex: 1;
overflow-x: hidden;
}

20
app/styles/areas/_grp.scss
View File

@ -1,9 +1,9 @@
.grp {
@include flex(1);
@include display(flex);
@include align-items(stretch);
@include flex-direction(column);
@include justify-content(flex-start);
flex: 1;
display: flex;
align-items: stretch;
flex-direction: column;
justify-content: flex-start;
@include scrollbar-on-hover;
width: 100%;
user-select: none;
@ -11,7 +11,7 @@
position: relative;
>.scroller {
@include flex(1);
flex: 1;
overflow-x: hidden;
}
@ -19,7 +19,7 @@
display: block;
font-size: $large-header-font-size;
padding: $base-padding-px;
@include align-self(flex-start);
align-self: flex-start;
@include area-selectable();
&--image {
width: 28px;
@ -28,12 +28,12 @@
}
&__icon-wrap {
@include display(flex);
display: flex;
}
&__buttons {
@include display(flex);
@include flex-direction(row);
display: flex;
flex-direction: row;
margin-top: $base-padding-v;
&-trash {

22
app/styles/areas/_key-change.scss
View File

@ -1,9 +1,9 @@
.key-change {
@include flex(1);
@include display(flex);
@include align-items(stretch);
@include flex-direction(column);
@include justify-content(center);
flex: 1;
display: flex;
align-items: stretch;
flex-direction: column;
justify-content: center;
overflow: hidden;
padding: $base-spacing;
position: relative;
@ -20,14 +20,14 @@
text-align: center;
}
&__body {
@include display(flex);
@include align-items(flex-start);
@include flex-direction(column);
@include flex-shrink(0);
display: flex;
align-items: flex-start;
flex-direction: column;
flex-shrink: 0;
margin: $base-spacing 0;
}
&__input {
@include align-self(center);
align-self: center;
}
input[type=password].key-change__pass, input[type=password].key-change__pass-repeat {
font-size: $large-pass-font-size;
@ -49,7 +49,7 @@
}
}
&__body, &__buttons {
@include align-self(center);
align-self: center;
width: 40%;
}
}

48
app/styles/areas/_list.scss
View File

@ -1,25 +1,25 @@
.list {
@include flex(1);
@include display(flex);
@include align-items(stretch);
@include flex-direction(column);
@include justify-content(flex-start);
flex: 1;
display: flex;
align-items: stretch;
flex-direction: column;
justify-content: flex-start;
overflow: hidden;
&__header {
}
&__items {
@include flex(1);
@include display(flex);
@include align-items(stretch);
@include flex-direction(column);
flex: 1;
display: flex;
align-items: stretch;
flex-direction: column;
@include scrollbar-on-hover;
overflow: hidden;
position: relative;
>.scroller {
@include flex(1);
@include align-self(stretch);
flex: 1;
align-self: stretch;
position: relative;
overflow-x: hidden;
@include mobile {
@ -33,14 +33,14 @@
padding: $small-spacing;
&-header {
@include display(flex);
@include align-items(stretch);
@include flex-direction(row);
@include justify-content(flex-start);
@include flex-wrap(wrap);
display: flex;
align-items: stretch;
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap;
}
&-field-wrap {
@include flex(1);
flex: 1;
position: relative;
}
&-field {
@ -77,17 +77,17 @@
}
}
&-adv {
@include flex(100%);
@include display(flex);
@include align-items(stretch);
@include flex-direction(row);
@include flex-wrap(wrap);
flex: 100%;
display: flex;
align-items: stretch;
flex-direction: row;
flex-wrap: wrap;
&-text {
@include flex(100%);
flex: 100%;
}
}
&-check {
@include flex(50%);
flex: 50%;
}
}

30
app/styles/areas/_menu.scss
View File

@ -1,29 +1,29 @@
.menu {
width: 100%;
@include display(flex);
@include align-items(stretch);
@include flex-direction(column);
@include justify-content(flex-start);
display: flex;
align-items: stretch;
flex-direction: column;
justify-content: flex-start;
overflow: hidden;
&__section {
@include flex(0 0 auto);
flex: 0 0 auto;
@include th { border-bottom: light-border(); }
@include scrollbar-on-hover;
position: relative;
overflow: hidden;
&--grow {
@include flex(1);
@include display(flex);
@include flex-direction(column);
flex: 1;
display: flex;
flex-direction: column;
>.scroller {
@include flex(1);
flex: 1;
}
}
&--drag {
@include flex(0 0 auto);
flex: 0 0 auto;
max-height: calc(100vh - 200px);
>.scroller { max-height: calc(100vh - 200px); }
}
@ -39,7 +39,7 @@
&__drag-section {
@include drag-handle;
@include flex(0 0 auto);
flex: 0 0 auto;
height: 1px;
cursor: row-resize;
}
@ -48,10 +48,10 @@
text-overflow: ellipsis;
overflow: hidden;
position: relative;
@include display(flex);
@include align-items(stretch);
@include flex-direction(column);
@include justify-content(flex-start);
display: flex;
align-items: stretch;
flex-direction: column;
justify-content: flex-start;
.menu__item--collapsed>& {
display: none;

98
app/styles/areas/_open.scss
View File

@ -1,19 +1,19 @@
.open {
@include flex(1);
@include display(flex);
@include align-self(stretch);
@include align-items(center);
@include flex-direction(column);
@include justify-content(center);
flex: 1;
display: flex;
align-self: stretch;
align-items: center;
flex-direction: column;
justify-content: center;
@include th { background: background-color(); }
&__icons {
@include display(flex);
@include align-items(stretch);
@include flex-direction(row);
@include flex-shrink(0);
@include justify-content(center);
@include flex-wrap(wrap);
display: flex;
align-items: stretch;
flex-direction: row;
flex-shrink: 0;
justify-content: center;
flex-wrap: wrap;
.open--drag & { display: none; }
}
@ -45,24 +45,24 @@
&__pass {
&-area {
@include display(flex);
@include align-items(stretch);
@include flex-direction(column);
@include justify-content(flex-start);
display: flex;
align-items: stretch;
flex-direction: column;
justify-content: flex-start;
position: relative;
.open--drag & { display: none; }
}
&-warn-wrap {
@include display(flex);
@include flex-direction(row);
@include justify-content(flex-end);
display: flex;
flex-direction: row;
justify-content: flex-end;
}
&-field-wrap {
@include display(flex);
@include flex-direction(row);
@include justify-content(flex-start);
@include align-items(stretch);
@include flex-shrink(0);
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-shrink: 0;
margin-bottom: $base-padding-v;
}
&-enter-btn, &-opening-icon {
@ -89,17 +89,17 @@
}
&__config {
@include display(flex);
@include align-items(stretch);
@include flex-direction(column);
@include justify-content(flex-start);
display: flex;
align-items: stretch;
flex-direction: column;
justify-content: flex-start;
position: relative;
width: 30em;
.open--drag & {
display: none;
}
&-buttons {
@include align-self(flex-end);
align-self: flex-end;
}
&-header {
>i { margin-right: .3em; }
@ -130,10 +130,10 @@
}
&__settings {
@include display(flex);
@include flex-direction(row);
@include justify-content(space-between);
@include align-items(stretch);
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: stretch;
padding-left: $base-padding-h;
height: 2em;
&-key-file {
@ -170,17 +170,17 @@
}
&__last {
@include display(flex);
@include flex-direction(column);
@include justify-content(flex-start);
@include align-items(stretch);
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
margin-top: $base-spacing;
&-item {
@include display(flex);
@include flex-direction(row);
@include justify-content(flex-start);
@include align-items(baseline);
@include flex-shrink(0);
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: baseline;
flex-shrink: 0;
.open:not(.open--opening) & {
@include area-selectable;
}
@ -196,7 +196,7 @@
}
}
}
&-text { @include flex-grow(1); }
&-text { flex-grow: 1; }
&-icon-del {
opacity: 0;
.open__last-item:hover & {
@ -215,12 +215,12 @@
&__dropzone {
display: none;
.open--drag & {
@include display(flex);
@include flex-direction(column);
@include flex(1 0 auto);
@include justify-content(center);
@include align-self(center);
@include align-items(center);
display: flex;
flex-direction: column;
flex: 1 0 auto;
justify-content: center;
align-self: center;
align-items: center;
text-align: center;
}
&-icon {

14
app/styles/areas/_settings.scss
View File

@ -1,17 +1,17 @@
.settings {
@include flex(1);
@include display(flex);
@include align-items(stretch);
@include flex-direction(column);
@include justify-content(flex-start);
@include flex-wrap(wrap);
flex: 1;
display: flex;
align-items: stretch;
flex-direction: column;
justify-content: flex-start;
flex-wrap: wrap;
@include scrollbar-on-hover;
margin: $base-padding;
overflow: hidden;
position: relative;
>.scroller {
@include flex(1 0 0);
flex: 1 0 0;
}
h2,h3 {

16
app/styles/areas/_tag.scss
View File

@ -1,19 +1,19 @@
.tag {
@include flex(1);
@include display(flex);
@include align-items(stretch);
@include flex-direction(column);
@include justify-content(flex-start);
flex: 1;
display: flex;
align-items: stretch;
flex-direction: column;
justify-content: flex-start;
width: 100%;
user-select: none;
&__space {
@include flex(1);
flex: 1;
}
&__buttons {
@include display(flex);
@include flex-direction(row);
display: flex;
flex-direction: row;
margin-top: $base-padding-v;
&-trash {

8
app/styles/common/_empty.scss
View File

@ -1,8 +1,8 @@
.empty-block {
@include display(flex);
@include align-items(center);
@include flex-direction(column);
@include justify-content(center);
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
@include size(100%);
@include position(absolute, 0 null null 0);
text-align: center;

10
app/styles/common/_icon-select.scss
View File

@ -1,10 +1,10 @@
.icon-select {
&__items {
@include display(flex);
@include align-items(flex-start);
@include flex-direction(row);
@include justify-content(flex-start);
@include flex-wrap(wrap);
display: flex;
align-items: flex-start;
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap;
@include user-select(none);
padding-bottom: $base-padding-h;
&--custom {

10
app/styles/common/_modal.scss
View File

@ -11,10 +11,10 @@
&__content {
@include size(100%);
@include display(flex);
@include align-items(stretch);
@include flex-direction(column);
@include justify-content(center);
display: flex;
align-items: stretch;
flex-direction: column;
justify-content: center;
transition: all $base-duration $base-timing;
.modal--hidden & {
@ -47,7 +47,7 @@
}
}
&__body, &__buttons {
@include align-self(center);
align-self: center;
width: 40%;
@include tablet {
width: 90%;