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

Fixes to sidebar, inverted link lists

pull/1243/head
jlukic 10 years ago
parent
28051f212a
commit
e285c1c68f
4 changed files with 139 additions and 92 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 21
      src/definitions/elements/list.less
  2. 46
      src/definitions/modules/sidebar.less
  3. 2
      src/themes/default/elements/list.variables
  4. 162
      src/themes/default/globals/site.variables

21
src/definitions/elements/list.less
View File

@ -350,6 +350,27 @@ ol.ui.list ol,
color: @invertedDescriptionColor; color: @invertedDescriptionColor;
} }
/* Item Link */
.ui.inverted.list .list > a.item,
.ui.inverted.list > a.item {
cursor: pointer;
color: @invertedItemLinkColor;
}
.ui.inverted.list .list > a.item:hover,
.ui.inverted.list > a.item:hover {
color: @invertedItemLinkHoverColor;
}
/* Linking Content */
.ui.inverted.list .item a {
cursor: pointer;
color: @invertedItemLinkColor !important;
}
.ui.inverted.list .item a:hover {
color: @invertedItemLinkHoverColor !important;
}
/*------------------- /*-------------------
Link Link
--------------------*/ --------------------*/

46
src/definitions/modules/sidebar.less
View File

@ -333,7 +333,6 @@
/* Initial */ /* Initial */
.ui.slide.along.sidebar { .ui.slide.along.sidebar {
transition: transform @duration @easing;
z-index: @bottomLayer; z-index: @bottomLayer;
} }
.ui.left.slide.along.sidebar { .ui.left.slide.along.sidebar {
@ -349,6 +348,10 @@
transform: translate3d(0%, 50%, 0); transform: translate3d(0%, 50%, 0);
} }
.ui.animating.slide.along.sidebar {
transition: transform @duration @easing;
}
/* End */ /* End */
.ui.visible.slide.along.sidebar { .ui.visible.slide.along.sidebar {
transform: translate3d(0%, 0, 0); transform: translate3d(0%, 0, 0);
@ -391,23 +394,44 @@
---------------*/ ---------------*/
/* Initial */ /* Initial */
.ui.scale.down.sidebar ~ .pusher {
z-index: @bottomLayer;
width: 100%;
height: 100%;
overflow: hidden;
.ui.scale.down.sidebar {
transition: transform @duration @easing;
z-index: @topLayer;
} }
.ui.scale.down.left.sidebar ~ .pusher,
.ui.scale.down.right.sidebar ~ .pusher {
.ui.left.scale.down.sidebar {
transform: translate3d(-100%, 0, 0);
}
.ui.right.scale.down.sidebar {
transform: translate3d(100%, 0, 0);
}
.ui.top.scale.down.sidebar {
transform: translate3d(0%, -100%, 0);
}
.ui.bottom.scale.down.sidebar {
transform: translate3d(0%, 100%, 0);
}
.ui.scale.down.left.sidebar ~ .pusher {
transform-origin: 75% 50%; transform-origin: 75% 50%;
} }
.ui.scale.down.top.sidebar ~ .pusher,
.ui.scale.down.right.sidebar ~ .pusher {
transform-origin: 25% 50%;
}
.ui.scale.down.top.sidebar ~ .pusher {
transform-origin: 50% 75%;
}
.ui.scale.down.bottom.sidebar ~ .pusher { .ui.scale.down.bottom.sidebar ~ .pusher {
transform-origin: 50% 50%;
transform-origin: 50% 25%;
}
/* End */
.ui.visible.scale.down.sidebar {
transform: translate3d(0%, 0, 0);
} }
/* Animation */ /* Animation */
.pushable.scale.down.animating > .visible.ui.sidebar {
.ui.animating.scale.down > .visible.ui.sidebar {
transition: transform @duration @easing; transition: transform @duration @easing;
} }

2
src/themes/default/elements/list.variables
View File

@ -81,6 +81,8 @@
@invertedListIconColor: @invertedLightTextColor; @invertedListIconColor: @invertedLightTextColor;
@invertedHeaderColor: @invertedTextColor; @invertedHeaderColor: @invertedTextColor;
@invertedDescriptionColor: @invertedLightTextColor; @invertedDescriptionColor: @invertedLightTextColor;
@invertedItemLinkColor: @invertedTextColor;
@invertedItemLinkHoverColor: @linkHoverColor;
/* Link List */ /* Link List */
@linkListItemColor: @unselectedTextColor; @linkListItemColor: @unselectedTextColor;

162
src/themes/default/globals/site.variables
View File

@ -444,52 +444,52 @@
/*--- Colors ---*/ /*--- Colors ---*/
@primaryColorDown : darken(@primaryColor, 5);
@secondaryColorDown : darken(@secondaryColor, 5);
@blueDown : darken(@blue, 5);
@greenDown : darken(@green, 5);
@orangeDown : darken(@orange, 5);
@pinkDown : darken(@pink, 5);
@purpleDown : darken(@purple, 5);
@redDown : darken(@red, 5);
@tealDown : darken(@teal, 5);
@yellowDown : darken(@yellow, 5);
@lightBlueDown : darken(@lightBlue, 5);
@lightGreenDown : darken(@lightGreen, 5);
@lightOrangeDown : darken(@lightOrange, 5);
@lightPinkDown : darken(@lightPink, 5);
@lightPurpleDown : darken(@lightPurple, 5);
@lightRedDown : darken(@lightRed, 5);
@lightTealDown : darken(@lightTeal, 5);
@lightYellowDown : darken(@lightYellow, 5);
@primaryColorDown : darken(@primaryColor, 7);
@secondaryColorDown : darken(@secondaryColor, 7);
@blueDown : darken(@blue, 7);
@greenDown : darken(@green, 7);
@orangeDown : darken(@orange, 7);
@pinkDown : darken(@pink, 7);
@purpleDown : darken(@purple, 7);
@redDown : darken(@red, 7);
@tealDown : darken(@teal, 7);
@yellowDown : darken(@yellow, 7);
@lightBlueDown : darken(@lightBlue, 7);
@lightGreenDown : darken(@lightGreen, 7);
@lightOrangeDown : darken(@lightOrange, 7);
@lightPinkDown : darken(@lightPink, 7);
@lightPurpleDown : darken(@lightPurple, 7);
@lightRedDown : darken(@lightRed, 7);
@lightTealDown : darken(@lightTeal, 7);
@lightYellowDown : darken(@lightYellow, 7);
/*--- Emotive ---*/ /*--- Emotive ---*/
@positiveColorDown : darken(@positiveColor, 5);
@negativeColorDown : darken(@negativeColor, 5);
@positiveColorDown : darken(@positiveColor, 7);
@negativeColorDown : darken(@negativeColor, 7);
/*--- Neutrals ---*/ /*--- Neutrals ---*/
@fullBlackDown : darken(@fullBlack, 5);
@blackDown : darken(@black, 5);
@lightBlackDown : darken(@lightBlack, 5);
@fullBlackDown : darken(@fullBlack, 7);
@blackDown : darken(@black, 7);
@lightBlackDown : darken(@lightBlack, 7);
@lightGreyDown : darken(@lightGrey, 5);
@greyDown : darken(@grey, 5);
@darkGreyDown : darken(@darkGrey, 5);
@lightGreyDown : darken(@lightGrey, 7);
@greyDown : darken(@grey, 7);
@darkGreyDown : darken(@darkGrey, 7);
@whiteDown : darken(@white, 5);
@offWhiteDown : darken(@offWhite, 5);
@darkWhiteDown : darken(@darkWhite, 5);
@whiteDown : darken(@white, 7);
@offWhiteDown : darken(@offWhite, 7);
@darkWhiteDown : darken(@darkWhite, 7);
@facebookDownColor : darken(@facebookColor, 5);
@twitterDownColor : darken(@twitterColor, 5);
@googlePlusDownColor : darken(@googlePlusColor, 5);
@linkedInDownColor : darken(@linkedInColor, 5);
@youtubeDownColor : darken(@youtubeColor, 5);
@instagramDownColor : darken(@instagramColor, 5);
@pinterestDownColor : darken(@pinterestColor, 5);
@vkDownColor : darken(@vkColor, 5);
@facebookDownColor : darken(@facebookColor, 7);
@twitterDownColor : darken(@twitterColor, 7);
@googlePlusDownColor : darken(@googlePlusColor, 7);
@linkedInDownColor : darken(@linkedInColor, 7);
@youtubeDownColor : darken(@youtubeColor, 7);
@instagramDownColor : darken(@instagramColor, 7);
@pinterestDownColor : darken(@pinterestColor, 7);
@vkDownColor : darken(@vkColor, 7);
/*------------------- /*-------------------
@ -497,49 +497,49 @@
--------------------*/ --------------------*/
/*--- Standard ---*/ /*--- Standard ---*/
@primaryColorActive : darken(@primaryColor, 3);
@secondaryColorActive : darken(@secondaryColor, 3);
@blueActive : darken(@blue, 3);
@greenActive : darken(@green, 3);
@orangeActive : darken(@orange, 3);
@pinkActive : darken(@pink, 3);
@purpleActive : darken(@purple, 3);
@redActive : darken(@red, 3);
@tealActive : darken(@teal, 3);
@yellowActive : darken(@yellow, 3);
@lightBlueActive : darken(@lightBlue, 3);
@lightGreenActive : darken(@lightGreen, 3);
@lightOrangeActive : darken(@lightOrange, 3);
@lightPinkActive : darken(@lightPink, 3);
@lightPurpleActive : darken(@lightPurple, 3);
@lightRedActive : darken(@lightRed, 3);
@lightTealActive : darken(@lightTeal, 3);
@lightYellowActive : darken(@lightYellow, 3);
@primaryColorActive : darken(@primaryColor, 5);
@secondaryColorActive : darken(@secondaryColor, 5);
@blueActive : darken(@blue, 5);
@greenActive : darken(@green, 5);
@orangeActive : darken(@orange, 5);
@pinkActive : darken(@pink, 5);
@purpleActive : darken(@purple, 5);
@redActive : darken(@red, 5);
@tealActive : darken(@teal, 5);
@yellowActive : darken(@yellow, 5);
@lightBlueActive : darken(@lightBlue, 5);
@lightGreenActive : darken(@lightGreen, 5);
@lightOrangeActive : darken(@lightOrange, 5);
@lightPinkActive : darken(@lightPink, 5);
@lightPurpleActive : darken(@lightPurple, 5);
@lightRedActive : darken(@lightRed, 5);
@lightTealActive : darken(@lightTeal, 5);
@lightYellowActive : darken(@lightYellow, 5);
/*--- Emotive ---*/ /*--- Emotive ---*/
@positiveColorActive : darken(@positiveColor, 3);
@negativeColorActive : darken(@negativeColor, 3);
@positiveColorActive : darken(@positiveColor, 5);
@negativeColorActive : darken(@negativeColor, 5);
/*--- Neutrals ---*/ /*--- Neutrals ---*/
@fullBlackActive : darken(@fullBlack, 3);
@blackActive : darken(@black, 3);
@lightBlackActive : darken(@lightBlack, 3);
@lightGreyActive : darken(@lightGrey, 3);
@greyActive : darken(@grey, 3);
@darkGreyActive : darken(@darkGrey, 3);
@whiteActive : darken(@white, 3);
@offWhiteActive : darken(@offWhite, 3);
@darkWhiteActive : darken(@darkWhite, 3);
@facebookActiveColor : darken(@facebookColor, 3);
@twitterActiveColor : darken(@twitterColor, 3);
@googlePlusActiveColor : darken(@googlePlusColor, 3);
@linkedInActiveColor : darken(@linkedInColor, 3);
@youtubeActiveColor : darken(@youtubeColor, 3);
@instagramActiveColor : darken(@instagramColor, 3);
@pinterestActiveColor : darken(@pinterestColor, 3);
@vkActiveColor : darken(@vkColor, 3);
@fullBlackActive : darken(@fullBlack, 5);
@blackActive : darken(@black, 5);
@lightBlackActive : darken(@lightBlack, 5);
@lightGreyActive : darken(@lightGrey, 5);
@greyActive : darken(@grey, 5);
@darkGreyActive : darken(@darkGrey, 5);
@whiteActive : darken(@white, 5);
@offWhiteActive : darken(@offWhite, 5);
@darkWhiteActive : darken(@darkWhite, 5);
@facebookActiveColor : darken(@facebookColor, 5);
@twitterActiveColor : darken(@twitterColor, 5);
@googlePlusActiveColor : darken(@googlePlusColor, 5);
@linkedInActiveColor : darken(@linkedInColor, 5);
@youtubeActiveColor : darken(@youtubeColor, 5);
@instagramActiveColor : darken(@instagramColor, 5);
@pinterestActiveColor : darken(@pinterestColor, 5);
@vkActiveColor : darken(@vkColor, 5);
Write Preview
Loading…
Cancel
Save