aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass/include
diff options
context:
space:
mode:
authorWicklow <wicklow@framasoft.org>2023-02-16 12:30:30 +0100
committerChocobozzz <chocobozzz@cpy.re>2023-02-20 13:52:22 +0100
commit27f84cc3371aaf519c1bb5c0cca9e728a9dd3967 (patch)
treec45e780589ea69f0a9842c90af58e22fe32749f4 /client/src/sass/include
parent6b13ba9b808059fec4398ee3b38c8197d8c41fb9 (diff)
downloadPeerTube-27f84cc3371aaf519c1bb5c0cca9e728a9dd3967.tar.gz
PeerTube-27f84cc3371aaf519c1bb5c0cca9e728a9dd3967.tar.zst
PeerTube-27f84cc3371aaf519c1bb5c0cca9e728a9dd3967.zip
Refactoring class helpers + add bootstrap mixins
Diffstat (limited to 'client/src/sass/include')
-rw-r--r--client/src/sass/include/_bootstrap-mixins.scss5
-rw-r--r--client/src/sass/include/_mixins.scss29
2 files changed, 20 insertions, 14 deletions
diff --git a/client/src/sass/include/_bootstrap-mixins.scss b/client/src/sass/include/_bootstrap-mixins.scss
new file mode 100644
index 000000000..2be16ebad
--- /dev/null
+++ b/client/src/sass/include/_bootstrap-mixins.scss
@@ -0,0 +1,5 @@
1@import 'bootstrap/scss/functions';
2@import 'bootstrap/scss/variables';
3@import 'bootstrap/scss/maps';
4@import 'bootstrap/scss/mixins';
5@import 'bootstrap/scss/utilities'; \ No newline at end of file
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 34af9e8c1..bd467a0ed 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -1,6 +1,9 @@
1@use 'sass:math'; 1@use 'sass:math';
2@use '_variables' as *; 2@use '_variables' as *;
3 3
4@import '_bootstrap-mixins';
5
6
4@mixin disable-default-a-behaviour { 7@mixin disable-default-a-behaviour {
5 &:hover, 8 &:hover,
6 &:focus, 9 &:focus,
@@ -919,55 +922,53 @@
919@mixin margin ($block-start, $inline-end, $block-end, $inline-start) { 922@mixin margin ($block-start, $inline-end, $block-end, $inline-start) {
920 @include margin-left($inline-start); 923 @include margin-left($inline-start);
921 @include margin-right($inline-end); 924 @include margin-right($inline-end);
922 925 @include margin-top($block-start);
923 margin-top: $block-start; 926 @include margin-bottom($block-end);
924 margin-bottom: $block-end;
925} 927}
926 928
927@mixin padding ($block-start, $inline-end, $block-end, $inline-start) { 929@mixin padding ($block-start, $inline-end, $block-end, $inline-start) {
928 @include padding-left($inline-start); 930 @include padding-left($inline-start);
929 @include padding-right($inline-end); 931 @include padding-right($inline-end);
930 932 @include padding-top($block-start);
931 padding-top: $block-start; 933 @include padding-bottom($block-end);
932 padding-bottom: $block-end;
933} 934}
934 935
935@mixin margin-left ($value) { 936@mixin margin-left ($value) {
936 @supports (margin-inline-start: $value) { 937 @supports (margin-inline-start: $value) {
937 margin-inline-start: $value; 938 @include rfs($value, margin-inline-start);
938 } 939 }
939 940
940 @supports not (margin-inline-start: $value) { 941 @supports not (margin-inline-start: $value) {
941 margin-left: $value; 942 @include rfs($value, margin-left);
942 } 943 }
943} 944}
944 945
945@mixin margin-right ($value) { 946@mixin margin-right ($value) {
946 @supports (margin-inline-end: $value) { 947 @supports (margin-inline-end: $value) {
947 margin-inline-end: $value; 948 @include rfs($value, margin-inline-end);
948 } 949 }
949 950
950 @supports not (margin-inline-end: $value) { 951 @supports not (margin-inline-end: $value) {
951 margin-right: $value; 952 @include rfs($value, margin-right);
952 } 953 }
953} 954}
954 955
955@mixin padding-left ($value) { 956@mixin padding-left ($value) {
956 @supports (padding-inline-start: $value) { 957 @supports (padding-inline-start: $value) {
957 padding-inline-start: $value; 958 @include rfs($value, padding-inline-start);
958 } 959 }
959 960
960 @supports not (padding-inline-start: $value) { 961 @supports not (padding-inline-start: $value) {
961 padding-left: $value; 962 @include rfs($value, padding-left);
962 } 963 }
963} 964}
964 965
965@mixin padding-right ($value) { 966@mixin padding-right ($value) {
966 @supports (padding-inline-end: $value) { 967 @supports (padding-inline-end: $value) {
967 padding-inline-end: $value; 968 @include rfs($value, padding-inline-end);
968 } 969 }
969 970
970 @supports not (padding-inline-end: $value) { 971 @supports not (padding-inline-end: $value) {
971 padding-right: $value; 972 @include rfs($value, padding-right);
972 } 973 }
973} 974}