richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

coding a storm up the ui menu class 

Former-commit-id: 9c9cdf5ab8
Former-commit-id: f85fdae2ec
pull/258/head
Jack Lukic 11 years ago
parent
64c131f731
commit
cff27242f9
4 changed files with 462 additions and 155 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 74
      docs/button.html
  2. 257
      docs/menu.html
  3. 10
      docs/stylesheets/example.css
  4. 276
      src/ui/flat/menu.css

74
docs/button.html
View File

@ -90,48 +90,50 @@
</div>
</div>
</div>
<div class="ui fixed transparent black menu">
<div class="container">
<div class="title item">
Semantic UI: Button
</div>
<div class="icon previous disabled item">
<i class="icon left-open"></i>
</div>
<div class="section dropdown item">
1 of 14
<div class="menu">
<a class="active item">1. Button</a>
<a href="form.html" class="item">2. Form</a>
<a class="item">3. Headers</a>
<a class="item">4. Columns</a>
<a class="item">5. Elements</a>
<a class="item">6. Tags</a>
<a class="item">7. Items</a>
<a class="item">8. Panels</a>
</div>
</div>
<div class="icon next link item">
<a href="form.html"><i class="icon right-open"></i></a>
<div class="container">
<div class="title item">
Semantic UI: Button
</div>
<div class="icon previous disabled item">
<i class="icon left-open"></i>
</div>
<div class="section dropdown item">
1 of 14
<div class="menu">
<a class="active item">1. Button</a>
<a href="form.html" class="item">2. Form</a>
<a class="item">3. Headers</a>
<a class="item">4. Columns</a>
<a class="item">5. Elements</a>
<a class="item">6. Tags</a>
<a class="item">7. Items</a>
<a class="item">8. Panels</a>
</div>
<div class="right menu">
<a class="item" href="http://github.com/quirky/quirkyinc/semantic">
<i class="icon cloud"></i>
</a>
<a class="item" href="http://github.com/quirky/quirkyinc/semantic">
<i class="icon github"></i>
</a>
<div class="dropdown item">
<i class="icon tint"></i> Theme
<div class="theme menu">
<div class="active item" data-theme="flat">Flat</div>
<div class="item" data-theme="shaded">Shaded</div>
<div class="item" data-theme="classic">Classic</div>
</div>
</div>
<div class="icon next link item">
<a href="form.html"><i class="icon right-open"></i></a>
</div>
<div class="right menu">
<a class="item" href="http://github.com/quirky/quirkyinc/semantic">
<i class="icon cloud"></i>
</a>
<a class="item" href="http://github.com/quirky/quirkyinc/semantic">
<i class="icon github"></i>
</a>
<div class="dropdown item">
<i class="icon tint"></i> Theme
<div class="theme menu">
<div class="active item" data-theme="flat">Flat</div>
<div class="item" data-theme="shaded">Shaded</div>
<div class="item" data-theme="classic">Classic</div>
</div>
</div>
</div>
</div>
</div>
<div class="ui huge left attached vertical side buttons">
<div class="ui blue menu button">Menu</div>
</div>

257
docs/menu.html
View File

