miniobrowser: Bring Minio browser source into minio repo. (#3617)

browser/app/less/inc/form.less

@@ -0,0 +1,249 @@
+.form-control {
+    border: 0;
+    border-bottom: 1px solid @input-border;
+    color: #32393F;
+    padding: 5px;
+    width: 100%;
+    font-size: 13px;
+    background-color: transparent;
+}
+
+select.form-control {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    border-radius: 0;
+    background: url(../../img/select-caret.svg) no-repeat bottom 7px right;
+
+}
+
+
+/*--------------------------
+    Input Group
+----------------------------*/
+.input-group {
+    position: relative;
+    &:not(:last-child) {
+        margin-bottom: 25px;
+    }
+
+    label:not(.ig-label) {
+        font-size: 13px;
+        display: block;
+        margin-bottom: 10px;
+    }
+}
+
+.ig-label {
+    position: absolute;
+    text-align: center;
+    bottom: 7px;
+    left: 0;
+    width: 100%;
+    .transition(all);
+    .transition-duration(250ms);
+    padding: 2px 0 3px;
+    border-radius: 2px;
+    font-weight: 400;
+}
+
+.ig-helpers {
+    z-index: 1;
+    width: 100%;
+    left: 0;
+
+    &,
+    &:before,
+    &:after {
+        position: absolute;
+        height: 2px;
+        bottom: 0;
+    }
+
+    &:before,
+    &:after {
+        content: '';
+        width: 0;
+        .transition(all);
+        .transition-duration(250ms);
+        background-color: #03A9F4;
+    }
+
+    &:before {
+        left: 50%;
+    }
+
+    &:after {
+        right: 50%;
+    }
+}
+
+.ig-text {
+    width: 100%;
+    height: 40px;
+    border: 0;
+    background: transparent;
+    text-align: center;
+    position: relative;
+    z-index: 1;
+    border-bottom: 1px solid #eee;
+    color: #32393F;
+    font-size: 13px;
+
+
+    &:focus + .ig-helpers {
+        &:before,
+        &:after {
+            width: 50%;
+        }
+    }
+
+    &:valid,
+    &:disabled,
+    &:focus {
+        & ~ .ig-label {
+            bottom: 35px;
+            font-size: 13px;
+            z-index: 1;
+        }
+    }
+
+    &:disabled {
+        .opacity(0.5);
+    }
+}
+
+.ig-dark {
+    .ig-text {
+        color: @white;
+        border-color: rgba(255,255,255,0.1);
+    }
+
+    .ig-helpers {
+        &:before,
+        &:after {
+            background-color: #dfdfdf;
+            height: 1px;
+        }
+    }
+}
+
+.ig-left {
+    .ig-label,
+    .ig-text {
+        text-align: left;
+    }
+}
+
+.ig-error {
+    .ig-label {
+        color: #E23F3F;
+    }
+    .ig-helpers i {
+        &:first-child,
+        &:first-child:before,
+        &:first-child:after {
+            background: rgba(226, 63, 63, 0.43);
+        }
+        &:last-child,
+        &:last-child:before,
+        &:last-child:after {
+            background: #E23F3F !important;
+        }
+    }
+    &:after {
+        content: "\f05a";
+        font-family: FontAwesome;
+        position: absolute;
+        top: 17px;
+        right: 9px;
+        font-size: 20px;
+        color: #D33D3E;
+    }
+}
+
+.ig-search {
+    &:before {
+        font-family: @font-family-icon;
+        content: '\f002';
+        font-size: 15px;
+        position: absolute;
+        left: 2px;
+        top: 8px;
+    }
+
+    .ig-text {
+        padding-left: 25px;
+    }
+}
+
+
+/*--------------------------
+    Share Spinners
+----------------------------*/
+.set-expire {
+    border: 1px solid @input-border;
+    margin: 35px 0 30px;
+}
+
+.set-expire-item {
+    padding: 9px 5px 3px;
+    position: relative;
+    display: table-cell;
+    width: 1%;
+    text-align: center;
+
+    &:not(:last-child) {
+        border-right: 1px solid @input-border;
+    }
+}
+
+.set-expire-title {
+    font-size: 10px;
+    text-transform: uppercase;
+}
+
+.set-expire-value {
+    display: inline-block;
+    overflow: hidden;
+    position: relative;
+    left: -8px;
+
+    input {
+        font-size: 20px;
+        text-align: center;
+        position: relative;
+        right: -15px;
+        border: 0;
+        color: @text-strong-color;
+        padding: 0;
+        height: 25px;
+        width: 100%;
+        font-weight: normal;
+    }
+}
+
+.set-expire-decrease,
+.set-expire-increase {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    background: url(../../img/arrow.svg) no-repeat center;
+    background-size: 85%;
+    left: 50%;
+    margin-left: -10px;
+    .opacity(0.2);
+    cursor: pointer;
+
+    &:hover {
+        .opacity(0.5);
+    }
+}
+
+.set-expire-increase {
+    top: -25px;
+}
+
+.set-expire-decrease {
+    bottom: -27px;
+    .rotate(-180deg);
+}