Design modals

3 files changed, 80 insertions, 3 deletions

diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index a1c222c31..0d96d5ec0 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -258,9 +258,39 @@ p-datatable {
 .modal {
   .modal-header {
     border-bottom: none;
+    margin-bottom: 5px;
 
-    .title-page-single {
-      margin: 0;
+    .modal-title {
+      font-size: 20px;
+      font-weight: $font-semibold;
+    }
+
+    .close {
+      @include icon(24px);
+
+      position: relative;
+      right: -1px;
+      float: right;
+      background-image: url('../assets/images/global/cross.svg');
+    }
+  }
+
+  .inputs {
+    margin-top: 40px;
+    margin-bottom: 0;
+    text-align: right;
+
+    .action-button-cancel {
+      @include peertube-button;
+      @include grey-button;
+
+      display: inline-block;
+      margin-right: 10px;
+    }
+
+    .action-button-submit {
+      @include peertube-button;
+      @include orange-button;
     }
   }
 }
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;