@ -2,7 +2,7 @@
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>UI ZZZZZZZZZZZZZ - Semantic</title>
<title>UI Menu - Semantic</title>
<link rel="stylesheet" class="ui" href="../src/ui/flat/panel.css" type="text/css" media="screen" />
<link rel="stylesheet" class="ui" href="../src/ui/flat/button.css" type="text/css" media="screen" />
@ -33,65 +33,69 @@
<body id="example">
<div class="sidr" id="menu">
<ul>
<li><a href="module.html">Introduction</a></li>
<li><a>Download</a></li>
<li><a href="#">UI</a>
<ul>
<li><a href="button.html">Button</a></li>
<li><a href="form.html">Forms</a></li>
<li><a href="table.html">Table</a></li>
<li><a href="table.html">Steps</a></li>
<li><a href="table.html">Progress</a></li>
<li><a href="text.html">Text Block</a></li>
<li><a href="header.html">Headers</a></li>
<li><a href="header.html">Segment</a></li>
<li><a href="column.html">Columns</a></li>
<li><a href="element.html">Elements (Grid System)</a></li>
<li><a href="tag.html">Tags</a></li>
<li><a href="item.html">Items (Lists of Content)</a></li>
<li><a href="panel.html">Panels (Type of Menu)</a></li>
<li><a href="icon.html">Icons</a></li>
<li><a href="divider.html">Dividers</a></li>
</ul>
</li>
<li><a href="#">UI Collections</a>
<ul>
<li><a href="activity.html">Activity Feed</a></li>
<li><a href="list.html">Content List</a></li>
<li><a href="user-list.html">User List</a></li>
<li><a href="form.html">Forms</a></li>
</ul>
</li>
<li><a href="#">UI Modules</a>
<ul>
<li><a href="accordion.html">Accordion</a></li>
<li><a href="chatroom.html">Chat Room</a></li>
<li><a href="modal.html">Modal</a></li>
<li><a href="nag.html">Nag</a></li>
<li><a href="popup.html">Popup</a></li>
<li><a href="search.html">Search</a></li>
<li><a href="star.html">Star Rating</a></li>
<li><a href="tab.html">Tabs</a></li>
</ul>
</li>
<li><a href="#">Behavioral Modules</a>
<ul>
<li><a href="api.html">API</a></li>
<li><a href="animation.html">Animation</a></li>
<li><a href="validate.html">Form Validation</a></li>
<li><a href="placeholder.html">Placeholder Text</a></li>
<li><a href="shape.html">Shape</a></li>
<li><a href="state.html">State</a></li>
</ul>
</li>
</ul>
<div class="ui large vertical menu" id="menu">
<div class="menu">
<div class="item"><a href="module.html"><b>Introduction</b></a></div>
<div class="item"><a href="download"><b>Download</b></a></div>
<div class="item">
<a href="#"><b>UI Elements</b></a>
<div class="menu">
<div class="item"><a href="button.html">Button</a></div>
<div class="active item"><a href="form.html">Forms</a></div>
<div class="item"><a href="table.html">Table</a></div>
<div class="item"><a href="steps.html">Steps</a></div>
<div class="item"><a href="progress.html">Progress</a></div>
<div class="item"><a href="text.html">Text Block</a></div>
<div class="item"><a href="header.html">Headers</a></div>
<div class="item"><a href="header.html">Segment</a></div>
<div class="item"><a href="column.html">Columns</a></div>
<div class="item"><a href="element.html">Elements (Grid System)</a></div>
<div class="item"><a href="tag.html">Tags</a></div>
<div class="item"><a href="item.html">Items (Lists of Content)</a></div>
<div class="item"><a href="panel.html">Panels (Type of Menu)</a></div>
<div class="item"><a href="icon.html">Icons</a></div>
<div class="item"><a href="divider.html">Dividers</a></div>
</div>
</div>
<div class="item">
<a href="#"><b>UI Views</b></a>
<div class="menu">
<div class="item"><a href="form.html">Forms</a></div>
<div class="item"><a href="activity.html">Activity Feed</a></div>
<div class="item"><a href="list.html">Content List</a></div>
<div class="item"><a href="user-list.html">User List</a></div>
</div>
</div>
<div class="item">
<a href="#"><b>UI Modules</b></a>
<div class="menu">
<div class="item"><a href="accordion.html">Accordion</a></div>
<div class="item"><a href="chatroom.html">Chat Room</a></div>
<div class="item"><a href="modal.html">Modal</a></div>
<div class="item"><a href="nag.html">Nag</a></div>
<div class="item"><a href="popup.html">Popup</a></div>
<div class="item"><a href="search.html">Search</a></div>
<div class="item"><a href="star.html">Star Rating</a></div>
<div class="item"><a href="tab.html">Tabs</a></div>
</div>
</div>
<div class="item">
<a href="#"><b>Behavioral Modules</b></a>
<div class="menu">
<div class="item"><a href="api.html">API</a></div>
<div class="item"><a href="animation.html">Animation</a></div>
<div class="item"><a href="validate.html">Form Validation</a></div>
<div class="item"><a href="placeholder.html">Placeholder Text</a></div>
<div class="item"><a href="shape.html">Shape</a></div>
<div class="item"><a href="state.html">State</a></div>
</div>
</div>
</div>
</div>
<div class="ui fixed transparent black menu">
<div class="container">
<div class="title item">
Semantic UI: ZZZZZZZZZZZZZ
Semantic UI: Menu
</div>
<div class="icon previous link item">
<a href="button.html"><i class="icon left-open"></i></a>
@ -100,9 +104,9 @@
3 of 14
<div class="menu">
<a href="button.html" class="item">1. Button</a>
<a class="active item">2. Form</a>
<a class="item">3. Table</a>
<a class="item">4. Columns</a>
<a href="form.html" class="item">2. Form</a>
<a href="table.html" class="item">3. Table</a>
<a class="item active">4. Menu</a>
<a class="item">5. Elements</a>
<a class="item">6. Tags</a>
<a class="item">7. Items</a>
@ -135,60 +139,141 @@
</div>
<div class="segment">
<div class="container">
<h1>ZZZZZZZZZZZZZ</h1>
<p>qqqqqqqqqq</p>
<h1>Menu</h1>
<p>A menu is a ui collection made up of items. These items can be links, dropdowns, menus themselves, or other item types.</p>
<p>Items containing menus are formatted as sub menus. Menus containing menus are formatted as the same tier as the parent menu.</p>
</div>
</div>
<div class="main container">
<div class="peek">
<div class="ui large vertical pointing bottom attached panel">
<li class="active">Standard</li>
<li>States</li>
<li class="active">Collection</li>
<li>Elements</li>
<li>Variations</li>
<li>Group</li>
</div>
</div>
<h2>Standard</h2>
<h2>Collection</h2>
<div class="example">
<h4>ZZZZZZZZZZZZZ</h4>
<p>qqqqqqqqqq</p>
<div class="ui form">
<div class="field">
<label>User Input</label>
<input type="text">
<h4>Menu</h4>
<p>This example uses several menu elements, an unclickable block, a clickable text link, a clickable icon link, and a dropdown group</p>
<div class="ui menu">
<div class="item">
Site Title
</div>
<div class="active item">
<a>Current section</a>
</div>
<div class="item">
<a>Section 1</a>
</div>
<div class="icon item">
<a><i class="icon heart"></i></a>
</div>
<div class="right dropdown item">
Dropdown <i class="icon down-dir"></i>
<div class="menu">
<div class="item">Choice 1</div>
<div class="item">Choice 2</div>
<div class="item">Choice 3</div>
</div>
</div>
</div>
</div>
<h2>States</h2>
<div class="example">
<h4>Loading</h4>
<p>If a ZZZZZZZZZZZZZ is in loading state, it will automatically show a loading indicator:</p>
</div>
<div class="example">
<h4>Error</h4>
<p>If a ZZZZZZZZZZZZZ is in an error state, it will automatically show any error message blocks:</p>
<h4>Vertical Menu</h4>
<p>This example uses several menu elements, an unclickable block, a clickable text link, a clickable icon link, and a dropdown group</p>
<div class="ui vertical menu">
<div class="item">
Site Title
</div>
<div class="active item">
<a href="#">Current section</a>
</div>
<div class="item">
<a href="#">Grouped Section</a>
<div class="menu">
<a class="item">Subsection 1</a>
<a class="item">Subsection 1</a>
<a class="item">Subsection 1</a>
</div>
</div>
<div class="dropdown item">
Dropdown <i class="icon right-dir"></i>
<div class="menu">
<div class="item">Choice 1</div>
<div class="item">Choice 2</div>
<div class="item">Choice 3</div>
</div>
</div>
</div>
</div>
<h2>Elements</h2>
<h2>States</h2>
<h2>Variations</h2>
<h3>Forms</h3>
<div class="example">
<h4>Size</h4>
<p>A ZZZZZZZZZZZZZ can also be small or large</p>
<h4>Pointing (Horizontal)</h4>
<p>A horizontal menu can point to content below itself to show ownership</p>
<div class="ui pointing menu">
<div class="item">
Site Title
</div>
<div class="active item">
<a href="#">Current section</a>
</div>
<div class="right menu">
<div class="dropdown item">
Dropdown <i class="icon down-dir"></i>
<div class="menu">
<div class="item">Choice 1</div>
<div class="item">Choice 2</div>
<div class="item">Choice 3</div>
</div>
</div>
</div>
</div>
</div>
<div class="example">
<h4>Pointing (Horizontal)</h4>
<p>A menu can point to content adjacent to itself to show ownership</p>
<div class="ui pointing vertical menu">
<div class="item">
Site Title
</div>
<div class="active item">
<a href="#">Current section</a>
</div>
<div class="item">
<a href="#">Grouped Section</a>
<div class="menu">
<a class="item">Subsection 1</a>
<a class="item">Subsection 1</a>
<a class="item">Subsection 1</a>
</div>
</div>
<div class="dropdown item">
Dropdown <i class="icon right-dir"></i>
<div class="menu">
<div class="item">Choice 1</div>
<div class="item">Choice 2</div>
<div class="item">Choice 3</div>
</div>
</div>
</div>
</div>
<h2>Groups</h2>
<div class="example">
<h4>ZZZZZZZZZZZZZ Groups</h4>
<p>ZZZZZZZZZZZZZ can exist side by side to show relation</p>
<h4>Menu Groups</h4>
<p>Menu can exist side by side to show relation</p>
</div>
</div>

