Browse Source

Updating modal/button variable defaults

pull/1129/head
jlukic 10 years ago
parent
commit
70ec2d9e1f
20 changed files with 138 additions and 136 deletions
  1. 18
      server/documents/modules/modal.html.eco
  2. BIN
      server/files/images/avatar/large/ade.jpg
  3. BIN
      server/files/images/avatar/large/chris.jpg
  4. BIN
      server/files/images/avatar/large/jenny.jpg
  5. BIN
      server/files/images/avatar/large/laura.jpg
  6. BIN
      server/files/images/avatar/large/nan.jpg
  7. BIN
      server/files/images/avatar/large/nom.jpg
  8. BIN
      server/files/images/avatar/large/zoe.jpg
  9. BIN
      server/files/images/avatar/small/ade.jpg
  10. BIN
      server/files/images/avatar/small/chris.jpg
  11. BIN
      server/files/images/avatar/small/jenny.jpg
  12. BIN
      server/files/images/avatar/small/laura.jpg
  13. BIN
      server/files/images/avatar/small/nan.jpg
  14. BIN
      server/files/images/avatar/small/nom.jpg
  15. BIN
      server/files/images/avatar/small/zoe.jpg
  16. 4
      src/definitions/elements/button.less
  17. 4
      src/definitions/modules/modal.less
  18. 5
      src/themes/packages/default/elements/button.variables
  19. 240
      src/themes/packages/default/globals/site.variables
  20. 3
      src/themes/packages/default/modules/modal.variables

18
server/documents/modules/modal.html.eco

@ -20,14 +20,14 @@ themes : ['Default', 'Fixed-width']
<div class="ui basic modal">
<div class="header">
Change Your Homepage
Archive Old Messages
</div>
<div class="content">
<div class="image">
<i class="home icon"></i>
<i class="acrhive icon"></i>
</div>
<div class="description">
<p>Are you sure you want to change your homepage to <b>Poodle.com</b>?</p>
<p>Your inbox is getting full, would you like us to enable automatic archiving of old messages?</p>
</div>
</div>
<div class="actions">
@ -115,20 +115,20 @@ themes : ['Default', 'Fixed-width']
</div>
<div class="content">
<div class="ui medium image">
<img src="/images/demo/highres2.jpg">
<img src="/images/avatar/large/chris.jpg">
</div>
<div class="description">
<div class="ui header">Are you sure you want to upload that?</div>
<p>I mean it's not really the best profile photo.</p>
<p>It's resampled to like two times the size it's suppose to be. Our image detection software also says it might even be inappropriate.</p>
<div class="ui header">We've auto-chosen a profile image for you.</div>
<p>We've grabbed the following image from the <a href="https://www.gravatar.com" target="_blank">gravatar</a> image associated with your registered e-mail address.</p>
<p>Is it okay to use this photo?</p>
</div>
</div>
<div class="actions">
<div class="ui black button">
Cancel
Nope
</div>
<div class="ui positive right labeled icon button">
Add Photo
Yep, that's me
<i class="checkmark icon"></i>
</div>
</div>

BIN
server/files/images/avatar/large/ade.jpg

Before After
Width: 650  |  Height: 650  |  Size: 147 KiB

BIN
server/files/images/avatar/large/chris.jpg

Before After
Width: 650  |  Height: 650  |  Size: 118 KiB

BIN
server/files/images/avatar/large/jenny.jpg

Before After
Width: 650  |  Height: 650  |  Size: 125 KiB Width: 650  |  Height: 650  |  Size: 114 KiB

BIN
server/files/images/avatar/large/laura.jpg

Before After
Width: 650  |  Height: 650  |  Size: 119 KiB

BIN
server/files/images/avatar/large/nan.jpg

Before After
Width: 650  |  Height: 650  |  Size: 120 KiB

BIN
server/files/images/avatar/large/nom.jpg

Before After
Width: 650  |  Height: 650  |  Size: 143 KiB

BIN
server/files/images/avatar/large/zoe.jpg

Before After
Width: 650  |  Height: 650  |  Size: 125 KiB

BIN
server/files/images/avatar/small/ade.jpg

Before After
Width: 50  |  Height: 50  |  Size: 35 KiB

BIN
server/files/images/avatar/small/chris.jpg

