Define SCSS variable for resource dir

Adds a `$res` SCSS variable set to the path from the root SCSS file to the `res`
directory.

This is a different base path than previously used in CSS URLs (it goes up 3
directories instead of 2), because Webpack will now be resolving images relative
to the root SCSS file, so the path corresponds to a source tree location,
instead of a path in the build output tree.

Defining this variable has two main goals:

* URLs are a bit easier to read
* The path can be overridden, which is needed for external (riot-web) themes
This commit is contained in:
J. Ryan Stinnett
2018-12-31 17:22:40 -06:00
parent 7678b9c43b
commit b2387f4cff
23 changed files with 48 additions and 42 deletions
+1 -1
View File
@@ -22,7 +22,7 @@ limitations under the License.
}
.mx_EntityTile:hover {
background-image: url('../../img/member_chevron.png');
background-image: url('$(res)/img/member_chevron.png');
background-position: center right 10px;
background-repeat: no-repeat;
padding-right: 30px;
+1 -1
View File
@@ -83,7 +83,7 @@ limitations under the License.
.mx_MemberList_invite span {
margin: 0 auto;
background-image: url('../../img/feather-icons/user-add.svg');
background-image: url('$(res)/img/feather-icons/user-add.svg');
background-repeat: no-repeat;
background-position: center left;
padding-left: 25px;
+1 -1
View File
@@ -29,7 +29,7 @@ limitations under the License.
display: none;
flex: 0 0 16px;
height: 16px;
background-image: url('../../img/icon_context.svg');
background-image: url('$(res)/img/icon_context.svg');
background-repeat: no-repeat;
background-position: center;
}
+2 -2
View File
@@ -32,7 +32,7 @@ limitations under the License.
width: 37px;
height: 37px;
background-color: $accent-color;
mask: url('../../img/feather-icons/search-input.svg');
mask: url('$(res)/img/feather-icons/search-input.svg');
mask-repeat: no-repeat;
mask-position: center;
}
@@ -55,7 +55,7 @@ limitations under the License.
.mx_SearchBar_cancel {
background-color: $warning-color;
mask: url('../../img/cancel.svg');
mask: url('$(res)/img/cancel.svg');
mask-repeat: no-repeat;
mask-position: center;
mask-size: 14px;
@@ -54,7 +54,7 @@ limitations under the License.
position: absolute;
width: 38px;
height: 38px;
mask: url('../../img/icon-jump-to-first-unread.svg');
mask: url('$(res)/img/icon-jump-to-first-unread.svg');
mask-repeat: no-repeat;
mask-position: 9px 13px;
background: $roomtile-name-color;
+1 -1
View File
@@ -61,7 +61,7 @@ limitations under the License.
}
.mx_WhoIsTypingTile_label > span {
background-image: url('../../img/typing-indicator-2x.gif');
background-image: url('$(res)/img/typing-indicator-2x.gif');
background-size: 25px;
background-position: left bottom;
background-repeat: no-repeat;