Skip to content

Commit

Permalink
Refactor photo styles.
Browse files Browse the repository at this point in the history
  • Loading branch information
flachware committed Mar 1, 2017
1 parent 57a2feb commit 004c426
Show file tree
Hide file tree
Showing 5 changed files with 51 additions and 48 deletions.
3 changes: 2 additions & 1 deletion src/components/photo/grid.js
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,8 @@ class PhotoGrid extends PhotoIterator {
get classes() {
return {
...super.classes,
'photo-grid': true,
'photo': true,
'grid': true,
'click-catcher': true
}
}
Expand Down
3 changes: 2 additions & 1 deletion src/components/photo/list.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,8 @@ class PhotoList extends PhotoIterator {
get classes() {
return {
...super.classes,
'photo-list': true,
'photo': true,
'list': true,
'click-catcher': true
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
// Photo grid
// --------------------------------------------------

.photo-grid {
.photo.grid {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,43 +1,43 @@
//
// Photo list
// --------------------------------------------------

.photo-list {
height: calc(100% - #{$space-min});
overflow-y: auto;
line-height: $row-height;

.photo {
display: flex;
align-items: center;
padding: 0 $component-padding-horizontal;
position: relative;

&.active {
color: $photo-list-active-color;
background: $photo-list-active-bg;
}
}

&:focus {
.photo {
&.active {
color: $photo-list-focus-color;
background: $photo-list-focus-bg;
}
}
}

.thumbnail {
margin-right: $space-xs;
}

.title {
flex: 1 1 0;
min-width: 0; // Fix truncation

.editable {
@include css-truncation;
}
}
}
//
// Photo list
// --------------------------------------------------

.photo.list {
height: calc(100% - #{$space-min});
overflow-y: auto;
line-height: $row-height;

.photo {
display: flex;
align-items: center;
padding: 0 $component-padding-horizontal;
position: relative;

&.active {
color: $photo-list-active-color;
background: $photo-list-active-bg;
}
}

&:focus {
.photo {
&.active {
color: $photo-list-focus-color;
background: $photo-list-focus-bg;
}
}
}

.thumbnail {
margin-right: $space-xs;
}

.title {
flex: 1 1 0;
min-width: 0; // Fix truncation

.editable {
@include css-truncation;
}
}
}
5 changes: 3 additions & 2 deletions src/stylesheets/windows/_project.scss
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,6 @@
"../components/icons",
"../components/search",
"../components/button",
"../components/photo-list",
"../components/photo-grid",
"../components/tabs",
"../components/metadata",
"../components/editable",
Expand All @@ -52,6 +50,9 @@
"../components/thumbnail",
"../components/cover-image",

"../components/photo/list",
"../components/photo/grid",

"../components/note/list",
"../components/note/pad";

Expand Down

0 comments on commit 004c426

Please sign in to comment.