Before After
Width: 50  |  Height: 50  |  Size: 34 KiB

BIN
server/files/images/avatar/small/jenny.jpg

Before After
Width: 50  |  Height: 50  |  Size: 34 KiB Width: 50  |  Height: 50  |  Size: 34 KiB

BIN
server/files/images/avatar/small/laura.jpg

Before After
Width: 50  |  Height: 50  |  Size: 34 KiB

BIN
server/files/images/avatar/small/nan.jpg

Before After
Width: 50  |  Height: 50  |  Size: 35 KiB

BIN
server/files/images/avatar/small/nom.jpg

Before After
Width: 50  |  Height: 50  |  Size: 36 KiB

BIN
server/files/images/avatar/small/zoe.jpg

Before After
Width: 50  |  Height: 50  |  Size: 34 KiB

4
src/definitions/elements/button.less

@ -1197,7 +1197,7 @@
.ui.inverted.black.button:active {
box-shadow: 0px 0px 0px @invertedBorderSize @lightBlackDown inset !important;
background-color: @lightBlackDown;
color: @black;
color: @white;
}
/* Inverted Basic */
@ -1218,7 +1218,7 @@
.ui.inverted.black.buttons .basic.button:active,
.ui.inverted.black.basic.button:active {
box-shadow: 0px 0px 0px @invertedBorderSize @lightBlackDown inset !important;
color: @lightBlackDown !important;
color: @white !important;
}

4
src/definitions/modules/modal.less

@ -120,12 +120,13 @@
.ui.modal > .content > .description {
display: table-cell;
vertical-align: top;
min-width: @descriptionMinWidth;
vertical-align: @descriptionVerticalAlign;
}
.ui.modal > .content > .icon + .description,
.ui.modal > .content > .image + .description {
min-width: @descriptionMinWidth;
width: @descriptionWidth;
padding-left: @descriptionDistance;
}
@ -134,6 +135,7 @@
font-size: @imageIconSize;
margin: 0em;
opacity: 1;
width: auto;
}
/*--------------

5
src/themes/packages/default/elements/button.variables

@ -25,7 +25,6 @@
@backgroundColor: #FAFAFA;
@backgroundImage: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.09));
@boxShadow:
@subtleShadow,
0px 0px 0px 1px @borderColor inset,
@shadowBoxShadow
;
@ -60,7 +59,7 @@
Group
--------------------*/
@groupBoxShadow: @subtleShadow;
@groupBoxShadow: none;
@groupButtonBoxShadow:
0px 0px 0px 1px @borderColor inset,
@shadowBoxShadow
@ -215,7 +214,7 @@
--------------------*/
/* Colors */
@coloredBackgroundImage: linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.1));
@coloredBackgroundImage: none;
@coloredBoxShadow: @shadowBoxShadow;
/* Compact */

240
src/themes/packages/default/globals/site.variables

