Design modals

[github/Chocobozzz/PeerTube.git] / client / src / sass / include / _mixins.scss

diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index a07bd5d28b995b860c2d179f8819de734678c5e6..252cf2173b30301b3a462af0b09ddbf511a50e4b 100644 (file)
--- 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;