Эхлэл Бүгдийг харах Тусламж
Нэвтрэх
cixo-electronic
/
cx-doxy
2
0
Салаа 0
Файлууд Асуудлууд 0 Хуулах хүсэлтүүд 0 Мэдлэгийн сан
Эх сурвалжийг харах

Working on app UI.

cixo 1 жил өмнө
parent
2bf8f686fd
commit
0f8a34ce21
8 өөрчлөгдсөн 225 нэмэгдсэн , 19 устгасан
Өөрчлөлтийг ялгаж харах Өөрчлөлтийн статистик харах
  1. 48 19
      core.html
  2. 19 0
      theme/colors.css
  3. 6 0
      theme/core.css
  4. 11 0
      theme/fonts.css
  5. 54 0
      theme/items_list.css
  6. 12 0
      theme/left_bar.css
  7. 18 0
      theme/skeleton.css
  8. 57 0
      theme/top_bar.css

+ 48 - 19
core.html
Файл харах 

@@ -35,8 +35,12 @@
 
     </head>
 
 
     <body>
 
-        <div class="app">
 
+        <div class="app dark">
 
             <div class="top-bar">
 
+                <div class="project-name-bar">
 
+                    <p>Sample project</p>
 
+                </div>
 
+
 
                 <div class="search-bar">
 
                     <input 
                         name="search-type" 
@@ -52,25 +56,11 @@
 
                         backspace
 
                     </span>
 
                     </button>
 
-                    
-                </div>
 
-
 
-                <div class="logo-bar">
 
                 </div>
 
             </div>
 
 
             <div class="left-bar">
 
-                <div class="control-buttons">
 
-                    <button
 
-                        name="close-it"
 
-                        class="close-it"
 
-                        type="button">
 
-                    <span 
-                        class="material-symbols-outlined">
 
-                        close
 
-                    </span>
 
-                    </button>
 
-
 
+                <div class="control-button">
 
                     <button
 
                         name="open-it"
 
                         class="open-it"
 
@@ -81,9 +71,48 @@
 
                     </span>
 
                     </button>
 
                 </div>
 
+
 
+                <div class="items-list">
 
+                    <div class="list-item">
 
+                        <span 
+                            class="material-symbols-outlined">
 
+                            receipt_long
 
+                        </span>
 
+                        <p>
 
+                            Submission 1
 
+                        </p>
 
+                    </div>
 
+                    <div class="list-item">
 
+                        <span 
+                            class="material-symbols-outlined">
 
+                            receipt_long
 
+                        </span>
 
+                        <p>
 
+                            Submission 2
 
+                        </p>
 
+                    </div>
 
+                    <div class="list-item">
 
+                        <span 
+                            class="material-symbols-outlined">
 
+                            receipt_long
 
+                        </span>
 
+                        <p>
 
+                            Submission 3
 
+                        </p>
 
+                    </div>
 
+                    <div class="list-item">
 
+                        <span 
+                            class="material-symbols-outlined">
 
+                            receipt_long
 
+                        </span>
 
+                        <p>
 
+                            Submission 4
 
+                        </p>
 
+                    </div>
 
+                </div>
 
             </div>
 
 
-            <div class="submission">
 
+            <div class="submission-container">
 
                 <div class="title">
 
                     <p class="name"></p>
 
                     <p class="description"></p>
 
@@ -93,7 +122,7 @@
 
                 </div>
 
             </div>
 
 
-            <div class="elements">
 
+            <div class="elements-bar">
 
                 <div class="control-buttons">
 
                     <button
 
                         name="close-it"
 
@@ -117,7 +146,7 @@
 
                 </div>
 
             </div>
 
 
-            <div class="element">
 
+            <div class="element-container">
 
                 <div class="title">
 
                     <div class="content">

+ 19 - 0
theme/colors.css
Файл харах 

@@ -0,0 +1,19 @@
 
+.app.dark {
 
+    --top-bar-color: #40376E;
 
+    --submission-container-color: #36558F;
 
+    --left-bar-color: #376484;
 
+    --elements-bar-color: #3F4563;
 
+    --element-bar: #434553;
 
+    --font-color: #FFFFFF;
 
+    --reverse-font-color: #232323;
 
+}
 
+
 
+.app.light {
 
+    --top-bar-color: #008DD5;
 
+    --submission-container-color: #EDE6E3;
 
+    --left-bar-color: #DADAD9;
 
+    --elements-bar-color: #CCBCD4;
 
+    --element-bar: #FFFFFF;
 
+    --font-color: #000000;
 
+    --reverse-font-color: #F8F8F8;
 
+}

+ 6 - 0
theme/core.css
Файл харах 

@@ -0,0 +1,6 @@
 
+@import url("./colors.css");
 
+@import url("./skeleton.css");
 
+@import url("./fonts.css");
 
+@import url("./top_bar.css");
 
+@import url("./left_bar.css");
 
+@import url("./items_list.css");

+ 11 - 0
theme/fonts.css
Файл харах 

@@ -0,0 +1,11 @@
 
+.app {
 
+    --font-size: 18px;
 
+}
 
+
 
