urfu-ui-kit-vanilla 1.0.1 → 1.0.2

package/package.json

@@ -3,7 +3,7 @@
   "description": "UrFU UI-Kit for Vanilla Web",
   "license": "UNLICENSED",
   "private": false,
-  "version": "1.0.1",
+  "version": "1.0.2",
   "type": "module",
   "repository": {
     "type": "git",

package/playground/index.html

@@ -63,7 +63,7 @@
       </section>
       <h2>Tabs, Breadcrumbs</h2>
       <section class="container">
-        <button class="u-tab all-danger">Tab</button>
+        <button class="u-tab u-tab-all-danger">Tab</button>
         <button class="u-tab u-tab-active">Tab</button>
         <button class="u-tab">Tab</button>
         <button class="u-tab">Tab</button>
@@ -184,7 +184,6 @@
         <h3>Заголовок</h3>
         <h4>Заголовок</h4>
         <h5>Заголовок</h5>
-        <h6>Заголовок</h6>
         <div class="st">Заголовок</div>
         <div class="ds">Заголовок</div>
         <div class="th">Заголовок</div>

package/src/main.css

@@ -1,133 +1,5 @@
-/**
- * Global Reset of all HTML Elements
- *
- * Resetting all of our HTML Elements ensures a smoother
- * visual transition between browsers. If you don't believe me,
- * try temporarily commenting out this block of code, then go
- * and look at Mozilla versus Safari, both good browsers with
- * a good implementation of CSS. The thing is, all browser CSS
- * defaults are different and at the end of the day if visual
- * consistency is what we're shooting for, then we need to
- * make sure we're resetting all spacing elements.
- *
- */
 @import "ui-icons.css";
 @import "ui-icons.css";
-* {
-  box-sizing: border-box;
-}
-html,
-body {
-  border: 0;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-}
-div,
-span,
-object,
-iframe,
-img,
-table,
-caption,
-thead,
-tbody,
-tfoot,
-tr,
-tr,
-td,
-article,
-aside,
-canvas,
-details,
-figure,
-hgroup,
-menu,
-nav,
-footer,
-header,
-section,
-summary,
-mark,
-audio,
-video {
-  border: 0;
-  margin: 0;
-  padding: 0;
-}
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-blockquote,
-pre,
-a,
-abbr,
-address,
-cit,
-code,
-del,
-dfn,
-em,
-ins,
-q,
-samp,
-small,
-strong,
-sub,
-sup,
-b,
-i,
-hr,
-dl,
-dt,
-dd,
-ol,
-ul,
-li,
-fieldset,
-legend,
-label {
-  border: 0;
-  font-size: 100%;
-  vertical-align: baseline;
-  margin: 0;
-  padding: 0;
-}
-article,
-aside,
-canvas,
-figure,
-figure img,
-figcaption,
-hgroup,
-footer,
-header,
-nav,
-section,
-audio,
-video {
-  display: block;
-}
-table {
-  border-collapse: separate;
-  border-spacing: 0;
-}
-table caption,
-table th,
-table td {
-  text-align: left;
-  vertical-align: middle;
-}
-a img {
-  border: 0;
-}
-:focus {
-  outline: 0;
-}
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
@@ -155,6 +27,9 @@ a img {
 * {
   font-family: 'Montserrat';
 }
+* {
+  box-sizing: border-box;
+}
 /* полоса прокрутки (скроллбар) */
 ::-webkit-scrollbar {
   background-color: transparent;
@@ -189,6 +64,36 @@ a img {
   scrollbar-width: 8px;
   /*Толщина скролла thin, auto*/
 }
+body {
+  background-color: #F5F5F5;
+}
+#app {
+  padding: 15px 20px;
+  max-width: 920px;
+  margin: 30px auto 20px;
+  background-color: #FFFFFF;
+  height: 100%;
+  border-radius: 10px;
+}
+section {
+  margin-bottom: 20px;
+}
+.flex {
+  display: flex;
+  justify-content: space-between;
+}
+.container {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 10px;
+}
+h2 {
+  font-weight: 600;
+  font-size: 40px;
+  line-height: 48px;
+  color: #1E4391;
+  margin-bottom: 10px;
+}
 .u-button {
   height: 48px;
   padding: 0 50px;
@@ -315,7 +220,6 @@ a img {
 .u-button-text {
   display: flex;
   text-align: center;
-  line-height: 20px;
   border: none;
   padding: 0;
   font-weight: 600;
@@ -382,6 +286,9 @@ a img {
 .u-input.active {
   border: 1px solid #748AB9;
 }
+.u-input:focus {
+  outline: 0;
+}
 .u-input::placeholder {
   color: #A7A7A7;
 }
@@ -536,6 +443,9 @@ a img {
 .u-selectbox-select.active {
   border: 1px solid #748AB9;
 }
+.u-selectbox-select:focus {
+  outline: 0;
+}
 .u-selectbox-select::placeholder {
   color: #A7A7A7;
 }
@@ -831,13 +741,13 @@ a img {
   background-color: #1E4391;
   border: 2px solid #1E4391;
 }
-.u-tab.all-danger:focus,
-.u-tab.all-danger.u-tab-active {
+.u-tab-all-danger:focus,
+.u-tab-all-danger.u-tab-active {
   color: #EF302B;
   background-color: #FFFFFF;
   border: 2px solid #EF302B;
 }
-.u-tab.all-danger:hover {
+.u-tab-all-danger:hover {
   color: #FFFFFF;
   background-color: #EF302B;
   border: 2px solid #EF302B;
@@ -1161,6 +1071,13 @@ a img {
 .fw-600 {
   font-weight: 600;
 }
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
 h1 {
   font-weight: 600;
   font-size: 52px;
@@ -1229,6 +1146,9 @@ h5 {
   padding-bottom: 4px;
   border-bottom: 8px solid #1E4391;
 }
+* {
+  box-sizing: border-box;
+}
 /* полоса прокрутки (скроллбар) */
 ::-webkit-scrollbar {
   background-color: transparent;
@@ -1263,3 +1183,33 @@ h5 {
   scrollbar-width: 8px;
   /*Толщина скролла thin, auto*/
 }
+body {
+  background-color: #F5F5F5;
+}
+#app {
+  padding: 15px 20px;
+  max-width: 920px;
+  margin: 30px auto 20px;
+  background-color: #FFFFFF;
+  height: 100%;
+  border-radius: 10px;
+}
+section {
+  margin-bottom: 20px;
+}
+.flex {
+  display: flex;
+  justify-content: space-between;
+}
+.container {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 10px;
+}
+h2 {
+  font-weight: 600;
+  font-size: 40px;
+  line-height: 48px;
+  color: #1E4391;
+  margin-bottom: 10px;
+}

package/src/main.less

@@ -1,4 +1,3 @@
-@import "styles/reset";
 @import "styles/fonts";
 @import "styles/const/base";
 @import "styles/const/fonts";
@@ -18,6 +17,10 @@
 @import "styles/special-classes/selectors";
 @import "ui-icons.css";
 
+* {
+  box-sizing: border-box;
+}
+
 /* полоса прокрутки (скроллбар) */
 ::-webkit-scrollbar {
   background-color: transparent;
@@ -60,38 +63,38 @@
 
 // страница показа
 
-// body {
-//   background-color: #F5F5F5;
-// }
-
-// #app {
-//   padding: 15px 20px;
-//   max-width: 920px;
-//   margin: 30px auto 20px;
-//   background-color: @clr-secondary-empty;
-//   height: 100%;
-//   border-radius: @radius;
-// }
-
-// section {
-//   margin-bottom: 20px;
-// }
-
-// .flex {
-//   display: flex; 
-//   justify-content: space-between;
-// }
-
-// .container {
-//   display: grid;
-//   grid-template-columns: repeat(4, 1fr);
-//   gap: 10px;
-// }
-
-// h2 {
-//   font-weight: 600;
-//   font-size: 40px;
-//   line-height: 48px;
-//   color: #1E4391;
-//   margin-bottom: 10px;
-// }
+body {
+  background-color: #F5F5F5;
+}
+
+#app {
+  padding: 15px 20px;
+  max-width: 920px;
+  margin: 30px auto 20px;
+  background-color: @clr-secondary-empty;
+  height: 100%;
+  border-radius: @radius;
+}
+
+section {
+  margin-bottom: 20px;
+}
+
+.flex {
+  display: flex; 
+  justify-content: space-between;
+}
+
+.container {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 10px;
+}
+
+h2 {
+  font-weight: 600;
+  font-size: 40px;
+  line-height: 48px;
+  color: #1E4391;
+  margin-bottom: 10px;
+}

package/src/styles/components/button.less

@@ -4,7 +4,6 @@
     height: @height-main;
     padding: 0 50px;
     text-align: center;
-    // line-height: 120%;
     border-radius: @radius;
     border: none;
     font-weight: 500;
@@ -16,7 +15,6 @@
 .button-text() {
     display: flex;
     text-align: center;
-    line-height: 20px;
     border: none;
     padding: 0;
     font-weight: 600;

package/src/styles/components/input.less

@@ -17,6 +17,9 @@
     &:hover, &:focus, &.active {
         border: 1px solid @clr-border-active;
     }
+    &:focus {
+        outline: 0;
+    }
     &::placeholder {
         color: @clr-secondary-subject;
     }

package/src/styles/components/tab.less

@@ -48,7 +48,7 @@
         background-color: @clr-main-primary;
         border: 2px solid @clr-main-primary;
     }
-    &.all-danger {
+    &-all-danger {
         &:focus, &.u-tab-active {
             color: @clr-main-danger;
             background-color: @clr-secondary-empty;

package/src/styles/special-classes/selectors.less

@@ -1,4 +1,7 @@
 @import "../const/fonts.less";
+h1, h2, h3, h4, h5 {
+    margin: 0;
+}
 h1 {
     .h1;
 }

package/src/styles/reset.less

@@ -1,63 +0,0 @@
-/**
- * Global Reset of all HTML Elements
- *
- * Resetting all of our HTML Elements ensures a smoother
- * visual transition between browsers. If you don't believe me,
- * try temporarily commenting out this block of code, then go
- * and look at Mozilla versus Safari, both good browsers with
- * a good implementation of CSS. The thing is, all browser CSS
- * defaults are different and at the end of the day if visual
- * consistency is what we're shooting for, then we need to
- * make sure we're resetting all spacing elements.
- *
- */
- * {
-  box-sizing: border-box;
- }
-
- html, body {
-    border: 0;
-    line-height: 1.5;
-    margin: 0;
-    padding: 0;
-  }
-  
-  div, span, object, iframe, img, table, caption, thead, tbody,
-  tfoot, tr, tr, td, article, aside, canvas, details, figure, hgroup, menu,
-  nav, footer, header, section, summary, mark, audio, video {
-    border: 0;
-    margin: 0;
-    padding: 0;
-  }
-  
-  h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cit, code,
-  del, dfn, em, ins, q, samp, small, strong, sub, sup, b, i, hr, dl, dt, dd,
-  ol, ul, li, fieldset, legend, label {
-    border: 0;
-    font-size: 100%;
-    vertical-align: baseline;
-    margin: 0;
-    padding: 0;
-  }
-  
-  article, aside, canvas, figure, figure img, figcaption, hgroup,
-  footer, header, nav, section, audio, video {
-    display: block;
-  }
-  
-  table {
-    border-collapse: separate;
-    border-spacing: 0;
-    caption, th, td {
-      text-align: left;
-      vertical-align: middle;
-    }
-  }
-  
-  a img {
-    border: 0;
-  }
-  
-  :focus {
-    outline: 0;
-  }