Misc SCSS fixes

- added edit mask shadow
- updated icon font
- updated card edit field action buttons layout
- selection panel scroll
This commit is contained in:
Giulio Cesare Solaroli 2015-03-09 15:32:36 +01:00
parent 8ffe1505f7
commit c21e074e14
9 changed files with 255 additions and 176 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,6 +1,60 @@
{
"IcoMoonType": "selection",
"icons": [
{
"icon": {
"paths": [
"M640.9 63.9c-141.4 0-256 114.6-256 256 0 19.6 2.2 38.6 6.4 56.9l-391.3 391.2v64l64 64h128l64-64v-64h64v-64h64v-64h128l70.8-70.8c18.7 4.3 38.1 6.6 58.1 6.6 141.4 0 256-114.6 256-256s-114.7-255.9-256-255.9zM384 512l-320 320v-64l320-320v64zM704 320c-35.3 0-64-28.7-64-64s28.7-64 64-64 64 28.7 64 64c0 35.3-28.7 64-64 64z"
],
"width": 896,
"attrs": [],
"isMulticolor": false,
"tags": [
"key"
],
"defaultCode": 61513,
"grid": 16
},
"attrs": [],
"properties": {
"id": 91,
"order": 23,
"prevSize": 32,
"code": 61513,
"name": "key",
"ligatures": "generate password"
},
"setIdx": 0,
"iconIdx": 91
},
{
"icon": {
"paths": [
"M512 192c-223.318 0-416.882 130.042-512 320 95.118 189.958 288.682 320 512 320 223.312 0 416.876-130.042 512-320-95.116-189.958-288.688-320-512-320zM764.45 361.704c60.162 38.374 111.142 89.774 149.434 150.296-38.292 60.522-89.274 111.922-149.436 150.296-75.594 48.218-162.89 73.704-252.448 73.704-89.56 0-176.858-25.486-252.452-73.704-60.158-38.372-111.138-89.772-149.432-150.296 38.292-60.524 89.274-111.924 149.434-150.296 3.918-2.5 7.876-4.922 11.86-7.3-9.96 27.328-15.41 56.822-15.41 87.596 0 141.382 114.616 256 256 256 141.382 0 256-114.618 256-256 0-30.774-5.452-60.268-15.408-87.598 3.978 2.378 7.938 4.802 11.858 7.302v0zM512 416c0 53.020-42.98 96-96 96s-96-42.98-96-96 42.98-96 96-96 96 42.982 96 96z"
],
"attrs": [],
"isMulticolor": false,
"tags": [
"eye",
"views",
"vision",
"visit"
],
"defaultCode": 58073,
"grid": 16
},
"attrs": [],
"properties": {
"id": 823,
"order": 21,
"prevSize": 32,
"code": 59854,
"ligatures": "view password",
"name": "eye"
},
"setIdx": 1,
"iconIdx": 206
},
{
"icon": {
"paths": [
@ -133,33 +187,6 @@
"setIdx": 2,
"iconIdx": 4
},
{
"icon": {
"paths": [
"M832 448h-64v-192c0-141.384-114.616-256-256-256s-256 114.616-256 256v192h-64c-35.2 0-64 28.8-64 64v448c0 35.2 28.8 64 64 64h640c35.2 0 64-28.8 64-64v-448c0-35.2-28.8-64-64-64zM512 832c-35.346 0-64-28.654-64-64s28.654-64 64-64 64 28.654 64 64-28.654 64-64 64zM640 448h-256v-192c0-70.58 57.42-128 128-128s128 57.42 128 128v192z"
],
"attrs": [],
"isMulticolor": false,
"tags": [
"lock",
"secure",
"private",
"encrypted"
],
"grid": 16
},
"attrs": [],
"properties": {
"id": 136,
"order": 8,
"prevSize": 32,
"code": 58889,
"name": "lock",
"ligatures": "password"
},
"setIdx": 2,
"iconIdx": 5
},
{
"icon": {
"paths": [
@ -181,7 +208,7 @@
"order": 15,
"prevSize": 32,
"code": 58896,
"name": "lock2",
"name": "locked",
"ligatures": "locked"
},
"setIdx": 2,
@ -234,7 +261,7 @@
"order": 13,
"prevSize": 32,
"code": 58881,
"name": "menu2",
"name": "menu",
"ligatures": "menu"
},
"setIdx": 2,

File diff suppressed because one or more lines are too long

View File

@ -71,7 +71,7 @@
&.selection {
@include flex($selectionPanelFlexWidth, 0);
// height: 100%;
// overflow-y: scroll;
@include overflow-scroll;
}
&.cardContent {
@ -319,6 +319,8 @@ div.cardContent {
@include flexbox;
@include flex-direction(column);
box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.75);
position: relative;
z-index: 10+1;
@ -340,14 +342,6 @@ div.cardContent {
@include flexbox;
@include flex-direction(column);
// .cardDetailToolbar {
// @include flex(none);
// height: $mainCardToolbarHeight;
// line-height: $mainCardToolbarHeight;
// }
}
.content {
@ -364,41 +358,7 @@ div.cardContent {
@include flexbox();
@include flex-direction(column);
height: 100%;
/*
.cardDetailToolbar {
@include flex(none);
height: $mainCardToolbarHeight;
line-height: $mainCardToolbarHeight;
&.commands > div {
@include flexbox();
@include flex-direction(row);
// font-size: 24pt;
.back {
@include flex(auto);
cursor: pointer;
}
.cardMenuOptions {
@include flex(auto);
cursor: pointer;
}
}
&.edit {
ul {
@include flexbox();
@include flex-direction(row);
li {
@include flex(auto);
cursor: pointer;
}
}
}
}
*/
.content {
@include flex(auto);
overflow-y: scroll;

View File

@ -164,4 +164,27 @@
&:-moz-placeholder {@content}
&::-moz-placeholder {@content}
&:-ms-input-placeholder {@content}
}
}
@mixin cursor-grab () {
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;
}
@mixin cursor-grabbing () {
cursor: grabbing;
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
}
@mixin dotted-background () {
// http://codepen.io/aleprieto/pen/nAmIy
background-image: -webkit-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
background-image: -moz-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
background-image: -ms-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
background-image: repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
-webkit-background-size: 3px 3px;
-moz-background-size: 3px 3px;
background-size: 3px 3px;
}

View File

@ -1,5 +1,8 @@
.accountStatus {
background-color: green;
padding: 3px;
font-size: 10pt;
border-bottom: 1px solid white;
&.FULL {
display: none;
@ -24,4 +27,18 @@
&.EXPIRED {
background-color: red;
}
}
&.OFFLINE_COPY {
background-color: $clipperz-blue;
color: white;
.expirationDate {
display: none;
visibility: hidden;
}
.referenceDate {
padding-left: 10px;
}
}
}

View File

@ -204,6 +204,9 @@ $cardViewBasePadding: 10px;
padding: 5px 10px;
border-bottom: 1px solid black;
&.disabled {
color: #ddd;
}
}
}
}
@ -278,6 +281,11 @@ $cardViewBasePadding: 10px;
ul {
li {
text-align: center;
&.disabled {
color: #333;
cursor: default;
}
}
}
@ -360,30 +368,46 @@ $cardViewBasePadding: 10px;
display: block;
margin: $iconMargin;
margin-top: 12px;
cursor: pointer;
color: #ccc;
width: 40px;
font-size: 20pt;
&:hover {
color: rgb(155, 0, 0);
};
}
.toggleLock {
@include align-self(flex-end);
@include icon-font();
.dragHandler {
// @include dotted-background();
@include cursor-grab();
background: repeating-linear-gradient(
0deg,
white,
white 2px,
#ddd 2px,
#ddd 3px
);
width: 28px;
height: 20px;
margin-left: 6px;
display: block;
margin: $iconMargin;
margin-left: $iconMargin * 2;
cursor: pointer;
color: #ccc;
font-size: 20pt;
/*
@include icon-font();
color: #aaa;
&:hover {
color: #888;
font-size: 15pt;
margin: $iconMargin;
margin-left: 10px;
*/
&:active {
@include cursor-grabbing();
};
}
}
.fieldValues {
@ -427,20 +451,40 @@ $cardViewBasePadding: 10px;
@include flex(none);
// @include align-self(center);
@include align-self(flex-start);
span {
display: block;
&.action {
@include icon-font();
color: #aaa;
width: 20px;
height: 20px;
font-size: 15pt;
margin: $iconMargin;
}
&.toggleLock {
@include align-self(flex-end);
@include icon-font();
display: block;
margin: $iconMargin;
margin-left: 9px;
padding-top: 10px;
cursor: pointer;
color: #ccc;
font-size: 18pt;
&:hover {
color: #888;
};
}
}
}
.action {
@include icon-font();
color: #aaa;
// width: 32px;
width: 20px;
// height: 32px;
height: 20px;
// font-size: 20pt;
font-size: 15pt;
margin: $iconMargin;
}
}

View File

@ -2,7 +2,7 @@
background-color: $main-alternate-color;
color: $main-alternate-text-color;
font-size: 18pt;
@include overflow-scroll;
// height: 100%;
$iconColumnWidth: 40px;