+.app {
 
+    font-family: "Inter", sans-serif;
 
+    font-optical-sizing: auto;
 
+    font-weight: 400;
 
+    font-style: normal;
 
+    font-size: var(--font-size);
 
+}

+ 54 - 0
theme/items_list.css
Файл харах 

@@ -0,0 +1,54 @@
 
+.items-list {
 
+    display: flex;
 
+    flex-direction: column;
 
+    align-items: center;
 
+    justify-content: center;
 
+}
 
+
 
+.items-list .list-item {
 
+    box-sizing: border-box;
 
+    width: 100%;
 
+    padding: calc(var(--padding) / 2);
 
+    display: flex;
 
+    flex-direction: row;
 
+    justify-content: center;
 
+    align-items: center;
 
+    border: 3px solid white;
 
+    border-bottom: none;
 
+    margin: 0px;
 
+    transition: color 0.5s, background-color 0.5s;
 
+}
 
+
 
+.items-list .list-item p {
 
+    margin: 0px;
 
+}
 
+
 
+.items-list .list-item:first-child {
 
+    border-radius: calc(var(--padding) / 2) calc(var(--padding) / 2) 0 0;
 
+}   
+
 
+.items-list .list-item:last-child {
 
+    border-bottom: 3px solid white;
 
+    border-radius: 0 0 calc(var(--padding) / 2) calc(var(--padding) / 2);
 
+}
 
+
 
+.items-list .list-item:hover {
 
+    background-color: var(--font-color);
 
+    color: var(--left-bar-color);
 
+}
 
+
 
+.control-button button {
 
+    position: absolute;
 
+    top: calc(var(--padding) * 2);
 
+    left: 100%;
 
+    border: none;
 
+    background-color: var(--left-bar-color);
 
+    color: var(--font-color);
 
+    padding: calc(var(--padding) / 2);
 
+    border-radius: 0 calc(var(--padding) / 2) calc(var(--padding) / 2) 0;
 
+    transition: transform 0.5s;
 
+}
 
+
 
+.control-button button:hover {
 
+    transform: scale(1.2);
 
+}

+ 12 - 0
theme/left_bar.css
Файл харах 

@@ -0,0 +1,12 @@
 
+.left-bar {
 
+    box-sizing: border-box;
 
+    position: fixed;
 
+    width: 300px;
 
+    top: 50%;
 
+    transform: translateY(-50%);
 
+    max-height: 80%;
 
+    background-color: var(--left-bar-color);
 
+    border-radius: 0 var(--padding) var(--padding) 0;
 
+    padding: var(--padding);
 
+    color: var(--font-color);
 
+}

+ 18 - 0
theme/skeleton.css
Файл харах 

@@ -0,0 +1,18 @@
 
+body {
 
+    --padding: 20px;
 
+}
 
+
 
+body {
 
+    margin: 0px;
 
+    padding: 0px;
 
+}
 
+
 
+.element-container {
 
+    position: fixed;
 
+    top: 100%;
 
+    height: 80%;
 
+    width: 80%;
 
+    left: 10%;
 
+}
 
+
 
+

+ 57 - 0
theme/top_bar.css
Файл харах 

@@ -0,0 +1,57 @@
 
+.top-bar {
 
+    background-color: var(--top-bar-color);
 
+    display: flex;
 
+    flex-direction: row;
 
+    flex-wrap: nowrap;
 
+    justify-content: space-between;
 
+    align-items: center;
 
+}
 
+
 
+.top-bar .project-name-bar {
 
+    margin: 0px 20px;
 
+    color: var(--font-color);
 
+}
 
+
 
+.top-bar .search-bar {
 
+    display: flex;
 
+    flex-direction: row;
 
+    justify-content: center;
 
+    align-items: center;
 
+    margin: calc(var(--padding) / 2) var(--padding);
 
+}
 
+
 
+.top-bar .search-bar {
 
+    --height: calc(var(--font-size) + var(--padding));
 
+}   
+
 
+.top-bar .search-bar input[type="text"] {
 
+    box-sizing: border-box;
 
+    outline: none !important;
 
+    border: 3px solid var(--font-color);
 
+    border-right: none;
 
+    background-color: transparent;
 
+    color: var(--font-color);
 
+    font-size: var(--font-size);
 
+    padding: calc(var(--padding) / 2) var(--padding);
 
+    height: var(--height);
 
+    border-radius: calc(var(--height) * 2) 0 0 calc(var(--height) * 2);
 
+}
 
+
 
+.top-bar .search-bar button {
 
+    box-sizing: border-box;
 
+    outline: none !important;
 
+    border: 3px solid var(--font-color);
 
+    background-color: var(--font-color);
 
+    color: var(--top-bar-color);
 
+    padding: calc(var(--padding) / 2) var(--padding);
 
+    height: var(--height);
 
+    border-radius: 0 calc(var(--height) * 2) calc(var(--height) * 2) 0;
 
+    display: flex;
 
+    align-items: center;
 
+    justify-content: center;
 
+}
 
+
 
+.top-bar .search-bar button span {
 
+    font-size: calc(var(--font-size) * 1.5);
 
+    display: block;
 
+}