0.1.5

2019-06-09 02:36:32 +02:00
parent ebcb0c5dde
commit ac87de7e1c
31 changed files with 13817 additions and 13459 deletions
--- a/src_less/main.less
+++ b/src_less/main.less
@@ -1,50 +1,113 @@
-@bg-color:#FFF;
-
-*{
-    box-sizing: border-box;
-}
-html,body{
-    margin:0;
-}
-.nav{
-    background-color:#353b48;
-    height:50px;
-    line-height: 50px;
-    display:flex;
-    select{
-        height: 42px;
-        border: 0;
-        outline:0;
-        min-width: 200px;
-    }
-}
-
-.studentList{
-    display: flex;
-    flex-wrap: wrap;
-    .user{
-        border: 1px solid #454545;
-        margin: 5px;
-        padding: 5px;
-        transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1000ms;
-        &.disappear{
-            opacity: 0.09;
-            transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1000ms;
-        }
-        &.appear{
-            opacity: 1;
-            transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1000ms;
-        }
-        .user_img{
-            img{
-                width:200px;
-                height:200px;
-            }
-        }
-        .username{
-            text-align: center;
-            display: inline-block;
-            width: 200px;
-        }
-    }
+@bg-color:#FFF;
+
+
+@bg-color-dm:#DDD;
+@bg-color-dm-nav:darken(@bg-color-dm,10%);
+
+
+@btn-bgcolor:#0c81f5;
+@btn-color:#FFF;
+.App{
+    border: #e0e0e0 1px solid;
+    margin:24px;
+}
+
+*{
+    box-sizing: border-box;
+    font-family: Open Sans,Arial,sans-serif;
+}
+html,body{
+    margin:0;
+    color:rgba(0,0,0,.87);
+    background-color:#f9f9f9;
+}
+.nav{
+    background-color:#f4f5f6;
+    height:52px;
+    line-height: 50px;
+    display:flex;
+    border: #e0e0e0 1px solid;
+
+    .select-wrapper {
+        position: relative;
+        width: 200px;
+    }
+      
+    .select-wrapper::before {
+        color: @btn-bgcolor;
+        font-size: 20px;
+        pointer-events: none;
+        position: absolute;
+        right: 15px;
+        top: 10px;
+    }
+      
+    select {    
+        background: #f4f5f6;
+        border: none;
+        border: 1px @btn-bgcolor solid;
+        color: @btn-bgcolor;
+        cursor: pointer;
+        font-family: 'Open Sans', sans-serif;
+        font-size: 16px;
+        height: 40px;
+        outline: none;
+        padding-left: 10px;
+        width: 100%;
+      }
+      
+    select option {
+        color: @btn-bgcolor;
+    }
+      
+    select::-ms-expand {
+        display: none;
+    }
+      
+    select:focus::-ms-value {
+        background-color: transparent;
+    }
+
+    input[type=number]{
+        height: 40px;
+        border: 1px solid @btn-bgcolor;
+        background: none;
+        color: @btn-bgcolor;
+        padding: 0px 5px;
+    }
+    button{
+        height: 40px;
+        border: 1px solid  @btn-bgcolor;
+        background: @btn-bgcolor;
+        color: @btn-color;
+    }
+}
+
+.studentList{
+    display: flex;
+    flex-wrap: wrap;
+    .user{
+        border: 1px solid #454545;
+        margin: 5px;
+        padding: 5px;
+        transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1000ms;
+        &.disappear{
+            opacity: 0.09;
+            transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1000ms;
+        }
+        &.appear{
+            opacity: 1;
+            transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1000ms;
+        }
+        .user_img{
+            img{
+                width:200px;
+            }
+        }
+        .username{
+            text-align: center;
+            display: inline-block;
+            width: 200px;
+        }
+    }
 }