bachir/enfrancais-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

use variable named breakpoints

Browse Source
This commit is contained in:
axolotle
2021-06-28 15:58:17 +02:00
parent 21801c1cef
commit c33a4cfce5
10 changed files with 36 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/scss/abstracts/_variables.scss
+4 -1
View File
@@ -52,13 +52,16 @@ $yiq-contrasted-threshold: 120;
$grid-breakpoints: (
xs: 0,
sm: 576px,
tb: 768px,
tb: 769px,
md: 1024px,
lg: 1200px,
xl: 1440px,
);
$layout-bp: md;
$layout-bp-down: tb;
$size-bp: tb;
$size-bp-down: sm;
// Body
$body-bg: #fffcfb;
src/assets/scss/base/_bootstrap-overrides.scss
+1 -1
View File
@@ -18,7 +18,7 @@ a:hover {
padding: .25rem $header-spacer-sm;
}
@include media-breakpoint-up(md) {
@include media-breakpoint-up($layout-bp) {
margin-left: -#{$header-spacer};
.dropdown-item {
src/components/formItems/MultipleTagsSelect.vue
+1 -1
View File
@@ -55,7 +55,7 @@ export default {
border: 0;
padding: 0;
@include media-breakpoint-up(md) {
@include media-breakpoint-up($layout-bp) {
ul li {
display: block;
}
src/components/nodes/NodeView.vue
+13 -5
View File
@@ -112,15 +112,17 @@ export default {
&-card &-header {
padding: $node-card-spacer-sm-y $node-card-spacer-sm-x 0;
@include media-breakpoint-up(md) {
@include media-breakpoint-up($size-bp) {
padding: $node-card-spacer-y $node-card-spacer-x 0;
}
}
&-card &-footer {
padding: $node-card-spacer-sm-y $node-card-spacer-sm-x $node-card-spacer-sm-y * 2;
position: sticky;
bottom: 0;
@include media-breakpoint-up(md) {
@include media-breakpoint-up($size-bp) {
padding: $node-card-spacer-y $node-card-spacer-x $node-card-spacer-y * 2;
}
}
@@ -133,7 +135,7 @@ export default {
&-view {
width: 100%;
@include media-breakpoint-up(md) {
@include media-breakpoint-up($layout-bp) {
height: 100%;
overflow-y: auto;
@@ -146,8 +148,11 @@ export default {
&-view &-header {
padding: $node-view-spacer-sm-y $node-view-spacer-sm-x 0;
@include media-breakpoint-up(md) {
@include media-breakpoint-up($size-bp) {
padding: $node-view-spacer-y $node-view-spacer-x 0;
}
@include media-breakpoint-up($layout-bp) {
position: sticky;
top: 0;
z-index: 1;
@@ -157,8 +162,11 @@ export default {
&-view &-footer {
padding: $node-view-spacer-sm-y $node-view-spacer-sm-x;
@include media-breakpoint-up(md) {
@include media-breakpoint-up($size-bp) {
padding: $node-view-spacer-y $node-view-spacer-x;
}
@include media-breakpoint-up($layout-bp) {
position: sticky;
bottom: 0;
}
src/components/nodes/NodeViewBody.vue
+6 -13
View File
@@ -104,7 +104,7 @@ export default {
line-height: inherit;
}
@include media-breakpoint-up(sm) {
@include media-breakpoint-up($size-bp) {
font-size: 2rem;
}
@@ -112,7 +112,9 @@ export default {
padding: 0 $node-view-spacer-sm-x;
font-size: 1.25rem;
@include media-breakpoint-up(sm) {
@include media-breakpoint-up($size-bp) {
padding: 0 $node-view-spacer-x;
&.node-view-body-ref {
font-size: 2.6rem;
}
@@ -121,21 +123,14 @@ export default {
font-size: 1.5rem;
}
}
@include media-breakpoint-up(md) {
padding: 0 $node-view-spacer-x;
}
}
&-card {
padding: 0 $node-card-spacer-sm-x;
font-size: 1.1rem;
@include media-breakpoint-up(sm) {
@include media-breakpoint-up($size-bp) {
font-size: 2rem;
}
@include media-breakpoint-up(md) {
padding: 0 $node-card-spacer-x;
}
}
@@ -169,7 +164,7 @@ export default {
color: $white;
font-size: 1.25rem;
@include media-breakpoint-up(sm) {
@include media-breakpoint-up($size-bp) {
font-size: 1.5rem;
}
@@ -188,6 +183,4 @@ export default {
margin-top: .5rem;
}
}
</style>
src/components/nodes/NodeViewChildList.vue
+1 -1
View File
@@ -78,7 +78,7 @@ export default {
justify-content: space-between;
}
@include media-breakpoint-up(md) {
@include media-breakpoint-up($layout-bp) {
display: none;
}
}
src/components/nodes/NodeViewChildListGroup.vue
+1 -1
View File
@@ -32,7 +32,7 @@ export default {
font-family: $font-family-base;
font-weight: $font-weight-bold;
@include media-breakpoint-up(sm) {
@include media-breakpoint-up($size-bp) {
font-size: 1.75rem;
}
src/components/nodes/NodeViewHeaderProd.vue
+2 -2
View File
@@ -90,7 +90,7 @@ export default {
h4 {
font-size: 0.8rem;
@include media-breakpoint-up(sm) {
@include media-breakpoint-up($size-bp) {
font-size: 1.25rem;
}
}
@@ -100,7 +100,7 @@ export default {
h4 {
font-size: 1rem;
@include media-breakpoint-up(sm) {
@include media-breakpoint-up($size-bp) {
font-size: 1.4525rem;
}
}
src/pages/_partials/MainHeader.vue
+3 -3
View File
@@ -86,7 +86,7 @@ export default {
font-size: $font-size-sm;
justify-content: space-between;
@include media-breakpoint-up(md) {
@include media-breakpoint-up($layout-bp) {
height: $header-height;
padding: 0 $header-spacer;
}
@@ -99,14 +99,14 @@ export default {
padding: 0 .5rem;
margin-left: -.5rem;
@include media-breakpoint-up(tb) {
@include media-breakpoint-up($size-bp) {
padding: 0 .75rem;
margin-left: -.75rem;
}
}
.dropdown-menu {
@include media-breakpoint-down(sm) {
@include media-breakpoint-down($size-bp-down) {
width: 100vw;
}
src/pages/library/LibraryOptions.vue
+4 -4
View File
@@ -148,7 +148,7 @@ export default {
width: 100%;
@include media-breakpoint-down(tb) {
@include media-breakpoint-down($layout-bp-down) {
font-size: 0.9rem;
::v-deep {
@@ -158,7 +158,7 @@ export default {
}
}
@include media-breakpoint-up(md) {
@include media-breakpoint-up($layout-bp) {
padding: 0 $header-spacer $header-spacer;
display: flex;
justify-content: space-between;
@@ -166,7 +166,7 @@ export default {
::v-deep {
@include media-breakpoint-up(md) {
@include media-breakpoint-up($layout-bp) {
flex-wrap: wrap;
fieldset {
@@ -230,7 +230,7 @@ export default {
}
}
@include media-breakpoint-up(md) {
@include media-breakpoint-up($layout-bp) {
min-width: 450px;
.form-group {