10
docs/stylesheets/example.css
View File

@ -120,6 +120,7 @@ h4 {
}
h4 + p {
margin: 0px 0px 20px;
color: #888888;
}
pre {
background-color: #F0F0F0;
@ -164,6 +165,9 @@ a:hover {
box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2);
border-right: 1px solid #DDDDDD;
}
#example .sidr .ui.menu {
margin: 0px 0px 30px;
}
#example .section.dropdown .menu {
@ -387,6 +391,12 @@ a:hover {
}
/* some demo formatting */
.ui.menu a {
cursor: pointer;
}
@media only screen and (max-width : 1640px) {
#example .container {

276
src/ui/flat/menu.css
View File

@ -16,11 +16,49 @@
*******************************/
.ui.menu {
background-color: #EEEEEE;
background-color: #FFFFFF;
font-size: 0px;
border: 1px solid rgba(0, 0, 0, 0.1);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.ui.menu .item,
.ui.menu .item > a {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transition:
opacity 0.1s linear,
background 0.1s linear,
box-shadow 0.1s linear
;
-moz-transition:
opacity 0.1s linear,
background 0.1s linear,
box-shadow 0.1s linear
;
-o-transition:
opacity 0.1s linear,
background 0.1s linear,
box-shadow 0.1s linear
;
-ms-transition:
opacity 0.1s linear,
background 0.1s linear,
box-shadow 0.1s linear
;
transition:
opacity 0.1s linear,
background 0.1s linear,
box-shadow 0.1s linear
;
color: rgba(0, 0, 0, 0.8);
}
.ui.menu .item > a:hover {
@ -38,24 +76,21 @@
/* Items */
.ui.menu .item {
position: relative;
display: inline-block;
border-right: 1px solid rgba(0, 0, 0, 0.1);
padding: 0.62em 0.75em;
padding: 0.75em 0.95em;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-moz-user-select: -moz-none;
-khtml-user-select: none;
user-select: none;
}
.ui.menu > .item:first-child {
border-left: 1px solid rgba(0, 0, 0, 0.1);
}
.ui.menu .item > a {
display: block;
margin: -0.62em -0.75em;
padding: 0.62em 0.75em;
margin: -0.75em -0.95em;
padding: 0.75em 0.95em;
}
.ui.menu .menu.left,
@ -65,13 +100,53 @@
.ui.menu .menu.right,
.ui.menu .item.right {
float: right;
border-left: 1px solid rgba(0, 0, 0, 0.1);
}
/* borders */
.ui.menu .item:before {
position: absolute;
content: '';
top: 0%;
right: 0px;
width: 1px;
height: 100%;
background-image: -webkit-linear-gradient(top center,
rgba(0, 0, 0, 0.05) 0%,
rgba(0, 0, 0, 0.1) 50%,
rgba(0, 0, 0, 0.05) 100%)
;
background-image: -moz-linear-gradient(top center,
rgba(0, 0, 0, 0.05) 0%,
rgba(0, 0, 0, 0.1) 50%,
rgba(0, 0, 0, 0.05) 100%)
;
background-image: -o-linear-gradient(top center,
rgba(0, 0, 0, 0.05) 0%,
rgba(0, 0, 0, 0.1) 50%,
rgba(0, 0, 0, 0.05) 100%)
;
background-image: -ms-linear-gradient(top center,
rgba(0, 0, 0, 0.05) 0%,
rgba(0, 0, 0, 0.1) 50%,
rgba(0, 0, 0, 0.05) 100%)
;
background-image: linear-gradient(top center,
rgba(0, 0, 0, 0.05) 0%,
rgba(0, 0, 0, 0.1) 50%,
rgba(0, 0, 0, 0.05) 100%)
;
}
.ui.menu .menu.right:before,
.ui.menu .item.right:before {
right: auto;
left: 0px;
}
/* Dropdown Menu */
.ui.menu .dropdown.item {
position: relative;
box-shadow: none !important;
z-index: 10;
}
.ui.menu .dropdown.item .menu {
overflow: hidden;
@ -83,11 +158,16 @@
background-color: #FFFFFF;
opacity: 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-transition: opacity 0.2s ease-out;
-moz-transition: opacity 0.2s ease-out;
-o-transition: opacity 0.2s ease-out;
-ms-transition: opacity 0.2s ease-out;
transition: opacity 0.2s ease-out;
z-index: 11;
}
.ui.menu .dropdown.item:last-child .menu {
left: auto;
@ -150,22 +230,38 @@
}
/*--------------
Active
Down
---------------*/
.ui.menu .item.down,
.ui.menu .link.item:active,
.ui.menu a.item:active,
.ui.menu .item > a:active,
.ui.menu .dropdown.item .menu .item:active {
background-color: rgba(0, 0, 0, 0.05);
-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1) inset;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1) inset;
-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset;
}
/*--------------
Active
---------------*/
.ui.menu .item.active {
font-weight: bold;
background-color: #F0F0F0;
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
-webkit-box-shadow:
0px 0px 1px rgba(0, 0, 0, 0.1) inset
;
-moz-box-shadow:
0px 0px 1px rgba(0, 0, 0, 0.1) inset
;
box-shadow:
0px 0px 1px rgba(0, 0, 0, 0.1) inset
;
}
/*--------------
@ -199,17 +295,33 @@
.ui.black.menu .item .item > a {
color: rgba(255, 255, 255, 0.65);
}
.ui.black.menu .item {
border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.ui.black.menu .item:first-child {
border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.ui.black.menu .menu.right,
.ui.black.menu .item.right {
border-left: 1px solid rgba(255, 255, 255, 0.1);
.ui.black.menu .item:before {
background-image: -webkit-linear-gradient(top center,
rgba(255, 255, 255, 0.03) 0%,
rgba(255, 255, 255, 0.1) 50%,
rgba(255, 255, 255, 0.03) 100%)
;
background-image: -moz-linear-gradient(top center,
rgba(255, 255, 255, 0.03) 0%,
rgba(255, 255, 255, 0.1) 50%,
rgba(255, 255, 255, 0.03) 100%)
;
background-image: -o-linear-gradient(top center,
rgba(255, 255, 255, 0.03) 0%,
rgba(255, 255, 255, 0.1) 50%,
rgba(255, 255, 255, 0.03) 100%)
;
background-image: -ms-linear-gradient(top center,
rgba(255, 255, 255, 0.03) 0%,
rgba(255, 255, 255, 0.1) 50%,
rgba(255, 255, 255, 0.03) 100%)
;
background-image: linear-gradient(top center,
rgba(255, 255, 255, 0.03) 0%,
rgba(255, 255, 255, 0.1) 50%,
rgba(255, 255, 255, 0.03) 100%)
;
}
/* hover */
.ui.black.menu .item.hover,
.ui.black.menu .link.item:hover,
@ -225,9 +337,9 @@
.ui.black.menu a.item:active {
background-color: rgba(255, 255, 255, .1);
-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1) inset;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1) inset;
-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset;
}
@ -251,20 +363,74 @@
display: block;
border-left: none;
border-right: none;
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.ui.vertical.menu .item:first-child {
border-top: none;
/* border */
.ui.vertical.menu .item:before {
position: absolute;
content: '';
top: 0%;
left: 0px;
width: 100%;
height: 1px;
background-image: -webkit-linear-gradient(left center,
rgba(0, 0, 0, 0.03) 0%,
rgba(0, 0, 0, 0.1) 1.5em,
rgba(0, 0, 0, 0.03) 100%)
;
background-image: -moz-linear-gradient(left center,
rgba(0, 0, 0, 0.03) 0%,
rgba(0, 0, 0, 0.1) 1.5em,
rgba(0, 0, 0, 0.03) 100%)
;
background-image: -o-linear-gradient(left center,
rgba(0, 0, 0, 0.03) 0%,
rgba(0, 0, 0, 0.1) 1.5em,
rgba(0, 0, 0, 0.03) 100%)
;
background-image: -ms-linear-gradient(left center,
rgba(0, 0, 0, 0.03) 0%,
rgba(0, 0, 0, 0.1) 1.5em,
rgba(0, 0, 0, 0.03) 100%)
;
background-image: linear-gradient(left center,
rgba(0, 0, 0, 0.03) 0%,
rgba(0, 0, 0, 0.1) 1.5em,
rgba(0, 0, 0, 0.03) 100%)
;
}
.ui.vertical.menu .item:first-child:before {
background-image: none;
}
/* Dropdown menu */
.ui.vertical.menu .dropdown.item > i {
float: right;
}
.ui.vertical.menu .dropdown.item .menu {
top: -50%;
left: 100%;
margin: 0px;
border-left: none;
border: 1px solid rgba(0, 0, 0, 0.1);
font-size: 1em;
}
.ui.vertical.menu .dropdown.item .menu .item {
font-size: 1em;
}
/* Sub Menu */
.ui.vertical.menu .item > .menu {
margin: 0.5em -0.75em -0.62em;
margin: 0.5em -1em -0.75em;
}
.ui.vertical.menu .item > .menu > .item {
border: none;
padding: 0.5em 1.5em;
font-size: 0.9em;
font-size: 0.85em;
}
.ui.vertical.menu .item > .menu > .item:before {
display: none;
}
.ui.vertical.menu .item > .menu > .item > a {
margin: -0.5em -1.5em;
@ -291,6 +457,7 @@
position: fixed;
z-index: 10;
width: 100%;
border: none;
}
.ui.menu.fixed.top {
top: 0px;
@ -321,6 +488,49 @@
height: 100%;
}
/*-------------------
Pointing
--------------------*/
.ui.pointing.menu .item.active:after {
position: absolute;
bottom: -6px;
left: 50%;
content: "";
margin-left: -5px;
width: 12px;
height: 12px;
-webkit-box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1) inset;
box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1) inset;
background-color: #F0F0F0;
background-image: none;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
z-index: 2;
}
.ui.vertical.pointing.menu .item.active:after {
position: absolute;
top: 50%;
right: -6px;
bottom: auto;
left: auto;
-webkit-box-shadow: 1px -1px 1px 0 rgba(0, 0, 0, 0.15);
-moz-box-shadow: 1px -1px 1px 0 rgba(0, 0, 0, 0.15);
box-shadow: 1px -1px 1px 0 rgba(0, 0, 0, 0.15);
margin-top: -7px;
width: 12px;
height: 12px;
}
/*--------------
Sizes
---------------*/

Write Preview
Loading…
Cancel
Save