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: ( $grid-breakpoints: (
xs: 0, xs: 0,
sm: 576px, sm: 576px,
tb: 768px, tb: 769px,
md: 1024px, md: 1024px,
lg: 1200px, lg: 1200px,
xl: 1440px, xl: 1440px,
); );
$layout-bp: md; $layout-bp: md;
$layout-bp-down: tb;
$size-bp: tb;
$size-bp-down: sm;
// Body // Body
$body-bg: #fffcfb; $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; padding: .25rem $header-spacer-sm;
} }
@include media-breakpoint-up(md) { @include media-breakpoint-up($layout-bp) {
margin-left: -#{$header-spacer}; margin-left: -#{$header-spacer};
.dropdown-item { .dropdown-item {
src/components/formItems/MultipleTagsSelect.vue
+1 -1
View File
@@ -55,7 +55,7 @@ export default {
border: 0; border: 0;
padding: 0; padding: 0;
@include media-breakpoint-up(md) { @include media-breakpoint-up($layout-bp) {
ul li { ul li {
display: block; display: block;
} }
src/components/nodes/NodeView.vue
+13 -5
View File
@@ -112,15 +112,17 @@ export default {
&-card &-header { &-card &-header {
padding: $node-card-spacer-sm-y $node-card-spacer-sm-x 0; 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; padding: $node-card-spacer-y $node-card-spacer-x 0;
} }
} }
&-card &-footer { &-card &-footer {
padding: $node-card-spacer-sm-y $node-card-spacer-sm-x $node-card-spacer-sm-y * 2; 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; padding: $node-card-spacer-y $node-card-spacer-x $node-card-spacer-y * 2;
} }
} }
@@ -133,7 +135,7 @@ export default {
&-view { &-view {
width: 100%; width: 100%;
@include media-breakpoint-up(md) { @include media-breakpoint-up($layout-bp) {
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
@@ -146,8 +148,11 @@ export default {
&-view &-header { &-view &-header {
padding: $node-view-spacer-sm-y $node-view-spacer-sm-x 0; 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; padding: $node-view-spacer-y $node-view-spacer-x 0;
}
@include media-breakpoint-up($layout-bp) {
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 1; z-index: 1;
@@ -157,8 +162,11 @@ export default {
&-view &-footer { &-view &-footer {
padding: $node-view-spacer-sm-y $node-view-spacer-sm-x; 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; padding: $node-view-spacer-y $node-view-spacer-x;
}
@include media-breakpoint-up($layout-bp) {
position: sticky; position: sticky;
bottom: 0; bottom: 0;
} }
src/components/nodes/NodeViewBody.vue
+6 -13
View File
@@ -104,7 +104,7 @@ export default {
line-height: inherit; line-height: inherit;
} }
@include media-breakpoint-up(sm) { @include media-breakpoint-up($size-bp) {
font-size: 2rem; font-size: 2rem;
} }
@@ -112,7 +112,9 @@ export default {
padding: 0 $node-view-spacer-sm-x; padding: 0 $node-view-spacer-sm-x;
font-size: 1.25rem; 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 { &.node-view-body-ref {
font-size: 2.6rem; font-size: 2.6rem;
} }
@@ -121,21 +123,14 @@ export default {
font-size: 1.5rem; font-size: 1.5rem;
} }
} }
@include media-breakpoint-up(md) {
padding: 0 $node-view-spacer-x;
}
} }
&-card { &-card {
padding: 0 $node-card-spacer-sm-x; padding: 0 $node-card-spacer-sm-x;
font-size: 1.1rem; font-size: 1.1rem;
@include media-breakpoint-up(sm) { @include media-breakpoint-up($size-bp) {
font-size: 2rem; font-size: 2rem;
}
@include media-breakpoint-up(md) {
padding: 0 $node-card-spacer-x; padding: 0 $node-card-spacer-x;
} }
} }
@@ -169,7 +164,7 @@ export default {
color: $white; color: $white;
font-size: 1.25rem; font-size: 1.25rem;
@include media-breakpoint-up(sm) { @include media-breakpoint-up($size-bp) {
font-size: 1.5rem; font-size: 1.5rem;
} }
@@ -188,6 +183,4 @@ export default {
margin-top: .5rem; margin-top: .5rem;
} }
} }
</style> </style>
src/components/nodes/NodeViewChildList.vue
+1 -1
View File
@@ -78,7 +78,7 @@ export default {
justify-content: space-between; justify-content: space-between;
} }
@include media-breakpoint-up(md) { @include media-breakpoint-up($layout-bp) {
display: none; display: none;
} }
} }
src/components/nodes/NodeViewChildListGroup.vue
+1 -1
View File
@@ -32,7 +32,7 @@ export default {
font-family: $font-family-base; font-family: $font-family-base;
font-weight: $font-weight-bold; font-weight: $font-weight-bold;
@include media-breakpoint-up(sm) { @include media-breakpoint-up($size-bp) {
font-size: 1.75rem; font-size: 1.75rem;
} }
src/components/nodes/NodeViewHeaderProd.vue
+2 -2
View File
@@ -90,7 +90,7 @@ export default {
h4 { h4 {
font-size: 0.8rem; font-size: 0.8rem;
@include media-breakpoint-up(sm) { @include media-breakpoint-up($size-bp) {
font-size: 1.25rem; font-size: 1.25rem;
} }
} }
@@ -100,7 +100,7 @@ export default {
h4 { h4 {
font-size: 1rem; font-size: 1rem;
@include media-breakpoint-up(sm) { @include media-breakpoint-up($size-bp) {
font-size: 1.4525rem; font-size: 1.4525rem;
} }
} }
src/pages/_partials/MainHeader.vue
+3 -3
View File
@@ -86,7 +86,7 @@ export default {
font-size: $font-size-sm; font-size: $font-size-sm;
justify-content: space-between; justify-content: space-between;
@include media-breakpoint-up(md) { @include media-breakpoint-up($layout-bp) {
height: $header-height; height: $header-height;
padding: 0 $header-spacer; padding: 0 $header-spacer;
} }
@@ -99,14 +99,14 @@ export default {
padding: 0 .5rem; padding: 0 .5rem;
margin-left: -.5rem; margin-left: -.5rem;
@include media-breakpoint-up(tb) { @include media-breakpoint-up($size-bp) {
padding: 0 .75rem; padding: 0 .75rem;
margin-left: -.75rem; margin-left: -.75rem;
} }
} }
.dropdown-menu { .dropdown-menu {
@include media-breakpoint-down(sm) { @include media-breakpoint-down($size-bp-down) {
width: 100vw; width: 100vw;
} }
src/pages/library/LibraryOptions.vue
+4 -4
View File
@@ -148,7 +148,7 @@ export default {
width: 100%; width: 100%;
@include media-breakpoint-down(tb) { @include media-breakpoint-down($layout-bp-down) {
font-size: 0.9rem; font-size: 0.9rem;
::v-deep { ::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; padding: 0 $header-spacer $header-spacer;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@@ -166,7 +166,7 @@ export default {
::v-deep { ::v-deep {
@include media-breakpoint-up(md) { @include media-breakpoint-up($layout-bp) {
flex-wrap: wrap; flex-wrap: wrap;
fieldset { fieldset {
@@ -230,7 +230,7 @@ export default {
} }
} }
@include media-breakpoint-up(md) { @include media-breakpoint-up($layout-bp) {
min-width: 450px; min-width: 450px;
.form-group { .form-group {