Design modals

2 files changed, 48 insertions, 1 deletions

diff --git a/client/src/sass/include/_bootstrap.scss b/client/src/sass/include/_bootstrap.scss
index 3857bb521..4f0e2893e 100644
--- a/client/src/sass/include/_bootstrap.scss
+++ b/client/src/sass/include/_bootstrap.scss
@@ -37,7 +37,7 @@
 //@import "~bootstrap-sass/assets/stylesheets/bootstrap/panels";
 //@import "~bootstrap-sass/assets/stylesheets/bootstrap/responsive-embed";
 //@import "~bootstrap-sass/assets/stylesheets/bootstrap/wells";
-@import "~bootstrap-sass/assets/stylesheets/bootstrap/close";
+//@import "~bootstrap-sass/assets/stylesheets/bootstrap/close";
 
 // Components w/ JavaScript
 @import "~bootstrap-sass/assets/stylesheets/bootstrap/modals";
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index a07bd5d28..252cf2173 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -22,6 +22,14 @@
   }
 }
 
+@mixin peertube-textarea ($width, $height) {
+  @include peertube-input-text($width);
+
+  height: $height;
+  padding: 5px 15px;
+  font-size: 15px;
+}
+
 @mixin orange-button {
   &, &:active, &:focus {
     color: #fff;
@@ -101,6 +109,7 @@
   overflow: hidden;
   background: #fff;
   position: relative;
+  font-size: 15px;
 
   &:after {
     top: 50%;
@@ -149,6 +158,44 @@
   }
 }
 
+// Thanks: https://codepen.io/triss90/pen/XNEdRe/
+@mixin peertube-radio-container {
+  input[type="radio"] {
+    display: none;
+
+    & + label {
+      font-weight: $font-regular;
+      cursor: pointer;
+
+      &:before {
+        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;
+        margin-right: 10px;
+      }
+    }
+
+    &:checked + label:before {
+      background-color: #000;
+      box-shadow: inset 0 0 0 4px #fff;
+    }
+
+    &:focus + label:before {
+      outline: none;
+      border-color: #000;
+    }
+  }
+}
+
 @mixin peertube-checkbox ($border-width) {
   display: none;