Skip to content

Commit

Permalink
Item12192: update with jqbutton styles simple, red, cyan, green
Browse files Browse the repository at this point in the history 
git-svn-id: http://svn.foswiki.org/branches/Release01x01@15747 0b4bb1d4-4e5a-0410-9cc4-b2b747904278
  • Loading branch information
ArthurClemens authored and ArthurClemens committed Oct 27, 2012
1 parent d36eeb6 commit f5f6378
Show file tree
Hide file tree
Showing 3 changed files with 863 additions and 584 deletions.
40 changes: 39 additions & 1 deletion PatternSkin/data/System/PatternSkinElements.txt
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
%META:TOPICINFO{author="ProjectContributor" date="1351103142" format="1.1" version="1"}%
%META:TOPICINFO{author="ProjectContributor" date="1351352095" format="1.1" version="1"}%
%META:TOPICPARENT{name="PatternSkin"}%
---+!! Pattern Skin Elements
Some intro text.
Expand Down Expand Up @@ -411,6 +411,37 @@ disabled: <button class='foswikiButtonCancel foswikiButtonDisabled'>foswikiButto
---++ JQuery buttons
Using =%<nop>BUTTON{}%=

* Example: <verbatim class="tml">%BUTTON{
"%MAKETEXT{"Submit"}%"
click="confirm('Are your sure?')"
}%
%BUTTON{
"%MAKETEXT{"Cancel"}%"
icon="cross"
target="%WEB%.%TOPIC%"
}% %CLEAR%</verbatim>
* Expands as: <div>%BUTTON{
"%MAKETEXT{"Submit"}%"
click="confirm('Are your sure?')"
}%
%BUTTON{
"%MAKETEXT{"Cancel"}%"
icon="cross"
target="%WEB%.%TOPIC%"
}% %CLEAR%</div>

=%<nop>BUTTON{class="simple"}%= %BR%
%BUTTON{"Simple button" class="simple"}%

=%<nop>BUTTON{class="cyan"}%= %BR%
%BUTTON{"Simple button" class="cyan"}%

=%<nop>BUTTON{class="red"}%= %BR%
%BUTTON{"Simple button" class="red"}%

=%<nop>BUTTON{class="green"}%= %BR%
%BUTTON{"Simple button" class="green"}%

%BUTTON{"%MAKETEXT{"OK"}%" icon="tick" onclick="alert($(this).text());"}%
%BUTTON{"%MAKETEXT{"Cancel"}%" icon="cross" onclick="alert($(this).text());"}%
%BUTTON{"%MAKETEXT{"Info"}%" icon="information" onclick="alert($(this).text());"}%
Expand All @@ -428,6 +459,13 @@ Using =%<nop>BUTTON{}%=

<a class='foswikiButton' href='#'><span> <span class='foswikiButtonIcon' style='background-image:url(%ICONURLPATH{"choice-yes"}%)'>OK</span> </span></a>

---++ Nat Edit buttons

<noautolink>
<div class="natEditBottomBar">
<ul><li class="natEditSaveButton"><a id="save" class="jqButton jqButtonDefault jqInitedButton" href="#" accesskey="s" title="Save and exit"><span> <span class="jqButtonIcon" style="background-image:url(/pub/System/FamFamFamSilkIcons/tick.png)">Save</span> </span></a></li><li class="natEditCheckpointButton"><a id="checkpoint" class="jqButton jqButtonDefault jqInitedButton" href="#" accesskey="w" title="Save and continue editing"><span> <span class="jqButtonIcon" style="background-image:url(/pub/System/FamFamFamSilkIcons/disk.png)">Save and Continue</span> </span></a></li><li class="natEditPreviewButton"><a id="preview" class="jqButton jqButtonDefault jqInitedButton" href="#" accesskey="p" title="Preview your changes"><span> <span class="jqButtonIcon" style="background-image:url(/pub/System/FamFamFamSilkIcons/eye.png)">Preview</span> </span></a></li><li class="natEditFormButton"><a id="replaceform" class="jqButton jqButtonDefault jqInitedButton" href="#" accesskey="f" title="Change the current form of Sandbox.FoswikiFormStepsTest"><span> <span class="jqButtonIcon" style="background-image:url(/pub/System/FamFamFamSilkIcons/application_form.png)">Change form</span> </span></a></li><li class="natEditCancelButton"><a id="cancel" class="jqButton jqButtonDefault jqInitedButton" href="/Sandbox/FoswikiFormStepsTest?release_lock=1" accesskey="c" title="Abandon changes and exit"><span> <span class="jqButtonIcon" style="background-image:url(/pub/System/FamFamFamSilkIcons/cross.png)">Cancel</span> </span></a> </li></ul>
</div>
</noautolink>

