Added tabs system (ezsystems#42)

ezpublishlegacy · May 23, 2017 · 14dfe14 · 14dfe14
1 parent 5fb3a2b
commit 14dfe14
Show file tree

Hide file tree

Showing 3 changed files with 667 additions and 543 deletions.
diff --git a/ui-guidelines/css/components-tabs.css b/ui-guidelines/css/components-tabs.css
@@ -0,0 +1,60 @@
+.ez-tabs {
+    margin: 0 auto;
+}
+
+.ez-tabs .tabs {
+    border-bottom: 2px solid #fafafa;
+    padding-left: 0;
+}
+
+.ez-tabs ul {
+    list-style-type: none;
+}
+
+.ez-tabs ul li {
+    display: inline-block;
+    transition: all 0.2s ease-in;
+}
+
+.ez-tabs ul li:hover {
+    border-radius: 4px 4px 0 0;
+    background-color: #ccc;
+}
+
+.ez-tabs ul li.active {
+    border-radius: 4px 4px 0 0;
+    background-color: #fafafa;
+}
+
+.ez-tabs ul li a {
+    display: block;
+    padding: .8em 2.4em;
+    color: #555;
+    font-weight: normal;
+    text-decoration: none;
+    text-align: center;
+}
+
+.ez-tabs ul li a::after {
+    display: block;
+    content: attr(title);
+    font-weight: bold;
+    height: 0px;
+    color: transparent;
+    overflow: hidden;
+    visibility: hidden;
+}
+
+.ez-tabs ul li a:hover {
+    color: #555;
+    transition: all .1s ease-in;
+}
+
+.ez-tabs li.active a, 
+.ez-tabs li.active a:focus, 
+.ez-tabs li.active a:hover {
+    border: transparent;
+    color: #333;
+    cursor: default;
+    font-weight: bold;
+}
diff --git a/ui-guidelines/css/guidelines.css b/ui-guidelines/css/guidelines.css
@@ -337,6 +337,13 @@ pre[class*="language-"] {
     text-decoration: none;
 }
 
+/* Components - tabs */
+.container-tabs {
+    width: 100%;
+    padding: 1.5em 1em;
+    background-color: #e5e3e3;
+}
+
 /*==== UTILITIES/HELPERS ====*/
 .top-half-extra {
     margin-top: 2em;