PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

Define SCSS variable for resource dir

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
res/css/structures/_MyGroups.scss
View file

@ -54,7 +54,7 @@ limitations under the License.
&:before { &:before {
background-color: $accent-fg-color; background-color: $accent-fg-color;
mask: url('../../img/icons-create-room.svg'); mask: url('$(res)/img/icons-create-room.svg');
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-position: center; mask-position: center;
mask-size: 80%; mask-size: 80%;

4
res/css/structures/_RoomSubList.scss
View file

@ -105,7 +105,7 @@ limitations under the License.
.mx_RoomSubList_addRoom { .mx_RoomSubList_addRoom {
background-color: $roomheader-addroom-color; background-color: $roomheader-addroom-color;
color: $roomsublist-background; color: $roomsublist-background;
background-image: url('../../img/icons-room-add.svg'); background-image: url('$(res)/img/icons-room-add.svg');
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
border-radius: 10px; // 16/2 + 2 padding border-radius: 10px; // 16/2 + 2 padding
@ -120,7 +120,7 @@ limitations under the License.
.mx_RoomSubList_chevron { .mx_RoomSubList_chevron {
pointer-events: none; pointer-events: none;
background-image: url('../../img/topleft-chevron.svg'); background-image: url('$(res)/img/topleft-chevron.svg');
background-repeat: no-repeat; background-repeat: no-repeat;
transition: transform 0.2s ease-in; transition: transform 0.2s ease-in;
width: 10px; width: 10px;

4
res/css/structures/_RoomView.scss
View file

@ -116,7 +116,7 @@ limitations under the License.
.mx_RoomView_messagePanelSearchSpinner { .mx_RoomView_messagePanelSearchSpinner {
flex: 1; flex: 1;
background-image: url('../../img/typing-indicator-2x.gif'); background-image: url('$(res)/img/typing-indicator-2x.gif');
background-position: center 367px; background-position: center 367px;
background-size: 25px; background-size: 25px;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -125,7 +125,7 @@ limitations under the License.
.mx_RoomView_messagePanelSearchSpinner:before { .mx_RoomView_messagePanelSearchSpinner:before {
background-color: $greyed-fg-color; background-color: $greyed-fg-color;
mask: url('../../img/feather-icons/search-input.svg'); mask: url('$(res)/img/feather-icons/search-input.svg');
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-position: center; mask-position: center;
mask-size: 50px; mask-size: 50px;

2
res/css/structures/_SearchBox.scss
View file

@ -16,7 +16,7 @@ limitations under the License.
.mx_SearchBox_closeButton { .mx_SearchBox_closeButton {
cursor: pointer; cursor: pointer;
background-image: url('../../img/icons-close.svg'); background-image: url('$(res)/img/icons-close.svg');
background-repeat: no-repeat; background-repeat: no-repeat;
width: 16px; width: 16px;
height: 16px; height: 16px;

4
res/css/structures/_TagPanel.scss
View file

@ -130,12 +130,12 @@ limitations under the License.
} }
.mx_TagPanel_groupsButton > .mx_GroupsButton:before { .mx_TagPanel_groupsButton > .mx_GroupsButton:before {
mask: url('../../img/feather-icons/users.svg'); mask: url('$(res)/img/feather-icons/users.svg');
mask-position: center 11px; mask-position: center 11px;
} }
.mx_TagPanel_groupsButton > .mx_TagPanel_report:before { .mx_TagPanel_groupsButton > .mx_TagPanel_report:before {
mask: url('../../img/feather-icons/life-buoy.svg'); mask: url('$(res)/img/feather-icons/life-buoy.svg');
mask-position: center 9px; mask-position: center 9px;
} }

2
res/css/views/dialogs/keybackup/_KeyBackupFailedDialog.scss
View file

@ -24,7 +24,7 @@ limitations under the License.
padding-bottom: 10px; padding-bottom: 10px;
&:before { &:before {
mask: url("../../img/e2e/lock-warning.svg"); mask: url("$(res)/img/e2e/lock-warning.svg");
mask-repeat: no-repeat; mask-repeat: no-repeat;
background-color: $primary-fg-color; background-color: $primary-fg-color;
content: ""; content: "";

4
res/css/views/elements/_DirectorySearchBox.scss
View file

@ -44,7 +44,7 @@ input[type=text].mx_DirectorySearchBox_input:focus {
padding-right: 10px; padding-right: 10px;
background-color: $plinth-bg-color; background-color: $plinth-bg-color;
border-radius: 3px; border-radius: 3px;
background-image: url('../../img/icon-return.svg'); background-image: url('$(res)/img/icon-return.svg');
background-position: 8px 70%; background-position: 8px 70%;
background-repeat: no-repeat; background-repeat: no-repeat;
text-indent: 18px; text-indent: 18px;
@ -61,7 +61,7 @@ input[type=text].mx_DirectorySearchBox_input:focus {
.mx_DirectorySearchBox_clear { .mx_DirectorySearchBox_clear {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
background: url('../../img/icon_context_delete.svg'); background: url('$(res)/img/icon_context_delete.svg');
background-position: 0 50%; background-position: 0 50%;
background-repeat: no-repeat; background-repeat: no-repeat;
width: 15px; width: 15px;

2
res/css/views/elements/_ImageView.scss
View file

@ -50,7 +50,7 @@ limitations under the License.
max-height: 100%; max-height: 100%;
/* object-fit hack needed for Chrome due to Chrome not re-laying-out until you refresh */ /* object-fit hack needed for Chrome due to Chrome not re-laying-out until you refresh */
object-fit: contain; object-fit: contain;
/* background-image: url('../../img/trans.png'); */ /* background-image: url('$(res)/img/trans.png'); */
pointer-events: all; pointer-events: all;
} }

2
res/css/views/rooms/_EntityTile.scss
View file

@ -22,7 +22,7 @@ limitations under the License.
} }
.mx_EntityTile:hover { .mx_EntityTile:hover {
background-image: url('../../img/member_chevron.png'); background-image: url('$(res)/img/member_chevron.png');
background-position: center right 10px; background-position: center right 10px;
background-repeat: no-repeat; background-repeat: no-repeat;
padding-right: 30px; padding-right: 30px;

2
res/css/views/rooms/_MemberList.scss
View file

@ -83,7 +83,7 @@ limitations under the License.
.mx_MemberList_invite span { .mx_MemberList_invite span {
margin: 0 auto; 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-repeat: no-repeat;
background-position: center left; background-position: center left;
padding-left: 25px; padding-left: 25px;

2
res/css/views/rooms/_RoomTile.scss
View file

@ -29,7 +29,7 @@ limitations under the License.
display: none; display: none;
flex: 0 0 16px; flex: 0 0 16px;
height: 16px; height: 16px;
background-image: url('../../img/icon_context.svg'); background-image: url('$(res)/img/icon_context.svg');
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
} }

4
res/css/views/rooms/_SearchBar.scss
View file

@ -32,7 +32,7 @@ limitations under the License.
width: 37px; width: 37px;
height: 37px; height: 37px;
background-color: $accent-color; 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-repeat: no-repeat;
mask-position: center; mask-position: center;
} }
@ -55,7 +55,7 @@ limitations under the License.
.mx_SearchBar_cancel { .mx_SearchBar_cancel {
background-color: $warning-color; background-color: $warning-color;
mask: url('../../img/cancel.svg'); mask: url('$(res)/img/cancel.svg');
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-position: center; mask-position: center;
mask-size: 14px; mask-size: 14px;

2
res/css/views/rooms/_TopUnreadMessagesBar.scss
View file

@ -54,7 +54,7 @@ limitations under the License.
position: absolute; position: absolute;
width: 38px; width: 38px;
height: 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-repeat: no-repeat;
mask-position: 9px 13px; mask-position: 9px 13px;
background: $roomtile-name-color; background: $roomtile-name-color;

2
res/css/views/rooms/_WhoIsTypingTile.scss
View file

@ -61,7 +61,7 @@ limitations under the License.
} }
.mx_WhoIsTypingTile_label > span { .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-size: 25px;
background-position: left bottom; background-position: left bottom;
background-repeat: no-repeat; background-repeat: no-repeat;

4
res/themes/dark/css/_dark.scss
View file

@ -149,8 +149,8 @@ $event-redacted-border-color: #000000;
// event timestamp // event timestamp
$event-timestamp-color: #acacac; $event-timestamp-color: #acacac;
$edit-button-url: "../../img/icon_context_message_dark.svg"; $edit-button-url: "$(res)/img/icon_context_message_dark.svg";
$copy-button-url: "../../img/icon_copy_message_dark.svg"; $copy-button-url: "$(res)/img/icon_copy_message_dark.svg";
// e2e // e2e
$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color

1
res/themes/dark/css/dark.scss
View file

@ -1,3 +1,4 @@
@import "../../light/css/_paths.scss";
@import "../../light/css/_fonts.scss"; @import "../../light/css/_fonts.scss";
@import "../../light/css/_base.scss"; @import "../../light/css/_base.scss";
@import "_dark.scss"; @import "_dark.scss";

6
res/themes/dharma/css/_dharma.scss
View file

@ -169,8 +169,8 @@ $event-redacted-border-color: #cccccc;
// event timestamp // event timestamp
$event-timestamp-color: #acacac; $event-timestamp-color: #acacac;
$edit-button-url: "../../img/icon_context_message.svg"; $edit-button-url: "$(res)/img/icon_context_message.svg";
$copy-button-url: "../../img/icon_copy_message.svg"; $copy-button-url: "$(res)/img/icon_copy_message.svg";
// e2e // e2e
$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color
@ -273,7 +273,7 @@ input[type=search].mx_textinput_icon {
// FIXME THEME - Tint by CSS rather than referencing a duplicate asset // FIXME THEME - Tint by CSS rather than referencing a duplicate asset
input[type=text].mx_textinput_icon.mx_textinput_search, input[type=text].mx_textinput_icon.mx_textinput_search,
input[type=search].mx_textinput_icon.mx_textinput_search { input[type=search].mx_textinput_icon.mx_textinput_search {
background-image: url('../../img/feather-icons/search-input.svg'); background-image: url('$(res)/img/feather-icons/search-input.svg');
} }
// dont search UI as not all browsers support it, // dont search UI as not all browsers support it,

16
res/themes/dharma/css/_fonts.scss
View file

@ -11,37 +11,37 @@
font-family: 'Nunito'; font-family: 'Nunito';
font-style: italic; font-style: italic;
font-weight: 400; font-weight: 400;
src: url('../../fonts/Nunito/XRXX3I6Li01BKofIMNaDRss.ttf') format('truetype'); src: url('$(res)/fonts/Nunito/XRXX3I6Li01BKofIMNaDRss.ttf') format('truetype');
} }
@font-face { @font-face {
font-family: 'Nunito'; font-family: 'Nunito';
font-style: italic; font-style: italic;
font-weight: 600; font-weight: 600;
src: url('../../fonts/Nunito/XRXQ3I6Li01BKofIMN5cYtvKUTo.ttf') format('truetype'); src: url('$(res)/fonts/Nunito/XRXQ3I6Li01BKofIMN5cYtvKUTo.ttf') format('truetype');
} }
@font-face { @font-face {
font-family: 'Nunito'; font-family: 'Nunito';
font-style: italic; font-style: italic;
font-weight: 700; font-weight: 700;
src: url('../../fonts/Nunito/XRXQ3I6Li01BKofIMN44Y9vKUTo.ttf') format('truetype'); src: url('$(res)/fonts/Nunito/XRXQ3I6Li01BKofIMN44Y9vKUTo.ttf') format('truetype');
} }
@font-face { @font-face {
font-family: 'Nunito'; font-family: 'Nunito';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
src: url('../../fonts/Nunito/XRXV3I6Li01BKofINeaE.ttf') format('truetype'); src: url('$(res)/fonts/Nunito/XRXV3I6Li01BKofINeaE.ttf') format('truetype');
} }
@font-face { @font-face {
font-family: 'Nunito'; font-family: 'Nunito';
font-style: normal; font-style: normal;
font-weight: 600; font-weight: 600;
src: url('../../fonts/Nunito/XRXW3I6Li01BKofA6sKUYevN.ttf') format('truetype'); src: url('$(res)/fonts/Nunito/XRXW3I6Li01BKofA6sKUYevN.ttf') format('truetype');
} }
@font-face { @font-face {
font-family: 'Nunito'; font-family: 'Nunito';
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
src: url('../../fonts/Nunito/XRXW3I6Li01BKofAjsOUYevN.ttf') format('truetype'); src: url('$(res)/fonts/Nunito/XRXW3I6Li01BKofAjsOUYevN.ttf') format('truetype');
} }
/* /*
@ -51,14 +51,14 @@
@font-face { @font-face {
font-family: 'Fira Mono'; font-family: 'Fira Mono';
src: url('../../fonts/Fira_Mono/FiraMono-Regular.ttf') format('truetype'); src: url('$(res)/fonts/Fira_Mono/FiraMono-Regular.ttf') format('truetype');
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'Fira Mono'; font-family: 'Fira Mono';
src: url('../../fonts/Fira_Mono/FiraMono-Bold.ttf') format('truetype'); src: url('$(res)/fonts/Fira_Mono/FiraMono-Bold.ttf') format('truetype');
font-weight: 700; font-weight: 700;
font-style: normal; font-style: normal;
} }

1
res/themes/dharma/css/dharma.scss
View file

@ -1,3 +1,4 @@
@import "../../light/css/_paths.scss";
@import "_fonts.scss"; @import "_fonts.scss";
@import "_dharma.scss"; @import "_dharma.scss";
@import "../../../../res/css/_components.scss"; @import "../../../../res/css/_components.scss";

4
res/themes/light/css/_base.scss
View file

@ -160,8 +160,8 @@ $event-redacted-border-color: #cccccc;
// event timestamp // event timestamp
$event-timestamp-color: #acacac; $event-timestamp-color: #acacac;
$edit-button-url: "../../img/icon_context_message.svg"; $edit-button-url: "$(res)/img/icon_context_message.svg";
$copy-button-url: "../../img/icon_copy_message.svg"; $copy-button-url: "$(res)/img/icon_copy_message.svg";
// e2e // e2e
$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color

16
res/themes/light/css/_fonts.scss
View file

@ -7,42 +7,42 @@
*/ */
@font-face { @font-face {
font-family: 'Open Sans'; font-family: 'Open Sans';
src: url('../../fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype'); src: url('$(res)/fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype');
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'Open Sans'; font-family: 'Open Sans';
src: url('../../fonts/Open_Sans/OpenSans-Italic.ttf') format('truetype'); src: url('$(res)/fonts/Open_Sans/OpenSans-Italic.ttf') format('truetype');
font-weight: 400; font-weight: 400;
font-style: italic; font-style: italic;
} }
@font-face { @font-face {
font-family: 'Open Sans'; font-family: 'Open Sans';
src: url('../../fonts/Open_Sans/OpenSans-Semibold.ttf') format('truetype'); src: url('$(res)/fonts/Open_Sans/OpenSans-Semibold.ttf') format('truetype');
font-weight: 600; font-weight: 600;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'Open Sans'; font-family: 'Open Sans';
src: url('../../fonts/Open_Sans/OpenSans-SemiboldItalic.ttf') format('truetype'); src: url('$(res)/fonts/Open_Sans/OpenSans-SemiboldItalic.ttf') format('truetype');
font-weight: 600; font-weight: 600;
font-style: italic; font-style: italic;
} }
@font-face { @font-face {
font-family: 'Open Sans'; font-family: 'Open Sans';
src: url('../../fonts/Open_Sans/OpenSans-Bold.ttf') format('truetype'); src: url('$(res)/fonts/Open_Sans/OpenSans-Bold.ttf') format('truetype');
font-weight: 700; font-weight: 700;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'Open Sans'; font-family: 'Open Sans';
src: url('../../fonts/Open_Sans/OpenSans-BoldItalic.ttf') format('truetype'); src: url('$(res)/fonts/Open_Sans/OpenSans-BoldItalic.ttf') format('truetype');
font-weight: 700; font-weight: 700;
font-style: italic; font-style: italic;
} }
@ -54,14 +54,14 @@
@font-face { @font-face {
font-family: 'Fira Mono'; font-family: 'Fira Mono';
src: url('../../fonts/Fira_Mono/FiraMono-Regular.ttf') format('truetype'); src: url('$(res)/fonts/Fira_Mono/FiraMono-Regular.ttf') format('truetype');
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'Fira Mono'; font-family: 'Fira Mono';
src: url('../../fonts/Fira_Mono/FiraMono-Bold.ttf') format('truetype'); src: url('$(res)/fonts/Fira_Mono/FiraMono-Bold.ttf') format('truetype');
font-weight: 700; font-weight: 700;
font-style: normal; font-style: normal;
} }

3
res/themes/light/css/_paths.scss Normal file
View file

@ -0,0 +1,3 @@
// Path from root SCSS file (such as `light.scss`) to `res` dir in the source tree
// This value is overridden by external themes in `riot-web`.
$res: ../../..;

1
res/themes/light/css/light.scss
View file

@ -1,3 +1,4 @@
@import "_paths.scss";
@import "_fonts.scss"; @import "_fonts.scss";
@import "_base.scss"; @import "_base.scss";
@import "../../../../res/css/_components.scss"; @import "../../../../res/css/_components.scss";