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

Experimenting with different docs icon, beginning theming of popup

pull/993/head
jlukic 10 years ago
parent
7aa345dec7
commit
3750099365
7 changed files with 268 additions and 56 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      server/files/javascript/popup.js
  2. 2
      server/files/javascript/semantic.js
  3. 139
      server/files/stylesheets/doc-icon.css
  4. 5
      server/files/stylesheets/semantic.css
  5. 12
      server/layouts/default.html.eco
  6. 105
      src/definitions/modules/popup.less
  7. 60
      src/themes/packages/default/modules/popup.variables

1
server/files/javascript/popup.js
View File

@ -11,6 +11,7 @@ semantic.popup.ready = function() {
;
$popup
.popup({
preserve: true,
className: {
popup: 'ignored ui popup'
}

2
server/files/javascript/semantic.js
View File

@ -362,7 +362,7 @@ semantic.ready = function() {
$header = $example.children('.ui.header:first-of-type').eq(0).add('p:first-of-type'),
$annotation = $example.find('.annotation'),
$code = $annotation.find('.code'),
$demo = $example.children().not($header).not('i.code:first-child, .code, .instructive, .language.label, .annotation, br, .ignore, .ignored'),
$demo = $example.children().not($header).not('.ui.popup, i.code:first-child, .code, .instructive, .language.label, .annotation, br, .ignore, .ignored'),
code = $example.data('code') || $.proxy(handler.generateCode, this)()
;

139
server/files/stylesheets/doc-icon.css
File diff suppressed because it is too large
View File

5
server/files/stylesheets/semantic.css
View File

@ -1104,6 +1104,7 @@ body.guide .main.container > * {
#example .example i.code {
cursor: pointer;
position: absolute;
top: 2em;
right: 0px;
opacity: 0.2;
@ -1117,6 +1118,10 @@ body.guide .main.container > * {
-ms-transition: opacity 0.3s ease-out;
transition: opacity 0.3s ease-out;
}
#example .example i.code:before {
font-family: 'Docs';
content: "\f05f";
}
#example .example:hover i.code {
opacity: 0.7;

12
server/layouts/default.html.eco
View File

@ -78,6 +78,7 @@
<!-- <link rel="stylesheet/less" type="text/css" href="/build/less/definitions/site.less" /> -->
<link rel="stylesheet" type="text/css" href="/stylesheets/doc-icon.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/semantic.css">
<% if 'development' in @getEnvironments(): %>
@ -228,15 +229,18 @@
</div>
<% if @document.type is 'UI Element' or @document.type is 'UI View' or @document.type is 'UI Collection' or @document.type is 'UI Module': %>
<a class="popup designer icon item" data-content="Designer Mode">
<i class="tint icon"></i>
<i class="docs designer icon"></i>
</a>
<a class="popup developer icon item" data-content="Developer Mode">
<i class="terminal icon"></i>
<i class="docs developer icon"></i>
</a>
<% end %>
<a class="popup icon github item" data-content="View project on Github" href="https://github.com/quirkyinc/semantic">
<i class="icon github"></i>
<a class="popup icon github item" data-content="View project on GitHub" href="https://github.com/quirkyinc/semantic">
<i class="alternate github icon"></i>
</a>
<!-- <a class="popup localization icon item" data-content="International">
<i class="docs globe icon"></i>
</a> -->
</div>
</div>
</div>

105
src/definitions/modules/popup.less
View File

@ -27,47 +27,44 @@
position: absolute;
top: 0px;
right: 0px;
z-index: 900;
z-index: @zIndex;
border: 1px solid rgba(0, 0, 0, 0.1);
max-width: 250px;
background-color: #FFFFFF;
border: @border;
max-width: @maxWidth;
background-color: @background;
padding: 0.8em 1.2em;
font-size: 0.875rem;
font-weight: normal;
font-style: normal;
color: rgba(0, 0, 0, 0.7);
padding: @verticalPadding @horizontalPadding;
font-weight: @fontWeight;
font-style: @fontStyle;
color: @color;
border-radius: 0.2em;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
border-radius: @borderRadius;
box-shadow: @boxShadow;
}
.ui.popup .header {
padding: 0em 0em 0.5em;
padding: 0em 0em @headerDistance;
font-size: 1.125em;
line-height: 1.2;
font-family: @headerFont;
font-size: @headerFontSize;
line-height: @headerLineHeight;
font-weight: bold;
}
.ui.popup:before {
position: absolute;
content: "";
width: 0.75em;
height: 0.75rem;
background-image: none;
background-color: #FFFFFF;
content: '';
width: @arrowSize;
height: @arrowSize;
background: @arrowBackground;
transform: rotate(45deg);
z-index: 2;
box-sizing: border-box;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
z-index: @arrowZIndex;
box-shadow: @arrowBoxShadow;
}
.ui.popup .ui.button {
width: 100%;
width: @popupButtonWidth;
}
/*******************************
@ -82,16 +79,16 @@
margin: 0em;
}
.ui.popup.bottom {
margin: 0.75em 0em 0em;
margin: @popupDistanceAway 0em 0em;
}
.ui.popup.top {
margin: 0em 0em 0.75em;
margin: 0em 0em @popupDistanceAway;
}
.ui.popup.left.center {
margin: 0em 0.75em 0em 0em;
margin: 0em @popupDistanceAway 0em 0em;
}
.ui.popup.right.center {
margin: 0em 0em 0em 0.75em;
margin: 0em 0em 0em @popupDistanceAway;
}
.ui.popup.center {
margin-left: -1.25em;
@ -103,8 +100,8 @@
/*--- Below ---*/
.ui.bottom.center.popup:before {
margin-left: -0.4em;
top: -0.4em;
margin-left: @arrowOffset;
top: @arrowOffset;
left: 50%;
right: auto;
bottom: auto;
@ -112,11 +109,11 @@
}
.ui.bottom.left.popup {
margin-right: -2em;
margin-right: @boxArrowOffset;
}
.ui.bottom.left.popup:before {
top: -0.4em;
right: 1em;
top: @arrowOffset;
right: @arrowDistanceFromEdge;
bottom: auto;
left: auto;
margin-left: 0em;
@ -124,11 +121,11 @@
}
.ui.bottom.right.popup {
margin-left: -2em;
margin-left: @boxArrowOffset;
}
.ui.bottom.right.popup:before {
top: -0.4em;
left: 1em;
top: @arrowOffset;
left: @arrowDistanceFromEdge;
right: auto;
bottom: auto;
margin-left: 0em;
@ -139,26 +136,26 @@
.ui.top.center.popup:before {
top: auto;
right: auto;
bottom: -0.4em;
bottom: @arrowOffset;
left: 50%;
margin-left: -0.4em;
margin-left: @arrowOffset;
}
.ui.top.left.popup {
margin-right: -2em;
margin-right: @boxArrowOffset;
}
.ui.top.left.popup:before {
bottom: -0.4em;
right: 1em;
bottom: @arrowOffset;
right: @arrowDistanceFromEdge;
top: auto;
left: auto;
margin-left: 0em;
}
.ui.top.right.popup {
margin-left: -2em;
margin-left: @boxArrowOffset;
}
.ui.top.right.popup:before {
bottom: -0.4em;
left: 1em;
bottom: @arrowOffset;
left: @arrowDistanceFromEdge;
top: auto;
right: auto;
margin-left: 0em;
@ -167,21 +164,21 @@
/*--- Left Center ---*/
.ui.left.center.popup:before {
top: 50%;
right: -0.35em;
right: @arrowOffset;
bottom: auto;
left: auto;
margin-top: -0.4em;
box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2);
margin-top: @arrowOffset;
box-shadow: @leftArrowBoxShadow;
}
/*--- Right Center ---*/
.ui.right.center.popup:before {
top: 50%;
left: -0.35em;
left: @arrowOffset;
bottom: auto;
right: auto;
margin-top: -0.4em;
box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2);
margin-top: @arrowOffset;
box-shadow: @rightArrowBoxShadow;
}
/*******************************
@ -236,4 +233,12 @@
box-shadow: none;
}
/*--------------
Sizes
---------------*/
.ui.popup {
font-size: @medium;
}
.loadUIOverrides();

60
src/themes/packages/default/modules/popup.variables
View File

@ -1,3 +1,61 @@
/*******************************
Popup
*******************************/
*******************************/
/*-------------------
Element
--------------------*/
@zIndex: 900;
@background: @white;
@maxWidth: 250px;
@border: 1px solid rgba(0, 0, 0, 0.1);
@boxShadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
@color: @textColor;
@verticalPadding: 0.8em;
@horizontalPadding: 1.2em;
@fontWeight: normal;
@fontStyle: normal;
@borderRadius: 0.2em;
/* Placement */
@popupDistanceAway: @arrowSize;
@arrowDistanceFromEdge: 1em;
@boxArrowOffset: -5em;
/*-------------------
Parts
--------------------*/
/* Header */
@headerFontFamily: @headerFont;
@headerFontSize: 1.125em;
@headerDistance: 0.5em;
@headerLineHeight: 1.2;
@arrowSize: 0.75em;
@arrowBackground: @white;
@arrowZIndex: 2;
@arrowOffset: -0.4em;
@arrowShadowColor: rgba(0, 0, 0, 0.2);
@arrowStroke: 1px;
@arrowBoxShadow: 1px 1px @arrowStroke @arrowShadowColor;
@leftArrowBoxShadow: 1px -1px @arrowStroke @arrowShadowColor;
@rightArrowBoxShadow: -1px 1px @arrowStroke @arrowShadowColor;
/*-------------------
Coupling
--------------------*/
@popupButtonWidth: 100%;
/* Sizes */
@medium: 0.875rem;
Write Preview
Loading…
Cancel
Save