secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Material icons

Browse Source
This commit is contained in:
James Barnsley
2018-05-15 21:30:57 +12:00
parent 9d398e53c9
commit c8d0d90d1a
105 changed files with 1351 additions and 946 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/scss/components/_header.scss
View File

@ -7,16 +7,13 @@ main {
h1 {
display: inline-block;
}
.header-icon {
display: inline-block;
padding-right: 14px;
vertical-align: bottom;
margin-bottom: 8px;
svg {
height: 2.6rem;
& > .icon {
display: inline-block;
padding-right: 14px;
vertical-align: bottom;
margin-bottom: 8px;
font-size: 0.9em;
}
}

441
src/scss/components/_icon.scss
View File

@ -1,230 +1,211 @@
@font-face {
font-family: 'iris';
src:
url('../assets/fonts/iris.ttf?wncwx9') format('truetype'),
url('../assets/fonts/iris.woff?wncwx9') format('woff'),
url('../assets/fonts/iris.svg?wncwx9#iris') format('svg');
font-weight: normal;
font-style: normal;
}
$icon-back: \e900;
$icon-broadcast: \e901;
$icon-cd: \e902;
$icon-chevron-left: \e903;
$icon-chevron-right: \e904;
$icon-close: \e905;
$icon-cog: \e906;
$icon-compass: \e907;
$icon-connection: \e908;
$icon-consume: \e909;
$icon-filter: \e90a;
$icon-folder: \e90b;
$icon-grid: \e90c;
$icon-leaf: \e90d;
$icon-list: \e90e;
$icon-local: \e90f;
$icon-mic: \e910;
$icon-music: \e911;
$icon-pause: \e912;
$icon-play: \e913;
$icon-play-alt: \e914;
$icon-playlist: \e915;
$icon-repeat: \e916;
$icon-search: \e917;
$icon-sections: \e918;
$icon-server: \e919;
$icon-shuffle: \e91a;
$icon-skip: \e91b;
$icon-soundcloud: \e91c;
$icon-spotify: \e91d;
$icon-star: \e91e;
$icon-stop: \e91f;
$icon-websocket: \e920;
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'iris' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@function unicode($str) {
@return unquote("\"") + $str + unquote("\"");
}
.icon-back {
&:before {
content: unicode($icon-back);
}
}
.icon-broadcast {
&:before {
content: unicode($icon-broadcast);
}
}
.icon-cd {
&:before {
content: unicode($icon-cd);
}
}
.icon-chevron-left {
&:before {
content: unicode($icon-chevron-left);
}
}
.icon-chevron-right {
&:before {
content: unicode($icon-chevron-right);
}
}
.icon-close {
&:before {
content: unicode($icon-close);
}
}
.icon-cog {
&:before {
content: unicode($icon-cog);
}
}
.icon-compass {
&:before {
content: unicode($icon-compass);
}
}
.icon-connection {
&:before {
content: unicode($icon-connection);
}
}
.icon-consume {
&:before {
content: unicode($icon-consume);
}
}
.icon-filter {
&:before {
content: unicode($icon-filter);
}
}
.icon-folder {
&:before {
content: unicode($icon-folder);
}
}
.icon-grid {
&:before {
content: unicode($icon-grid);
}
}
.icon-leaf {
&:before {
content: unicode($icon-leaf);
}
}
.icon-list {
&:before {
content: unicode($icon-list);
}
}
.icon-local {
&:before {
content: unicode($icon-local);
}
}
.icon-mic {
&:before {
content: unicode($icon-mic);
}
}
.icon-music {
&:before {
content: unicode($icon-music);
}
}
.icon-pause {
&:before {
content: unicode($icon-pause);
}
}
.icon-play {
&:before {
content: unicode($icon-play);
}
}
.icon-play-alt {
&:before {
content: unicode($icon-play-alt);
}
}
.icon-playlist {
&:before {
content: unicode($icon-playlist);
}
}
.icon-repeat {
&:before {
content: unicode($icon-repeat);
}
}
.icon-search {
&:before {
content: unicode($icon-search);
}
}
.icon-sections {
&:before {
content: unicode($icon-sections);
}
}
.icon-server {
&:before {
content: unicode($icon-server);
}
}
.icon-shuffle {
&:before {
content: unicode($icon-shuffle);
}
}
.icon-skip {
&:before {
content: unicode($icon-skip);
}
}
.icon-soundcloud {
&:before {
content: unicode($icon-soundcloud);
}
}
.icon-spotify {
&:before {
content: unicode($icon-spotify);
}
}
.icon-star {
&:before {
content: unicode($icon-star);
}
}
.icon-stop {
&:before {
content: unicode($icon-stop);
}
}
.icon-websocket {
&:before {
content: unicode($icon-websocket);
}
}
/**
* Iris icon font
**/
@font-face {
font-family: 'iris';
src:
url('../assets/fonts/iris.ttf?wncwx9') format('truetype'),
url('../assets/fonts/iris.woff?wncwx9') format('woff'),
url('../assets/fonts/iris.svg?wncwx9#iris') format('svg');
font-weight: normal;
font-style: normal;
}
$icon-back: \e900;
$icon-broadcast: \e901;
$icon-cd: \e902;
$icon-chevron-left: \e903;
$icon-chevron-right: \e904;
$icon-close: \e905;
$icon-cog: \e906;
$icon-compass: \e907;
$icon-connection: \e908;
$icon-consume: \e909;
$icon-filter: \e90a;
$icon-folder: \e90b;
$icon-grid: \e90c;
$icon-leaf: \e90d;
$icon-list: \e90e;
$icon-local: \e90f;
$icon-mic: \e910;
$icon-music: \e911;
$icon-pause: \e912;
$icon-play: \e913;
$icon-play-alt: \e914;
$icon-playlist: \e915;
$icon-repeat: \e916;
$icon-search: \e917;
$icon-sections: \e918;
$icon-server: \e919;
$icon-shuffle: \e91a;
$icon-skip: \e91b;
$icon-soundcloud: \e91c;
$icon-spotify: \e91d;
$icon-star: \e91e;
$icon-stop: \e91f;
$icon-websocket: \e920;
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'iris' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
display: inline-block;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-back:before {
content: "\e900";
}
.icon-broadcast:before {
content: "\e901";
}
.icon-cd:before {
content: "\e902";
}
.icon-chevron-left:before {
content: "\e903";
}
.icon-chevron-right:before {
content: "\e904";
}
.icon-close:before {
content: "\e905";
}
.icon-cog:before {
content: "\e906";
}
.icon-compass:before {
content: "\e907";
}
.icon-connection:before {
content: "\e908";
}
.icon-consume:before {
content: "\e909";
}
.icon-filter:before {
content: "\e90a";
}
.icon-folder:before {
content: "\e90b";
}
.icon-folder-open:before {
content: "\e90c";
}
.icon-grid:before {
content: "\e90d";
}
.icon-leaf:before {
content: "\e90e";
}
.icon-list:before {
content: "\e90f";
}
.icon-local:before {
content: "\e910";
}
.icon-mic:before {
content: "\e911";
}
.icon-music:before {
content: "\e912";
}
.icon-pause:before {
content: "\e913";
}
.icon-play:before {
content: "\e914";
}
.icon-play-alt:before {
content: "\e915";
}
.icon-playlist:before {
content: "\e916";
}
.icon-repeat:before {
content: "\e917";
}
.icon-search:before {
content: "\e918";
}
.icon-sections:before {
content: "\e919";
}
.icon-server:before {
content: "\e91a";
}
.icon-shuffle:before {
content: "\e91b";
}
.icon-skip:before {
content: "\e91c";
}
.icon-soundcloud:before {
content: "\e91d";
}
.icon-speaker:before {
content: "\e91e";
}
.icon-speaker-group:before {
content: "\e91f";
}
.icon-spotify:before {
content: "\e920";
}
.icon-star:before {
content: "\e921";
}
.icon-stop:before {
content: "\e922";
}
/**
* Material icons
**/
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(../assets/fonts/MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(../assets/fonts/MaterialIcons-Regular.woff2) format('woff2'),
url(../assets/fonts/MaterialIcons-Regular.woff) format('woff'),
url(../assets/fonts/MaterialIcons-Regular.ttf) format('truetype');
}
.material-icon {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}

35
src/scss/components/_playback-controls.scss
View File

@ -83,34 +83,16 @@
.control {
@include animate();
font-size: 12px;
font-size: 14px;
color: $white;
cursor: pointer;
padding: 10px 8px;
padding: 10px 6px;
display: inline-block;
vertical-align: bottom;
opacity: 0.8;
.icon {
svg {
height: 12px;
}
}
&.play {
margin-bottom: -6px;
.icon {
font-size: 2em;
}
}
&.active {
color: $turquoise !important;
svg {
fill: $turquoise !important;
}
}
&:hover {
@ -123,15 +105,22 @@
bottom: 8px;
&.playback {
bottom: 8px;
bottom: 7px;
left: 10px;
width: 125px;
width: 135px;
text-align: center;
.control {
&.play {
font-size: 30px;
margin-bottom: -8px;
}
}
}
&.progress {
bottom: 10px;
left: 140px;
left: 150px;
right: 260px;
padding-left: 20px;
padding-right: 20px;

4
src/scss/components/_sidebar.scss
View File

@ -57,7 +57,9 @@ aside{
.icon {
padding-right: 6px;
font-size: 0.8em;
vertical-align: top;
margin-top: -1px;
font-size: 14px;
}
.status {