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

Begin examples

pull/2034/head
jlukic 10 years ago
parent
8da0ff7eb1
commit
d8c300de37
18 changed files with 119 additions and 11 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      dist/components/menu.css
  2. 2
      dist/components/menu.min.css
  3. 7
      dist/semantic.css
  4. 2
      dist/semantic.min.css
  5. 52
      examples/fixed-menu.html
  6. 0
      examples/old/feed.css
  7. 0
      examples/old/feed.html
  8. 0
      examples/old/feed.js
  9. 0
      examples/old/grid.css
  10. 0
      examples/old/grid.html
  11. 0
      examples/old/homepage.css
  12. 0
      examples/old/homepage.html
  13. 0
      examples/old/homepage.js
  14. 0
      examples/old/kitchensink.css
  15. 0
      examples/old/kitchensink.html
  16. 52
      examples/starter.html
  17. 3
      src/definitions/collections/menu.less
  18. 6
      src/themes/default/collections/menu.variables

6
dist/components/menu.css
View File

@ -1294,8 +1294,10 @@ Floated Menu / Item
/*--- Border ---*/ /*--- Border ---*/
.ui.inverted.menu .item:before { .ui.inverted.menu .item:before {
background: -webkit-linear-gradient(rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.06) 100%);
background: linear-gradient(rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.06) 100%);
background: rgba(255, 255, 255, 0.08);
}
.ui.inverted.menu .item:hover:before {
background: none;
} }
.ui.vertical.inverted.menu .item:before { .ui.vertical.inverted.menu .item:before {
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.06) 100%); background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.06) 100%);

2
dist/components/menu.min.css
File diff suppressed because it is too large
View File

7
dist/semantic.css
View File

@ -18332,8 +18332,11 @@ Floated Menu / Item
/*--- Border ---*/ /*--- Border ---*/
.ui.inverted.menu .item:before { .ui.inverted.menu .item:before {
background: -webkit-linear-gradient(rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.06) 100%);
background: linear-gradient(rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.06) 100%);
background: rgba(255, 255, 255, 0.08);
}
.ui.inverted.menu .item:hover:before {
background: none;
} }
.ui.vertical.inverted.menu .item:before { .ui.vertical.inverted.menu .item:before {

2
dist/semantic.min.css
File diff suppressed because it is too large
View File

52
examples/fixed-menu.html
View File

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html>
<head>
<!-- Standard Meta -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<!-- Site Properities -->
<title>Fixed Menu Example - Semantic</title>
<link rel="stylesheet" type="text/css" href="../dist/components/container.css">
<link rel="stylesheet" type="text/css" href="../dist/components/header.css">
<link rel="stylesheet" type="text/css" href="../dist/components/menu.css">
<style type="text/css">
body > .container {
padding-top: 7em;
}
.wireframe {
margin-top: 2em;
}
</style>
</head>
<body>
<div class="ui fixed inverted menu">
<div class="ui container">
<a href="#" class="item">Project Name</a>
<a href="#" class="item">Home</a>
<a href="#" class="item">Features</a>
<a href="#" class="item">Contact</a>
</div>
</div>
<div class="ui center aligned container">
<h1 class="ui header">Semantic UI starter template</h1>
<p>Use this document as a way to quickly start any new project.</p>
<p>All you get is this text and a mostly barebones HTML document.</p>
<img class="wireframe" src="images/wireframe/paragraph.png">
<img class="wireframe" src="images/wireframe/paragraph.png">
<img class="wireframe" src="images/wireframe/paragraph.png">
<img class="wireframe" src="images/wireframe/paragraph.png">
<img class="wireframe" src="images/wireframe/paragraph.png">
<img class="wireframe" src="images/wireframe/paragraph.png">
<img class="wireframe" src="images/wireframe/paragraph.png">
</div>
</body>
</html>

examples/feed.css → examples/old/feed.css
View File

examples/feed.html → examples/old/feed.html
View File

examples/feed.js → examples/old/feed.js
View File

examples/grid.css → examples/old/grid.css
View File

examples/grid.html → examples/old/grid.html
View File

examples/homepage.css → examples/old/homepage.css
View File

examples/homepage.html → examples/old/homepage.html
View File

examples/homepage.js → examples/old/homepage.js
View File

examples/kitchensink.css → examples/old/kitchensink.css
View File

examples/kitchensink.html → examples/old/kitchensink.html
View File

52
examples/starter.html
View File

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html>
<head>
<!-- Standard Meta -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<!-- Site Properities -->
<title>Starter Example - Semantic</title>
<link rel="stylesheet" type="text/css" href="../dist/components/container.css">
<link rel="stylesheet" type="text/css" href="../dist/components/header.css">
<link rel="stylesheet" type="text/css" href="../dist/components/menu.css">
<style type="text/css">
body > .container {
padding-top: 7em;
}
.wireframe {
margin-top: 2em;
}
</style>
</head>
<body>
<div class="ui fixed inverted menu">
<div class="ui container">
<a href="#" class="item">Project Name</a>
<a href="#" class="item">Home</a>
<a href="#" class="item">Features</a>
<a href="#" class="item">Contact</a>
</div>
</div>
<div class="ui center aligned container">
<h1 class="ui header">Semantic UI starter template</h1>
<p>Use this document as a way to quickly start any new project.</p>
<p>All you get is this text and a mostly barebones HTML document.</p>
<img class="wireframe" src="images/wireframe/paragraph.png">
<img class="wireframe" src="images/wireframe/paragraph.png">
<img class="wireframe" src="images/wireframe/paragraph.png">
<img class="wireframe" src="images/wireframe/paragraph.png">
<img class="wireframe" src="images/wireframe/paragraph.png">
<img class="wireframe" src="images/wireframe/paragraph.png">
<img class="wireframe" src="images/wireframe/paragraph.png">
</div>
</body>
</html>

3
src/definitions/collections/menu.less
View File

@ -1275,6 +1275,9 @@ Floated Menu / Item
.ui.inverted.menu .item:before { .ui.inverted.menu .item:before {
background: @invertedDividerBackground; background: @invertedDividerBackground;
} }
.ui.inverted.menu .item:hover:before {
background: none;
}
.ui.vertical.inverted.menu .item:before { .ui.vertical.inverted.menu .item:before {
background: @invertedVerticalDividerBackground; background: @invertedVerticalDividerBackground;
} }

6
src/themes/default/collections/menu.variables
View File

@ -396,11 +396,7 @@
@secondaryInvertedHoverColor: @invertedSelectedTextColor; @secondaryInvertedHoverColor: @invertedSelectedTextColor;
/* Inverted Menu Divider */ /* Inverted Menu Divider */
@invertedDividerBackground: linear-gradient(
rgba(255, 255, 255, 0.06) 0%,
rgba(255, 255, 255, 0.1) 50%,
rgba(255, 255, 255, 0.06) 100%)
;
@invertedDividerBackground: rgba(255, 255, 255, 0.08);
@invertedVerticalDividerBackground: linear-gradient(to right, @invertedVerticalDividerBackground: linear-gradient(to right,
rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.06) 0%,
rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 50%,

Write Preview
Loading…
Cancel
Save