diff --git a/front/package.json b/front/package.json
index 66ff72d9ceabe4500f0a74a44863fbe16cee343d..c39805d4f5a78331322c0d460ba62950f637957b 100644
--- a/front/package.json
+++ b/front/package.json
@@ -28,7 +28,8 @@
"vue-upload-component": "^2.7.4",
"vuedraggable": "^2.14.1",
"vuex": "^3.0.1",
- "vuex-persistedstate": "^2.4.2"
+ "vuex-persistedstate": "^2.4.2",
+ "vuex-router-sync": "^5.0.0"
},
"devDependencies": {
"autoprefixer": "^6.7.2",
diff --git a/front/src/App.vue b/front/src/App.vue
index d1d63e65143df782703d035a14c8ca0f21da78e1..d310c3ca9d2ab2183337b35ea9321509dec0081c 100644
--- a/front/src/App.vue
+++ b/front/src/App.vue
@@ -40,6 +40,7 @@ export default {
// and we end up with CSS rules not applied,
// see https://github.com/webpack/webpack/issues/215
@import 'semantic/semantic.css';
+@import 'style/vendor/media';
#app {
@@ -48,17 +49,19 @@ export default {
-moz-osx-font-smoothing: grayscale;
}
.main.pusher, .footer {
- margin-left: 350px !important;
+ @include media(">desktop") {
+ margin-left: 350px !important;
+ }
transform: none !important;
}
.main-pusher {
padding: 1.5rem 0;
}
-#footer {
- padding: 4em;
-}
-.ui.stripe.segment {
- padding: 4em;
+.ui.stripe.segment, #footer {
+ padding: 2em;
+ @include media(">tablet") {
+ padding: 4em;
+ }
}
.ui.small.text.container {
diff --git a/front/src/components/Sidebar.vue b/front/src/components/Sidebar.vue
index a315aab199c341a24db3baed09cdad32a813975b..6aaf04c42a0dd2ed0e7803f924e8adca719fe302 100644
--- a/front/src/components/Sidebar.vue
+++ b/front/src/components/Sidebar.vue
@@ -1,13 +1,17 @@
<template>
-<div class="ui vertical left visible wide sidebar">
+<div :class="['ui', 'vertical', 'left', 'visible', 'wide', {'collapsed': isCollapsed}, 'sidebar',]">
<div class="ui inverted segment header-wrapper">
- <search-bar>
+ <search-bar @search="isCollapsed = false">
<router-link :title="'Funkwhale'" :to="{name: 'index'}">
<i class="logo bordered inverted orange big icon">
<logo class="logo"></logo>
</i>
</router-link>
-
+ <span
+ slot="after"
+ @click="isCollapsed = !isCollapsed"
+ :class="['ui', 'basic', 'big', {'inverted': isCollapsed}, 'orange', 'icon', 'collapse', 'button']">
+ <i class="sidebar icon"></i></span>
</search-bar>
</div>
@@ -49,7 +53,7 @@
</div>
</div>
<div class="ui bottom attached tab" data-tab="queue">
- <table class="ui compact inverted very basic fixed single line table">
+ <table class="ui compact inverted very basic fixed single line unstackable table">
<draggable v-model="queue.tracks" element="tbody" @update="reorder">
<tr @click="$store.dispatch('queue/currentIndex', index)" v-for="(track, index) in queue.tracks" :key="index" :class="[{'active': index === queue.currentIndex}]">
<td class="right aligned">{{ index + 1}}</td>
@@ -111,7 +115,8 @@ export default {
},
data () {
return {
- backend: backend
+ backend: backend,
+ isCollapsed: true
}
},
mounted () {
@@ -119,7 +124,8 @@ export default {
},
computed: {
...mapState({
- queue: state => state.queue
+ queue: state => state.queue,
+ url: state => state.route.path
})
},
methods: {
@@ -129,19 +135,41 @@ export default {
reorder: function (oldValue, newValue) {
this.$store.commit('queue/reorder', {oldValue, newValue})
}
+ },
+ watch: {
+ url: function () {
+ this.isCollapsed = true
+ }
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
+@import '../style/vendor/media';
$sidebar-color: #1B1C1D;
.sidebar {
- display:flex;
- flex-direction:column;
- justify-content: space-between;
+ @include media(">tablet") {
+ display:flex;
+ flex-direction:column;
+ justify-content: space-between;
+ }
+ @include media(">desktop") {
+ .collapse.button {
+ display: none;
+ }
+ }
+ @include media("<desktop") {
+ position: static !important;
+ width: 100% !important;
+ &.collapsed {
+ .menu-area, .player-wrapper, .tabs {
+ display: none;
+ }
+ }
+ }
> div {
margin: 0;
@@ -160,7 +188,12 @@ $sidebar-color: #1B1C1D;
}
.tabs {
overflow-y: auto;
- height: 0px;
+ @include media(">tablet") {
+ height: 0px;
+ }
+ @include media("<desktop") {
+ max-height: 400px;
+ }
}
.tab[data-tab="queue"] {
tr {
@@ -174,7 +207,6 @@ $sidebar-color: #1B1C1D;
.ui.inverted.segment.header-wrapper {
padding: 0;
- padding-bottom: 1rem;
}
.tabs {
flex: 1;
@@ -191,9 +223,14 @@ $sidebar-color: #1B1C1D;
}
.ui.search {
- display: inline-block;
+ display: block;
> a {
margin-right: 1.5rem;
}
+ .collapse.button {
+ margin-right: 0.5rem;
+ margin-top: 0.5rem;
+ float: right;
+ }
}
</style>
diff --git a/front/src/components/audio/Player.vue b/front/src/components/audio/Player.vue
index 500f4dc1d2b09e26cf036b871f842ca608b81d3b..9388c2682914f5d3b0623c01eccee202c61d58e3 100644
--- a/front/src/components/audio/Player.vue
+++ b/front/src/components/audio/Player.vue
@@ -10,7 +10,7 @@
:track="currentTrack">
</audio-track>
- <div v-if="currentTrack" class="track-area ui items">
+ <div v-if="currentTrack" class="track-area ui unstackable items">
<div class="ui inverted item">
<div class="ui tiny image">
<img v-if="currentTrack.album.cover" :src="Track.getCover(currentTrack)">
diff --git a/front/src/components/audio/SearchBar.vue b/front/src/components/audio/SearchBar.vue
index 9d8b39f870cac19021fc56d9df3368d8f05f6ddf..56a8e77be1f1719b66c1c72cc3d1e07d45a71853 100644
--- a/front/src/components/audio/SearchBar.vue
+++ b/front/src/components/audio/SearchBar.vue
@@ -6,6 +6,7 @@
<i class="search icon"></i>
</div>
<div class="results"></div>
+ <slot name="after"></slot>
</div>
</template>
@@ -25,6 +26,9 @@ export default {
onSelect (result, response) {
router.push(result.routerUrl)
},
+ onSearchQuery (query) {
+ self.$emit('search')
+ },
apiSettings: {
beforeXHR: function (xhrObject) {
xhrObject.setRequestHeader('Authorization', self.$store.getters['auth/header'])
diff --git a/front/src/components/audio/album/Card.vue b/front/src/components/audio/album/Card.vue
index 4c803b29cc704fbc7e05258bfe595ee9b6908d99..968b828a49df356baf3ab104edc6e7fa5c811bc5 100644
--- a/front/src/components/audio/album/Card.vue
+++ b/front/src/components/audio/album/Card.vue
@@ -14,7 +14,7 @@
</router-link>
</div>
<div class="description" v-if="mode === 'rich'">
- <table class="ui very basic fixed single line compact table">
+ <table class="ui very basic fixed single line compact unstackable table">
<tbody>
<tr v-for="track in tracks">
<td>
diff --git a/front/src/components/audio/artist/Card.vue b/front/src/components/audio/artist/Card.vue
index 8a02163fbb17258badb78fe6f4d133e5096f6749..9a82d6c8f315e09ab6d6ce2fb08c491ec31183e9 100644
--- a/front/src/components/audio/artist/Card.vue
+++ b/front/src/components/audio/artist/Card.vue
@@ -7,7 +7,7 @@
</router-link>
</div>
<div class="description">
- <table class="ui compact very basic fixed single line table">
+ <table class="ui compact very basic fixed single line unstackable table">
<tbody>
<tr v-for="album in albums">
<td>
diff --git a/front/src/components/audio/track/Table.vue b/front/src/components/audio/track/Table.vue
index 8a591d3bd05e9542484a2b8bf8ef9b931363a837..00bcf9f7de239ab6f54f1925d7550760aba95c23 100644
--- a/front/src/components/audio/track/Table.vue
+++ b/front/src/components/audio/track/Table.vue
@@ -1,5 +1,5 @@
<template>
- <table class="ui compact very basic fixed single line table">
+ <table class="ui compact very basic fixed single line unstackable table">
<thead>
<tr>
<th></th>
diff --git a/front/src/components/library/Library.vue b/front/src/components/library/Library.vue
index c27313dc36d2a9d08c0cbba2c0e704c7527c5063..5fe192022c8e34416259118f262fb87076e98458 100644
--- a/front/src/components/library/Library.vue
+++ b/front/src/components/library/Library.vue
@@ -22,8 +22,12 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
+@import '../../style/vendor/media';
+
.library.pusher > .ui.secondary.menu {
- margin: 0 2.5rem;
+ @include media(">tablet") {
+ margin: 0 2.5rem;
+ }
.item {
padding-top: 1.5em;
padding-bottom: 1.5em;
@@ -37,7 +41,10 @@ export default {
padding: 0;
.segment-content {
margin: 0 auto;
- padding: 4em;
+ padding: 2em;
+ @include media(">tablet") {
+ padding: 4em;
+ }
}
&.with-background {
.header {
diff --git a/front/src/components/library/import/BatchDetail.vue b/front/src/components/library/import/BatchDetail.vue
index 621078b1503e870585a8f32af0f9a6363cdaf31c..417fd55c2bc6f208208bfb16963d6b1d4d6f5d44 100644
--- a/front/src/components/library/import/BatchDetail.vue
+++ b/front/src/components/library/import/BatchDetail.vue
@@ -17,7 +17,7 @@
<div v-if="batch.status === 'pending'" class="label">Importing {{ batch.jobs.length }} tracks...</div>
<div v-if="batch.status === 'finished'" class="label">Imported {{ batch.jobs.length }} tracks!</div>
</div>
- <table class="ui table">
+ <table class="ui unstackable table">
<thead>
<tr>
<th>Job ID</th>
diff --git a/front/src/components/library/import/BatchList.vue b/front/src/components/library/import/BatchList.vue
index 8133d8e212ebdfe09ead0ecf6d3d56c97c2f455f..de4fef554c5c4699ec1d501dbcbc471dc28d2379 100644
--- a/front/src/components/library/import/BatchList.vue
+++ b/front/src/components/library/import/BatchList.vue
@@ -12,7 +12,7 @@
:disabled="!nextLink">Next <i class="right arrow icon"></i></button>
<div class="ui hidden clearing divider"></div>
<div class="ui hidden clearing divider"></div>
- <table v-if="results.length > 0" class="ui table">
+ <table v-if="results.length > 0" class="ui unstackable table">
<thead>
<tr>
<th>ID</th>
diff --git a/front/src/main.js b/front/src/main.js
index da6a0844230e08d99a4854bf91c6c37adaa09bf0..d1ff90c3256846b65848021e1abf0f0b3fb19bc7 100644
--- a/front/src/main.js
+++ b/front/src/main.js
@@ -12,6 +12,9 @@ import axios from 'axios'
import VueLazyload from 'vue-lazyload'
import store from './store'
import config from './config'
+import { sync } from 'vuex-router-sync'
+
+sync(store, router)
window.$ = window.jQuery = require('jquery')
diff --git a/front/src/style/vendor/_media.scss b/front/src/style/vendor/_media.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2328eff8cf577a82454de1d2fcb175bf60a1404d
--- /dev/null
+++ b/front/src/style/vendor/_media.scss
@@ -0,0 +1,567 @@
+@charset "UTF-8";
+
+// _ _ _ _ _
+// (_) | | | | | (_)
+// _ _ __ ___| |_ _ __| | ___ _ __ ___ ___ __| |_ __ _
+// | | '_ \ / __| | | | |/ _` |/ _ \ | '_ ` _ \ / _ \/ _` | |/ _` |
+// | | | | | (__| | |_| | (_| | __/ | | | | | | __/ (_| | | (_| |
+// |_|_| |_|\___|_|\__,_|\__,_|\___| |_| |_| |_|\___|\__,_|_|\__,_|
+//
+// Simple, elegant and maintainable media queries in Sass
+// v1.4.9
+//
+// http://include-media.com
+//
+// Authors: Eduardo Boucas (@eduardoboucas)
+// Hugo Giraudel (@hugogiraudel)
+//
+// This project is licensed under the terms of the MIT license
+
+
+////
+/// include-media library public configuration
+/// @author Eduardo Boucas
+/// @access public
+////
+
+
+///
+/// Creates a list of global breakpoints
+///
+/// @example scss - Creates a single breakpoint with the label `phone`
+/// $breakpoints: ('phone': 320px);
+///
+$breakpoints: (
+ 'phone': 320px,
+ 'tablet': 768px,
+ 'desktop': 1024px
+) !default;
+
+
+///
+/// Creates a list of static expressions or media types
+///
+/// @example scss - Creates a single media type (screen)
+/// $media-expressions: ('screen': 'screen');
+///
+/// @example scss - Creates a static expression with logical disjunction (OR operator)
+/// $media-expressions: (
+/// 'retina2x': '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)'
+/// );
+///
+$media-expressions: (
+ 'screen': 'screen',
+ 'print': 'print',
+ 'handheld': 'handheld',
+ 'landscape': '(orientation: landscape)',
+ 'portrait': '(orientation: portrait)',
+ 'retina2x': '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)',
+ 'retina3x': '(-webkit-min-device-pixel-ratio: 3), (min-resolution: 350dpi), (min-resolution: 3dppx)'
+) !default;
+
+
+///
+/// Defines a number to be added or subtracted from each unit when declaring breakpoints with exclusive intervals
+///
+/// @example scss - Interval for pixels is defined as `1` by default
+/// @include media('>128px') {}
+///
+/// /* Generates: */
+/// @media (min-width: 129px) {}
+///
+/// @example scss - Interval for ems is defined as `0.01` by default
+/// @include media('>20em') {}
+///
+/// /* Generates: */
+/// @media (min-width: 20.01em) {}
+///
+/// @example scss - Interval for rems is defined as `0.1` by default, to be used with `font-size: 62.5%;`
+/// @include media('>2.0rem') {}
+///
+/// /* Generates: */
+/// @media (min-width: 2.1rem) {}
+///
+$unit-intervals: (
+ 'px': 1,
+ 'em': 0.01,
+ 'rem': 0.1,
+ '': 0
+) !default;
+
+///
+/// Defines whether support for media queries is available, useful for creating separate stylesheets
+/// for browsers that don't support media queries.
+///
+/// @example scss - Disables support for media queries
+/// $im-media-support: false;
+/// @include media('>=tablet') {
+/// .foo {
+/// color: tomato;
+/// }
+/// }
+///
+/// /* Generates: */
+/// .foo {
+/// color: tomato;
+/// }
+///
+$im-media-support: true !default;
+
+///
+/// Selects which breakpoint to emulate when support for media queries is disabled. Media queries that start at or
+/// intercept the breakpoint will be displayed, any others will be ignored.
+///
+/// @example scss - This media query will show because it intercepts the static breakpoint
+/// $im-media-support: false;
+/// $im-no-media-breakpoint: 'desktop';
+/// @include media('>=tablet') {
+/// .foo {
+/// color: tomato;
+/// }
+/// }
+///
+/// /* Generates: */
+/// .foo {
+/// color: tomato;
+/// }
+///
+/// @example scss - This media query will NOT show because it does not intercept the desktop breakpoint
+/// $im-media-support: false;
+/// $im-no-media-breakpoint: 'tablet';
+/// @include media('>=desktop') {
+/// .foo {
+/// color: tomato;
+/// }
+/// }
+///
+/// /* No output */
+///
+$im-no-media-breakpoint: 'desktop' !default;
+
+///
+/// Selects which media expressions are allowed in an expression for it to be used when media queries
+/// are not supported.
+///
+/// @example scss - This media query will show because it intercepts the static breakpoint and contains only accepted media expressions
+/// $im-media-support: false;
+/// $im-no-media-breakpoint: 'desktop';
+/// $im-no-media-expressions: ('screen');
+/// @include media('>=tablet', 'screen') {
+/// .foo {
+/// color: tomato;
+/// }
+/// }
+///
+/// /* Generates: */
+/// .foo {
+/// color: tomato;
+/// }
+///
+/// @example scss - This media query will NOT show because it intercepts the static breakpoint but contains a media expression that is not accepted
+/// $im-media-support: false;
+/// $im-no-media-breakpoint: 'desktop';
+/// $im-no-media-expressions: ('screen');
+/// @include media('>=tablet', 'retina2x') {
+/// .foo {
+/// color: tomato;
+/// }
+/// }
+///
+/// /* No output */
+///
+$im-no-media-expressions: ('screen', 'portrait', 'landscape') !default;
+
+////
+/// Cross-engine logging engine
+/// @author Hugo Giraudel
+/// @access private
+////
+
+
+///
+/// Log a message either with `@error` if supported
+/// else with `@warn`, using `feature-exists('at-error')`
+/// to detect support.
+///
+/// @param {String} $message - Message to log
+///
+@function im-log($message) {
+ @if feature-exists('at-error') {
+ @error $message;
+ } @else {
+ @warn $message;
+ $_: noop();
+ }
+
+ @return $message;
+}
+
+
+///
+/// Wrapper mixin for the log function so it can be used with a more friendly
+/// API than `@if im-log('..') {}` or `$_: im-log('..')`. Basically, use the function
+/// within functions because it is not possible to include a mixin in a function
+/// and use the mixin everywhere else because it's much more elegant.
+///
+/// @param {String} $message - Message to log
+///
+@mixin log($message) {
+ @if im-log($message) {}
+}
+
+
+///
+/// Function with no `@return` called next to `@warn` in Sass 3.3
+/// to trigger a compiling error and stop the process.
+///
+@function noop() {}
+
+///
+/// Determines whether a list of conditions is intercepted by the static breakpoint.
+///
+/// @param {Arglist} $conditions - Media query conditions
+///
+/// @return {Boolean} - Returns true if the conditions are intercepted by the static breakpoint
+///
+@function im-intercepts-static-breakpoint($conditions...) {
+ $no-media-breakpoint-value: map-get($breakpoints, $im-no-media-breakpoint);
+
+ @if not $no-media-breakpoint-value {
+ @if im-log('`#{$im-no-media-breakpoint}` is not a valid breakpoint.') {}
+ }
+
+ @each $condition in $conditions {
+ @if not map-has-key($media-expressions, $condition) {
+ $operator: get-expression-operator($condition);
+ $prefix: get-expression-prefix($operator);
+ $value: get-expression-value($condition, $operator);
+
+ @if ($prefix == 'max' and $value <= $no-media-breakpoint-value) or
+ ($prefix == 'min' and $value > $no-media-breakpoint-value) {
+ @return false;
+ }
+ } @else if not index($im-no-media-expressions, $condition) {
+ @return false;
+ }
+ }
+
+ @return true;
+}
+
+////
+/// Parsing engine
+/// @author Hugo Giraudel
+/// @access private
+////
+
+
+///
+/// Get operator of an expression
+///
+/// @param {String} $expression - Expression to extract operator from
+///
+/// @return {String} - Any of `>=`, `>`, `<=`, `<`, `≥`, `≤`
+///
+@function get-expression-operator($expression) {
+ @each $operator in ('>=', '>', '<=', '<', '≥', '≤') {
+ @if str-index($expression, $operator) {
+ @return $operator;
+ }
+ }
+
+ // It is not possible to include a mixin inside a function, so we have to
+ // rely on the `im-log(..)` function rather than the `log(..)` mixin. Because
+ // functions cannot be called anywhere in Sass, we need to hack the call in
+ // a dummy variable, such as `$_`. If anybody ever raise a scoping issue with
+ // Sass 3.3, change this line in `@if im-log(..) {}` instead.
+ $_: im-log('No operator found in `#{$expression}`.');
+}
+
+
+///
+/// Get dimension of an expression, based on a found operator
+///
+/// @param {String} $expression - Expression to extract dimension from
+/// @param {String} $operator - Operator from `$expression`
+///
+/// @return {String} - `width` or `height` (or potentially anything else)
+///
+@function get-expression-dimension($expression, $operator) {
+ $operator-index: str-index($expression, $operator);
+ $parsed-dimension: str-slice($expression, 0, $operator-index - 1);
+ $dimension: 'width';
+
+ @if str-length($parsed-dimension) > 0 {
+ $dimension: $parsed-dimension;
+ }
+
+ @return $dimension;
+}
+
+
+///
+/// Get dimension prefix based on an operator
+///
+/// @param {String} $operator - Operator
+///
+/// @return {String} - `min` or `max`
+///
+@function get-expression-prefix($operator) {
+ @return if(index(('<', '<=', '≤'), $operator), 'max', 'min');
+}
+
+
+///
+/// Get value of an expression, based on a found operator
+///
+/// @param {String} $expression - Expression to extract value from
+/// @param {String} $operator - Operator from `$expression`
+///
+/// @return {Number} - A numeric value
+///
+@function get-expression-value($expression, $operator) {
+ $operator-index: str-index($expression, $operator);
+ $value: str-slice($expression, $operator-index + str-length($operator));
+
+ @if map-has-key($breakpoints, $value) {
+ $value: map-get($breakpoints, $value);
+ } @else {
+ $value: to-number($value);
+ }
+
+ $interval: map-get($unit-intervals, unit($value));
+
+ @if not $interval {
+ // It is not possible to include a mixin inside a function, so we have to
+ // rely on the `im-log(..)` function rather than the `log(..)` mixin. Because
+ // functions cannot be called anywhere in Sass, we need to hack the call in
+ // a dummy variable, such as `$_`. If anybody ever raise a scoping issue with
+ // Sass 3.3, change this line in `@if im-log(..) {}` instead.
+ $_: im-log('Unknown unit `#{unit($value)}`.');
+ }
+
+ @if $operator == '>' {
+ $value: $value + $interval;
+ } @else if $operator == '<' {
+ $value: $value - $interval;
+ }
+
+ @return $value;
+}
+
+
+///
+/// Parse an expression to return a valid media-query expression
+///
+/// @param {String} $expression - Expression to parse
+///
+/// @return {String} - Valid media query
+///
+@function parse-expression($expression) {
+ // If it is part of $media-expressions, it has no operator
+ // then there is no need to go any further, just return the value
+ @if map-has-key($media-expressions, $expression) {
+ @return map-get($media-expressions, $expression);
+ }
+
+ $operator: get-expression-operator($expression);
+ $dimension: get-expression-dimension($expression, $operator);
+ $prefix: get-expression-prefix($operator);
+ $value: get-expression-value($expression, $operator);
+
+ @return '(#{$prefix}-#{$dimension}: #{$value})';
+}
+
+///
+/// Slice `$list` between `$start` and `$end` indexes
+///
+/// @access private
+///
+/// @param {List} $list - List to slice
+/// @param {Number} $start [1] - Start index
+/// @param {Number} $end [length($list)] - End index
+///
+/// @return {List} Sliced list
+///
+@function slice($list, $start: 1, $end: length($list)) {
+ @if length($list) < 1 or $start > $end {
+ @return ();
+ }
+
+ $result: ();
+
+ @for $i from $start through $end {
+ $result: append($result, nth($list, $i));
+ }
+
+ @return $result;
+}
+
+////
+/// String to number converter
+/// @author Hugo Giraudel
+/// @access private
+////
+
+
+///
+/// Casts a string into a number
+///
+/// @param {String | Number} $value - Value to be parsed
+///
+/// @return {Number}
+///
+@function to-number($value) {
+ @if type-of($value) == 'number' {
+ @return $value;
+ } @else if type-of($value) != 'string' {
+ $_: im-log('Value for `to-number` should be a number or a string.');
+ }
+
+ $first-character: str-slice($value, 1, 1);
+ $result: 0;
+ $digits: 0;
+ $minus: ($first-character == '-');
+ $numbers: ('0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9);
+
+ // Remove +/- sign if present at first character
+ @if ($first-character == '+' or $first-character == '-') {
+ $value: str-slice($value, 2);
+ }
+
+ @for $i from 1 through str-length($value) {
+ $character: str-slice($value, $i, $i);
+
+ @if not (index(map-keys($numbers), $character) or $character == '.') {
+ @return to-length(if($minus, -$result, $result), str-slice($value, $i))
+ }
+
+ @if $character == '.' {
+ $digits: 1;
+ } @else if $digits == 0 {
+ $result: $result * 10 + map-get($numbers, $character);
+ } @else {
+ $digits: $digits * 10;
+ $result: $result + map-get($numbers, $character) / $digits;
+ }
+ }
+
+ @return if($minus, -$result, $result);
+}
+
+
+///
+/// Add `$unit` to `$value`
+///
+/// @param {Number} $value - Value to add unit to
+/// @param {String} $unit - String representation of the unit
+///
+/// @return {Number} - `$value` expressed in `$unit`
+///
+@function to-length($value, $unit) {
+ $units: ('px': 1px, 'cm': 1cm, 'mm': 1mm, '%': 1%, 'ch': 1ch, 'pc': 1pc, 'in': 1in, 'em': 1em, 'rem': 1rem, 'pt': 1pt, 'ex': 1ex, 'vw': 1vw, 'vh': 1vh, 'vmin': 1vmin, 'vmax': 1vmax);
+
+ @if not index(map-keys($units), $unit) {
+ $_: im-log('Invalid unit `#{$unit}`.');
+ }
+
+ @return $value * map-get($units, $unit);
+}
+
+///
+/// This mixin aims at redefining the configuration just for the scope of
+/// the call. It is helpful when having a component needing an extended
+/// configuration such as custom breakpoints (referred to as tweakpoints)
+/// for instance.
+///
+/// @author Hugo Giraudel
+///
+/// @param {Map} $tweakpoints [()] - Map of tweakpoints to be merged with `$breakpoints`
+/// @param {Map} $tweak-media-expressions [()] - Map of tweaked media expressions to be merged with `$media-expression`
+///
+/// @example scss - Extend the global breakpoints with a tweakpoint
+/// @include media-context(('custom': 678px)) {
+/// .foo {
+/// @include media('>phone', '<=custom') {
+/// // ...
+/// }
+/// }
+/// }
+///
+/// @example scss - Extend the global media expressions with a custom one
+/// @include media-context($tweak-media-expressions: ('all': 'all')) {
+/// .foo {
+/// @include media('all', '>phone') {
+/// // ...
+/// }
+/// }
+/// }
+///
+/// @example scss - Extend both configuration maps
+/// @include media-context(('custom': 678px), ('all': 'all')) {
+/// .foo {
+/// @include media('all', '>phone', '<=custom') {
+/// // ...
+/// }
+/// }
+/// }
+///
+@mixin media-context($tweakpoints: (), $tweak-media-expressions: ()) {
+ // Save global configuration
+ $global-breakpoints: $breakpoints;
+ $global-media-expressions: $media-expressions;
+
+ // Update global configuration
+ $breakpoints: map-merge($breakpoints, $tweakpoints) !global;
+ $media-expressions: map-merge($media-expressions, $tweak-media-expressions) !global;
+
+ @content;
+
+ // Restore global configuration
+ $breakpoints: $global-breakpoints !global;
+ $media-expressions: $global-media-expressions !global;
+}
+
+////
+/// include-media public exposed API
+/// @author Eduardo Boucas
+/// @access public
+////
+
+
+///
+/// Generates a media query based on a list of conditions
+///
+/// @param {Arglist} $conditions - Media query conditions
+///
+/// @example scss - With a single set breakpoint
+/// @include media('>phone') { }
+///
+/// @example scss - With two set breakpoints
+/// @include media('>phone', '<=tablet') { }
+///
+/// @example scss - With custom values
+/// @include media('>=358px', '<850px') { }
+///
+/// @example scss - With set breakpoints with custom values
+/// @include media('>desktop', '<=1350px') { }
+///
+/// @example scss - With a static expression
+/// @include media('retina2x') { }
+///
+/// @example scss - Mixing everything
+/// @include media('>=350px', '<tablet', 'retina3x') { }
+///
+@mixin media($conditions...) {
+ @if ($im-media-support and length($conditions) == 0) or
+ (not $im-media-support and im-intercepts-static-breakpoint($conditions...)) {
+ @content;
+ } @else if ($im-media-support and length($conditions) > 0) {
+ @media #{unquote(parse-expression(nth($conditions, 1)))} {
+ // Recursive call
+ @include media(slice($conditions, 2)...) {
+ @content;
+ }
+ }
+ }
+}