X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fsass%2Finclude%2F_mixins.scss;h=a7c4c99c278edb20587996e0c14ebc2bc2df2c28;hb=d91b23b11ca46debfee320ce5c5dfaeae5811bb7;hp=4d4c52b34636c1d5fd961914ba0ac1c0d49188c5;hpb=cf21b2cbef61929177b9c09b5e017c3b7eb8535d;p=github%2FChocobozzz%2FPeerTube.git

diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 4d4c52b34..a7c4c99c2 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -264,8 +264,10 @@
   font-size: 15px;
   height: $button-height;
   line-height: $button-height;
-  // FIXME: because of primeng that redefines border-radius of all input[type="..."]
+
+  // Because of primeng that redefines border-radius of all input[type="..."]
   border-radius: 3px !important;
+
   text-align: center;
   cursor: pointer;
 }
@@ -356,6 +358,7 @@
   background: pvar(--inputBackgroundColor);
   position: relative;
   font-size: 15px;
+  height: min-content;
 
   &.disabled {
     background-color: #E5E5E5;
@@ -364,6 +367,9 @@
       cursor: default;
     }
   }
+  select[disabled] {
+    background-color: #f9f9f9;
+  }
 
   @media screen and (max-width: $width) {
     width: 100%;
@@ -420,42 +426,64 @@
   }
 }
 
-// Thanks: https://codepen.io/triss90/pen/XNEdRe/
+// Thanks: https://codepen.io/manabox/pen/raQmpL
 @mixin peertube-radio-container {
-  input[type=radio] {
-    display: none;
+  [type=radio]:checked,
+  [type=radio]:not(:checked) {
+    position: absolute;
+    left: -9999px;
+  }
 
-    + label {
-      font-weight: $font-regular;
-      cursor: pointer;
+  [type=radio]:checked + label,
+  [type=radio]:not(:checked) + label {
+    position: relative;
+    padding-left: 28px;
+    cursor: pointer;
+    line-height: 20px;
+    display: inline-block;
+    font-size: 15px;
+    font-weight: $font-regular;
+  }
 
-      &::before {
-        @include margin-right(10px);
-
-        position: relative;
-        top: -2px;
-        content: '';
-        background: #fff;
-        border-radius: 100%;
-        border: 1px solid #000;
-        display: inline-block;
-        width: 15px;
-        height: 15px;
-        vertical-align: middle;
-        cursor: pointer;
-        text-align: center;
-      }
-    }
+  [type=radio]:checked + label::before,
+  [type=radio]:not(:checked) + label::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 18px;
+    height: 18px;
+    border: 1px solid #C6C6C6;
+    border-radius: 100%;
+    background: #fff;
+  }
 
-    &:checked + label::before {
-      background-color: #000;
-      box-shadow: inset 0 0 0 4px #fff;
-    }
+  [type=radio]:checked + label::after,
+  [type=radio]:not(:checked) + label::after {
+    content: '';
+    width: 10px;
+    height: 10px;
+    background: pvar(--mainColor);
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    border-radius: 100%;
+    transition: all 0.2s ease;
+  }
+  [type=radio]:not(:checked) + label::after {
+    opacity: 0;
+    transform: scale(0);
+  }
+  [type=radio]:checked + label::after {
+    opacity: 1;
+    transform: scale(1);
+  }
 
-    &:focus + label::before {
-      outline: none;
-      border-color: #000;
-    }
+  .form-group-description {
+    display: block;
+    margin-top: -7px;
+    margin-bottom: 10px;
+    margin-left: 29px;
   }
 }
 
@@ -518,7 +546,7 @@
   }
 }
 
-@mixin table-badge {
+@mixin peertube-badge {
   border-radius: 2px;
   padding: 1/4em 1/2em;
   text-transform: uppercase;
@@ -628,12 +656,15 @@
   @include button-with-icon(20px, 5px, -1px);
 }
 
-@mixin row-blocks ($column-responsive: true) {
+@mixin row-blocks ($column-responsive: true, $min-height: 130px, $separator: true) {
   display: flex;
-  min-height: 130px;
+  min-height: $min-height;
   padding-bottom: 20px;
   margin-bottom: 20px;
-  border-bottom: 1px solid #C6C6C6;
+
+  @if $separator {
+    border-bottom: 1px solid #C6C6C6;
+  }
 
   @media screen and (max-width: $small-view) {
     @if $column-responsive {
@@ -673,6 +704,7 @@
   span {
     position: absolute;
     color: $grey-foreground-color;
+
     @if $small {
       top: -1px;
     }