@ -344,52 +344,52 @@
--------------------*/
/*--- Colors ---*/
@primaryColorHover : lighten( @primaryColor, 7);
@secondaryColorHover : lighten( @secondaryColor, 7);
@blueHover : lighten( @blue, 7);
@greenHover : lighten( @green, 7);
@orangeHover : lighten( @orange, 7);
@pinkHover : lighten( @pink, 7);
@purpleHover : lighten( @purple, 7);
@redHover : lighten( @red, 7);
@tealHover : lighten( @teal, 7);
@yellowHover : lighten( @yellow, 7);
@lightBlueHover : lighten( @lightBlue, 7);
@lightGreenHover : lighten( @lightGreen, 7);
@lightOrangeHover : lighten( @lightOrange, 7);
@lightPinkHover : lighten( @lightPink, 7);
@lightPurpleHover : lighten( @lightPurple, 7);
@lightRedHover : lighten( @lightRed, 7);
@lightTealHover : lighten( @lightTeal, 7);
@lightYellowHover : lighten( @lightYellow, 7);
@primaryColorHover : lighten( @primaryColor, 10);
@secondaryColorHover : lighten( @secondaryColor, 10);
@blueHover : lighten( @blue, 10);
@greenHover : lighten( @green, 10);
@orangeHover : lighten( @orange, 10);
@pinkHover : lighten( @pink, 10);
@purpleHover : lighten( @purple, 10);
@redHover : lighten( @red, 10);
@tealHover : lighten( @teal, 10);
@yellowHover : lighten( @yellow, 10);
@lightBlueHover : lighten( @lightBlue, 10);
@lightGreenHover : lighten( @lightGreen, 10);
@lightOrangeHover : lighten( @lightOrange, 10);
@lightPinkHover : lighten( @lightPink, 10);
@lightPurpleHover : lighten( @lightPurple, 10);
@lightRedHover : lighten( @lightRed, 10);
@lightTealHover : lighten( @lightTeal, 10);
@lightYellowHover : lighten( @lightYellow, 10);
/*--- Emotive ---*/
@positiveColorHover : lighten( @positiveColor, 7);
@negativeColorHover : lighten( @negativeColor, 7);
@positiveColorHover : lighten( @positiveColor, 10);
@negativeColorHover : lighten( @negativeColor, 10);
/*--- Neutrals ---*/
@fullBlackHover : lighten( @fullBlack, 7);
@blackHover : lighten( @black, 7);
@lightBlackHover : lighten( @lightBlack, 7);
@fullBlackHover : lighten( @fullBlack, 10);
@blackHover : lighten( @black, 10);
@lightBlackHover : lighten( @lightBlack, 10);
@lightGreyHover : lighten( @lightGrey, 7);
@greyHover : lighten( @grey, 7);
@darkGreyHover : lighten( @darkGrey, 7);
@lightGreyHover : lighten( @lightGrey, 10);
@greyHover : lighten( @grey, 10);
@darkGreyHover : lighten( @darkGrey, 10);
@whiteHover : lighten( @white, 7);
@offWhiteHover : lighten( @offWhite, 7);
@darkWhiteHover : lighten( @darkWhite, 7);
@whiteHover : lighten( @white, 10);
@offWhiteHover : lighten( @offWhite, 10);
@darkWhiteHover : lighten( @darkWhite, 10);
@facebookHoverColor : lighten( @facebookColor, 7);
@twitterHoverColor : lighten( @twitterColor, 7);
@googlePlusHoverColor : lighten( @googlePlusColor, 7);
@linkedInHoverColor : lighten( @linkedInColor, 7);
@youtubeHoverColor : lighten( @youtubeColor, 7);
@instagramHoverColor : lighten( @instagramColor, 7);
@pinterestHoverColor : lighten( @pinterestColor, 7);
@vkHoverColor : lighten( @vkColor, 7);
@facebookHoverColor : lighten( @facebookColor, 10);
@twitterHoverColor : lighten( @twitterColor, 10);
@googlePlusHoverColor : lighten( @googlePlusColor, 10);
@linkedInHoverColor : lighten( @linkedInColor, 10);
@youtubeHoverColor : lighten( @youtubeColor, 10);
@instagramHoverColor : lighten( @instagramColor, 10);
@pinterestHoverColor : lighten( @pinterestColor, 10);
@vkHoverColor : lighten( @vkColor, 10);
/*-------------------
@ -398,52 +398,52 @@
/*--- Colors ---*/
@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);
@primaryColorDown : darken(@primaryColor, 10);
@secondaryColorDown : darken(@secondaryColor, 10);
@blueDown : darken(@blue, 10);
@greenDown : darken(@green, 10);
@orangeDown : darken(@orange, 10);
@pinkDown : darken(@pink, 10);
@purpleDown : darken(@purple, 10);
@redDown : darken(@red, 10);
@tealDown : darken(@teal, 10);
@yellowDown : darken(@yellow, 10);
@lightBlueDown : darken(@lightBlue, 10);
@lightGreenDown : darken(@lightGreen, 10);
@lightOrangeDown : darken(@lightOrange, 10);
@lightPinkDown : darken(@lightPink, 10);
@lightPurpleDown : darken(@lightPurple, 10);
@lightRedDown : darken(@lightRed, 10);
@lightTealDown : darken(@lightTeal, 10);
@lightYellowDown : darken(@lightYellow, 10);
/*--- Emotive ---*/
@positiveColorDown : darken(@positiveColor, 7);
@negativeColorDown : darken(@negativeColor, 7);
@positiveColorDown : darken(@positiveColor, 10);
@negativeColorDown : darken(@negativeColor, 10);
/*--- Neutrals ---*/
@fullBlackDown : darken(@fullBlack, 7);
@blackDown : darken(@black, 7);
@lightBlackDown : darken(@lightBlack, 7);
@fullBlackDown : darken(@fullBlack, 10);
@blackDown : darken(@black, 10);
@lightBlackDown : darken(@lightBlack, 10);
@lightGreyDown : darken(@lightGrey, 7);
@greyDown : darken(@grey, 7);
@darkGreyDown : darken(@darkGrey, 7);
@lightGreyDown : darken(@lightGrey, 10);
@greyDown : darken(@grey, 10);
@darkGreyDown : darken(@darkGrey, 10);
@whiteDown : darken(@white, 7);
@offWhiteDown : darken(@offWhite, 7);
@darkWhiteDown : darken(@darkWhite, 7);
@whiteDown : darken(@white, 10);
@offWhiteDown : darken(@offWhite, 10);
@darkWhiteDown : darken(@darkWhite, 10);
@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);
@facebookDownColor : darken(@facebookColor, 10);
@twitterDownColor : darken(@twitterColor, 10);
@googlePlusDownColor : darken(@googlePlusColor, 10);
@linkedInDownColor : darken(@linkedInColor, 10);
@youtubeDownColor : darken(@youtubeColor, 10);
@instagramDownColor : darken(@instagramColor, 10);
@pinterestDownColor : darken(@pinterestColor, 10);
@vkDownColor : darken(@vkColor, 10);
/*-------------------
@ -451,50 +451,50 @@
--------------------*/
/*--- Standard ---*/
@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);
@primaryColorActive : darken(@primaryColor, 7);
@secondaryColorActive : darken(@secondaryColor, 7);
@blueActive : darken(@blue, 7);
@greenActive : darken(@green, 7);
@orangeActive : darken(@orange, 7);
@pinkActive : darken(@pink, 7);
@purpleActive : darken(@purple, 7);
@redActive : darken(@red, 7);
@tealActive : darken(@teal, 7);
@yellowActive : darken(@yellow, 7);
@lightBlueActive : darken(@lightBlue, 7);
@lightGreenActive : darken(@lightGreen, 7);
@lightOrangeActive : darken(@lightOrange, 7);
@lightPinkActive : darken(@lightPink, 7);
@lightPurpleActive : darken(@lightPurple, 7);
@lightRedActive : darken(@lightRed, 7);
@lightTealActive : darken(@lightTeal, 7);
@lightYellowActive : darken(@lightYellow, 7);
/*--- Emotive ---*/
@positiveColorActive : darken(@positiveColor, 5);
@negativeColorActive : darken(@negativeColor, 5);
@positiveColorActive : darken(@positiveColor, 7);
@negativeColorActive : darken(@negativeColor, 7);
/*--- Neutrals ---*/
@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);
@fullBlackActive : darken(@fullBlack, 7);
@blackActive : darken(@black, 7);
@lightBlackActive : darken(@lightBlack, 7);
@lightGreyActive : darken(@lightGrey, 7);
@greyActive : darken(@grey, 7);
@darkGreyActive : darken(@darkGrey, 7);
@whiteActive : darken(@white, 7);
@offWhiteActive : darken(@offWhite, 7);
@darkWhiteActive : darken(@darkWhite, 7);
@facebookActiveColor : darken(@facebookColor, 7);
@twitterActiveColor : darken(@twitterColor, 7);
@googlePlusActiveColor : darken(@googlePlusColor, 7);
@linkedInActiveColor : darken(@linkedInColor, 7);
@youtubeActiveColor : darken(@youtubeColor, 7);
@instagramActiveColor : darken(@instagramColor, 7);
@pinterestActiveColor : darken(@pinterestColor, 7);
@vkActiveColor : darken(@vkColor, 7);

3
src/themes/packages/default/modules/modal.variables

@ -42,8 +42,9 @@
@imageIconSize: 8rem;
@imageVerticalAlign: top;
@descriptionDistance: 1em;
@descriptionDistance: 2em;
@descriptionMinWidth: '';
@descriptionWidth: 80%;
@descriptionVerticalAlign: top;
/* Modal Actions */

Loading…
Cancel
Save