peter/doneit-web
1
0
Fork 0
mirror of https://code.equilibrium.co.ao/ITO/doneit-web.git synced 2026-04-19 21:06:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

responsive

Browse Source
This commit is contained in:
Peter Maquiran
2023-07-06 12:18:15 +01:00
parent 89e11c6fe4
commit 3df11142f6
53 changed files with 695 additions and 893 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/style/main.scss
+100 -93
View File
@@ -1,3 +1,5 @@
@import '~src/function.scss';
// overflow
.v-application .overflow-auto {
overflow: auto !important;
@@ -178,6 +180,99 @@
flex: 0;
}
@for $i from 0 through 50 {
.font-#{$i}-rem {
font-size: rem($i);
}
.font-#{$i}-em {
font-size: em($i);
}
}
@for $i from 0 through 10 {
$size: $i * 5;
$properties: "margin" "m", "padding" "p";
@each $property, $short in $properties {
// ============================= EM ========================================
// all directions
.#{$short}a-#{$size}-em {
#{$property}-left: em($size) !important;
#{$property}-right: em($size) !important;
#{$property}-top: em($size) !important;
#{$property}-bottom: em($size) !important;
}
// top
.#{$short}t-#{$size}-em {
#{$property}-top: em($size) !important
}
// bottom
.#{$short}b-#{$size}-em {
#{$property}-bottom: em($size) !important
}
// left
.#{$short}l-#{$size}-em {
#{$property}-left: em($size) !important
}
// right
.#{$short}r-#{$size}-em {
#{$property}-right: em($size) !important
}
// left and right
.#{$short}x-#{$size}-em {
#{$property}-left: em($size) !important;
#{$property}-right: em($size) !important;
}
// top and bottom
.#{$short}y-#{$size}-em {
#{$property}-top: em($size) !important;
#{$property}-bottom: em($size) !important;
}
// ============================= REM ========================================
// all directions
.#{$short}a-#{$size}-rem {
#{$property}-left: rem($size) !important;
#{$property}-right: rem($size) !important;
#{$property}-top: rem($size) !important;
#{$property}-bottom: rem($size) !important;
}
// top
.#{$short}t-#{$size}-rem {
#{$property}-top: rem($size) !important
}
// bottom
.#{$short}b-#{$size}-rem {
#{$property}-bottom: rem($size) !important
}
// left
.#{$short}l-#{$size}-rem {
#{$property}-left: rem($size) !important
}
// right
.#{$short}r-#{$size}-rem {
#{$property}-right: rem($size) !important
}
// left and right
.#{$short}x-#{$size}-rem {
#{$property}-left: rem($size) !important;
#{$property}-right: rem($size) !important;
}
// top and bottom
.#{$short}y-#{$size}-rem {
#{$property}-top: rem($size) !important;
#{$property}-bottom: rem($size) !important;
}
}
}
@media only screen and (min-width: 800px) {
// overflow
.v-application-md .overflow-md-auto {
@@ -366,53 +461,6 @@
align-content: stretch !important;
}
@for $i from 0 through 50 {
.font-md-#{$i} {
font-size: #{$i}px;
}
}
@for $i from 0 through 10 {
$size: $i * 5;
$properties: "margin" "m", "padding" "p";
@each $property, $short in $properties {
// all directions
.#{$short}a-md-#{$size} {
#{$property}-left: #{$size}px !important;
#{$property}-right: #{$size}px !important;
#{$property}-top: #{$size}px !important;
#{$property}-bottom: #{$size}px !important;
}
// top
.#{$short}t-md-#{$size} {
#{$property}-top: #{$size}px !important;
}
// bottom
.#{$short}b-md-#{$size} {
#{$property}-bottom: #{$size}px !important;
}
// left
.#{$short}l-md-#{$size} {
#{$property}-left: #{$size}px !important;
}
// right
.#{$short}r-md-#{$size} {
#{$property}-right: #{$size}px !important;
}
// left and right
.#{$short}x-md-#{$size} {
#{$property}-left: #{$size}px !important;
#{$property}-right: #{$size}px !important;
}
// top and bottom
.#{$short}y-md-#{$size} {
#{$property}-top: #{$size}px !important;
#{$property}-bottom: #{$size}px !important;
}
}
}
.width-md-100 {
width: 100%;
}
@@ -681,52 +729,6 @@
height: unset !important;
}
@for $i from 0 through 50 {
.font-lg-#{$i} {
font-size: #{$i}px;
}
}
@for $i from 0 through 10 {
$size: $i * 5;
$properties: "margin" "m", "padding" "p";
@each $property, $short in $properties {
// all directions
.#{$short}a-lg-#{$size} {
#{$property}-left: #{$size}px !important;
#{$property}-right: #{$size}px !important;
#{$property}-top: #{$size}px !important;
#{$property}-bottom: #{$size}px !important;
}
// top
.#{$short}t-lg-#{$size} {
#{$property}-top: #{$size}px !important;
}
// bottom
.#{$short}b-lg-#{$size} {
#{$property}-bottom: #{$size}px !important;
}
// left
.#{$short}l-lg-#{$size} {
#{$property}-left: #{$size}px !important;
}
// right
.#{$short}r-lg-#{$size} {
#{$property}-right: #{$size}px !important;
}
// left and right
.#{$short}x-lg-#{$size} {
#{$property}-left: #{$size}px !important;
#{$property}-right: #{$size}px !important;
}
// top and bottom
.#{$short}y-lg-#{$size} {
#{$property}-top: #{$size}px !important;
#{$property}-bottom: #{$size}px !important;
}
}
}
}
.m-l-auto {
@@ -996,3 +998,8 @@
.cursor-pointer {
cursor: pointer;
}
.dnone {
display: none;
}