---++ Form steps
=.foswikiFormSteps= and =.foswikiFormStep=
Expand Down
315 changes: 0 additions & 315 deletions PatternSkin/pub/System/PatternSkinTheme/colors_src.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -645,321 +645,6 @@ li.patternLogIn {
margin-right:3px;
}

/*
* BUTTONS
*/
.foswikiButton,
.jqButton,
a.jqButton,
.foswikiButtonSmall,
.foswikiButtonLarge,
.foswikiButtonMini,
.foswikiButton:link,
.jqButton:link,
a.jqButton:link,
.foswikiButtonSmall:link,
.foswikiButtonLarge:link,
.foswikiButtonMini:link,
.foswikiButton:visited,
.jqButton:visited,
a.jqButton:visited,
.foswikiButtonSmall:visited,
.foswikiButtonLarge:visited,
.foswikiButtonMini:visited {
color: #555555;
background-color: #f6f6f6;
background-image: -moz-linear-gradient(top, #fbfbfb, #eeeeee);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbfbfb), to(#eeeeee));
background-image: -webkit-linear-gradient(top, #fbfbfb, #eeeeee);
background-image: -o-linear-gradient(top, #fbfbfb, #eeeeee);
background-image: linear-gradient(to bottom, #fbfbfb, #eeeeee);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbfbfb', endColorstr='#ffeeeeee', GradientType=0);
border-color: #eeeeee #eeeeee #c8c8c8;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
*background-color: #eeeeee;
/* Darken IE7 buttons by default so they stand out more given they won't have borders */

filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
border: 1px solid #e1e1e1;
}
.foswikiButton .foswikiIcon,
.jqButton .foswikiIcon,
a.jqButton .foswikiIcon,
.foswikiButtonSmall .foswikiIcon,
.foswikiButtonLarge .foswikiIcon,
.foswikiButtonMini .foswikiIcon,
.foswikiButton:link .foswikiIcon,
.jqButton:link .foswikiIcon,
a.jqButton:link .foswikiIcon,
.foswikiButtonSmall:link .foswikiIcon,
.foswikiButtonLarge:link .foswikiIcon,
.foswikiButtonMini:link .foswikiIcon,
.foswikiButton:visited .foswikiIcon,
.jqButton:visited .foswikiIcon,
a.jqButton:visited .foswikiIcon,
.foswikiButtonSmall:visited .foswikiIcon,
.foswikiButtonLarge:visited .foswikiIcon,
.foswikiButtonMini:visited .foswikiIcon {
color: #555555;
}
.foswikiButton .foswikiCaret,
.jqButton .foswikiCaret,
a.jqButton .foswikiCaret,
.foswikiButtonSmall .foswikiCaret,
.foswikiButtonLarge .foswikiCaret,
.foswikiButtonMini .foswikiCaret,
.foswikiButton:link .foswikiCaret,
.jqButton:link .foswikiCaret,
a.jqButton:link .foswikiCaret,
.foswikiButtonSmall:link .foswikiCaret,
.foswikiButtonLarge:link .foswikiCaret,
.foswikiButtonMini:link .foswikiCaret,
.foswikiButton:visited .foswikiCaret,
.jqButton:visited .foswikiCaret,
a.jqButton:visited .foswikiCaret,
.foswikiButtonSmall:visited .foswikiCaret,
.foswikiButtonLarge:visited .foswikiCaret,
.foswikiButtonMini:visited .foswikiCaret {
border-top-color: rgba(85, 85, 85, 0.4);
}
.foswikiButton:hover,
.jqButton:hover,
a.jqButton:hover,
.foswikiButtonSmall:hover,
.foswikiButtonLarge:hover,
.foswikiButtonMini:hover,
.foswikiButton.foswikiActive,
.jqButton.foswikiActive,
a.jqButton.foswikiActive,
.foswikiButtonSmall.foswikiActive,
.foswikiButtonLarge.foswikiActive,
.foswikiButtonMini.foswikiActive,
.foswikiButton > .foswikiRequiresChangePermission a:hover,
.jqButton > .foswikiRequiresChangePermission a:hover,
a.jqButton > .foswikiRequiresChangePermission a:hover,
.foswikiButtonSmall > .foswikiRequiresChangePermission a:hover,
.foswikiButtonLarge > .foswikiRequiresChangePermission a:hover,
.foswikiButtonMini > .foswikiRequiresChangePermission a:hover {
color: #4d4d4d;
background-color: #eeeeee;
background-image: -moz-linear-gradient(top, #f3f3f3, #e6e6e6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f3f3f3), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #f3f3f3, #e6e6e6);
background-image: -o-linear-gradient(top, #f3f3f3, #e6e6e6);
background-image: linear-gradient(to bottom, #f3f3f3, #e6e6e6);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff3f3f3', endColorstr='#ffe6e6e6', GradientType=0);
border-color: #e6e6e6 #e6e6e6 #c0c0c0;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
*background-color: #e6e6e6;
/* Darken IE7 buttons by default so they stand out more given they won't have borders */

filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
border: 1px solid #dadada;
}
.foswikiButton:hover .foswikiIcon,
.jqButton:hover .foswikiIcon,
a.jqButton:hover .foswikiIcon,
.foswikiButtonSmall:hover .foswikiIcon,
.foswikiButtonLarge:hover .foswikiIcon,
.foswikiButtonMini:hover .foswikiIcon,
.foswikiButton.foswikiActive .foswikiIcon,
.jqButton.foswikiActive .foswikiIcon,
a.jqButton.foswikiActive .foswikiIcon,
.foswikiButtonSmall.foswikiActive .foswikiIcon,
.foswikiButtonLarge.foswikiActive .foswikiIcon,
.foswikiButtonMini.foswikiActive .foswikiIcon,
.foswikiButton > .foswikiRequiresChangePermission a:hover .foswikiIcon,
.jqButton > .foswikiRequiresChangePermission a:hover .foswikiIcon,
a.jqButton > .foswikiRequiresChangePermission a:hover .foswikiIcon,
.foswikiButtonSmall > .foswikiRequiresChangePermission a:hover .foswikiIcon,
.foswikiButtonLarge > .foswikiRequiresChangePermission a:hover .foswikiIcon,
.foswikiButtonMini > .foswikiRequiresChangePermission a:hover .foswikiIcon {
color: #4d4d4d;
}
.foswikiButton:hover .foswikiCaret,
.jqButton:hover .foswikiCaret,
a.jqButton:hover .foswikiCaret,
.foswikiButtonSmall:hover .foswikiCaret,
.foswikiButtonLarge:hover .foswikiCaret,
.foswikiButtonMini:hover .foswikiCaret,
.foswikiButton.foswikiActive .foswikiCaret,
.jqButton.foswikiActive .foswikiCaret,
a.jqButton.foswikiActive .foswikiCaret,
.foswikiButtonSmall.foswikiActive .foswikiCaret,
.foswikiButtonLarge.foswikiActive .foswikiCaret,
.foswikiButtonMini.foswikiActive .foswikiCaret,
.foswikiButton > .foswikiRequiresChangePermission a:hover .foswikiCaret,
.jqButton > .foswikiRequiresChangePermission a:hover .foswikiCaret,
a.jqButton > .foswikiRequiresChangePermission a:hover .foswikiCaret,
.foswikiButtonSmall > .foswikiRequiresChangePermission a:hover .foswikiCaret,
.foswikiButtonLarge > .foswikiRequiresChangePermission a:hover .foswikiCaret,
.foswikiButtonMini > .foswikiRequiresChangePermission a:hover .foswikiCaret {
border-top-color: rgba(77, 77, 77, 0.4);
}
.foswikiSubmit,
.foswikiSubmit:link,
.foswikiSubmit:visited {
color: #fff;
background-color: #50aace;
background-image: -moz-linear-gradient(top, #58aed1, #44a4cb);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#58aed1), to(#44a4cb));
background-image: -webkit-linear-gradient(top, #58aed1, #44a4cb);
background-image: -o-linear-gradient(top, #58aed1, #44a4cb);
background-image: linear-gradient(to bottom, #58aed1, #44a4cb);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff58aed1', endColorstr='#ff44a4cb', GradientType=0);
border-color: #44a4cb #44a4cb #2a7898;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
*background-color: #44a4cb;
/* Darken IE7 buttons by default so they stand out more given they won't have borders */

filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
border: 1px solid #3598c0;
}
.foswikiSubmit .foswikiIcon,
.foswikiSubmit:link .foswikiIcon,
.foswikiSubmit:visited .foswikiIcon {
color: #fff;
}
.foswikiSubmit .foswikiCaret,
.foswikiSubmit:link .foswikiCaret,
.foswikiSubmit:visited .foswikiCaret {
border-top-color: rgba(255, 255, 255, 0.4);
}
.foswikiSubmit:hover,
.foswikiSubmit:active {
color: #fff;
background-color: #44a4cb;
background-image: -moz-linear-gradient(top, #4ca8cd, #389ec8);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4ca8cd), to(#389ec8));
background-image: -webkit-linear-gradient(top, #4ca8cd, #389ec8);
background-image: -o-linear-gradient(top, #4ca8cd, #389ec8);
background-image: linear-gradient(to bottom, #4ca8cd, #389ec8);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff4ca8cd', endColorstr='#ff389ec8', GradientType=0);
border-color: #389ec8 #389ec8 #276f8c;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
*background-color: #389ec8;
/* Darken IE7 buttons by default so they stand out more given they won't have borders */

filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
border: 1px solid #328fb4;
text-decoration: none;
}
.foswikiSubmit:hover .foswikiIcon,
.foswikiSubmit:active .foswikiIcon {
color: #fff;
}
.foswikiSubmit:hover .foswikiCaret,
.foswikiSubmit:active .foswikiCaret {
border-top-color: rgba(255, 255, 255, 0.4);
}
.foswikiButtonCancel,
a.jqButton.foswikiButtonCancel,
.jqButton.foswikiButtonCancel,
.foswikiButtonCancel:link,
a.jqButton.foswikiButtonCancel:link,
.jqButton.foswikiButtonCancel:link,
.foswikiButtonCancel:visited,
a.jqButton.foswikiButtonCancel:visited,
.jqButton.foswikiButtonCancel:visited {
color: #fff;
background-color: #db6b44;
background-image: -moz-linear-gradient(top, #dd724c, #d96137);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#dd724c), to(#d96137));
background-image: -webkit-linear-gradient(top, #dd724c, #d96137);
background-image: -o-linear-gradient(top, #dd724c, #d96137);
background-image: linear-gradient(to bottom, #dd724c, #d96137);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdd724c', endColorstr='#ffd96137', GradientType=0);
border-color: #d96137 #d96137 #a4421f;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
*background-color: #d96137;
/* Darken IE7 buttons by default so they stand out more given they won't have borders */

filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
border: 1px solid #cf5327;
}
.foswikiButtonCancel .foswikiIcon,
a.jqButton.foswikiButtonCancel .foswikiIcon,
.jqButton.foswikiButtonCancel .foswikiIcon,
.foswikiButtonCancel:link .foswikiIcon,
a.jqButton.foswikiButtonCancel:link .foswikiIcon,
.jqButton.foswikiButtonCancel:link .foswikiIcon,
.foswikiButtonCancel:visited .foswikiIcon,
a.jqButton.foswikiButtonCancel:visited .foswikiIcon,
.jqButton.foswikiButtonCancel:visited .foswikiIcon {
color: #fff;
}
.foswikiButtonCancel .foswikiCaret,
a.jqButton.foswikiButtonCancel .foswikiCaret,
.jqButton.foswikiButtonCancel .foswikiCaret,
.foswikiButtonCancel:link .foswikiCaret,
a.jqButton.foswikiButtonCancel:link .foswikiCaret,
.jqButton.foswikiButtonCancel:link .foswikiCaret,
.foswikiButtonCancel:visited .foswikiCaret,
a.jqButton.foswikiButtonCancel:visited .foswikiCaret,
.jqButton.foswikiButtonCancel:visited .foswikiCaret {
border-top-color: rgba(255, 255, 255, 0.4);
}
.foswikiButtonCancel:hover,
a.jqButton.foswikiButtonCancel:hover,
.jqButton.foswikiButtonCancel:hover,
.foswikiButtonCancel:active,
a.jqButton.foswikiButtonCancel:active,
.jqButton.foswikiButtonCancel:active {
color: #fff;
background-color: #d96137;
background-image: -moz-linear-gradient(top, #db6840, #d7572a);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#db6840), to(#d7572a));
background-image: -webkit-linear-gradient(top, #db6840, #d7572a);
background-image: -o-linear-gradient(top, #db6840, #d7572a);
background-image: linear-gradient(to bottom, #db6840, #d7572a);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdb6840', endColorstr='#ffd7572a', GradientType=0);
border-color: #d7572a #d7572a #973d1d;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
*background-color: #d7572a;
/* Darken IE7 buttons by default so they stand out more given they won't have borders */

filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
border: 1px solid #c24e25;
text-decoration: none;
}
.foswikiButtonCancel:hover .foswikiIcon,
a.jqButton.foswikiButtonCancel:hover .foswikiIcon,
.jqButton.foswikiButtonCancel:hover .foswikiIcon,
.foswikiButtonCancel:active .foswikiIcon,
a.jqButton.foswikiButtonCancel:active .foswikiIcon,
.jqButton.foswikiButtonCancel:active .foswikiIcon {
color: #fff;
}
.foswikiButtonCancel:hover .foswikiCaret,
a.jqButton.foswikiButtonCancel:hover .foswikiCaret,
.jqButton.foswikiButtonCancel:hover .foswikiCaret,
.foswikiButtonCancel:active .foswikiCaret,
a.jqButton.foswikiButtonCancel:active .foswikiCaret,
.jqButton.foswikiButtonCancel:active .foswikiCaret {
border-top-color: rgba(255, 255, 255, 0.4);
}
.foswikiButtonDisabled,
.foswikiSubmitDisabled,
.foswikiButtonDisabled:link,
.foswikiSubmitDisabled:link,
.foswikiButtonDisabled:visited,
.foswikiSubmitDisabled:visited,
.foswikiButtonDisabled:hover,
.foswikiSubmitDisabled:hover {
color: #ddd;
background: #fafafa;
border: 1px solid #f0f0f0;
}
.foswikiCaret {
border-top-color: #555555;
}

/* PATTERNTOOLBAR */

.patternToolBar > a:link,
Expand Down
Loading

0 comments on commit f5f6378

Please sign in to comment.