Changeset 93704 in spip-zone


Ignore:
Timestamp:
Dec 15, 2015, 12:58:17 PM (5 years ago)
Author:
cedric@…
Message:

meilleur compat avec les themes BS2 : on ajoute les mixins BS2 dans la feuille de translation, et un fichier responsive.less dans BS en plus

Location:
_plugins_/bootstrap/trunk
Files:
1 added
3 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/bootstrap/trunk/bootstrap2spip/css/responsive.less

    r92812 r93704  
    33 */
    44
    5 @import "css/variables.less";
    65@import "css/spip.variables.less";
    76@import "css/sprites.less";
  • _plugins_/bootstrap/trunk/bootstrap2spip/css/variables-translatebs2.less

    r93696 r93704  
    871871
    872872
     873//
     874// BS2 Mixins
     875// --------------------------------------------------
     876
     877// Webkit-style focus
     878// ------------------
     879.tab-focus() {
     880  // Default
     881  outline: thin dotted #333;
     882  // Webkit
     883  outline: 5px auto -webkit-focus-ring-color;
     884  outline-offset: -2px;
     885}
     886
     887// Center-align a block level element
     888// ----------------------------------
     889.center-block() {
     890  display: block;
     891  margin-left: auto;
     892  margin-right: auto;
     893}
     894
     895// IE7 inline-block
     896// ----------------
     897.ie7-inline-block() {
     898  *display: inline; /* IE7 inline-block hack */
     899  *zoom: 1;
     900}
     901
     902// IE7 likes to collapse whitespace on either side of the inline-block elements.
     903// Ems because we're attempting to match the width of a space character. Left
     904// version is for form buttons, which typically come after other elements, and
     905// right version is for icons, which come before. Applying both is ok, but it will
     906// mean that space between those elements will be .6em (~2 space characters) in IE7,
     907// instead of the 1 space in other browsers.
     908.ie7-restore-left-whitespace() {
     909  *margin-left: .3em;
     910
     911  &:first-child {
     912    *margin-left: 0;
     913  }
     914}
     915
     916.ie7-restore-right-whitespace() {
     917  *margin-right: .3em;
     918}
     919
     920// Sizing shortcuts
     921// -------------------------
     922.size(@height, @width) {
     923  width: @width;
     924  height: @height;
     925}
     926.square(@size) {
     927  .size(@size, @size);
     928}
     929
     930// Placeholder text
     931// -------------------------
     932.placeholder(@color: @placeholderText) {
     933  &:-moz-placeholder {
     934    color: @color;
     935  }
     936  &:-ms-input-placeholder {
     937    color: @color;
     938  }
     939  &::-webkit-input-placeholder {
     940    color: @color;
     941  }
     942}
     943
     944// FONTS
     945// --------------------------------------------------
     946
     947#font {
     948  #family {
     949    .serif() {
     950      font-family: @serifFontFamily;
     951    }
     952    .sans-serif() {
     953      font-family: @sansFontFamily;
     954    }
     955    .monospace() {
     956      font-family: @monoFontFamily;
     957    }
     958  }
     959  .shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
     960    font-size: @size;
     961    font-weight: @weight;
     962    line-height: @lineHeight;
     963  }
     964  .serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
     965    #font > #family > .serif;
     966    #font > .shorthand(@size, @weight, @lineHeight);
     967  }
     968  .sans-serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
     969    #font > #family > .sans-serif;
     970    #font > .shorthand(@size, @weight, @lineHeight);
     971  }
     972  .monospace(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
     973    #font > #family > .monospace;
     974    #font > .shorthand(@size, @weight, @lineHeight);
     975  }
     976}
     977
     978
     979// FORMS
     980// --------------------------------------------------
     981
     982// Block level inputs
     983.input-block-level {
     984  display: block;
     985  width: 100%;
     986  min-height: @inputHeight; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
     987  .box-sizing(border-box); // Makes inputs behave like true block-level elements
     988}
     989
     990
     991
     992// Mixin for form field states
     993.formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
     994  // Set the text color
     995  .control-label,
     996  .help-block,
     997  .help-inline {
     998    color: @textColor;
     999  }
     1000  // Style inputs accordingly
     1001  .checkbox,
     1002  .radio,
     1003  input,
     1004  select,
     1005  textarea {
     1006    color: @textColor;
     1007  }
     1008  input,
     1009  select,
     1010  textarea {
     1011    border-color: @borderColor;
     1012    .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
     1013    &:focus {
     1014      border-color: darken(@borderColor, 10%);
     1015      @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@borderColor, 20%);
     1016      .box-shadow(@shadow);
     1017    }
     1018  }
     1019  // Give a small background color for input-prepend/-append
     1020  .input-prepend .add-on,
     1021  .input-append .add-on {
     1022    color: @textColor;
     1023    background-color: @backgroundColor;
     1024    border-color: @textColor;
     1025  }
     1026}
     1027
     1028
     1029
     1030// CSS3 PROPERTIES
     1031// --------------------------------------------------
     1032
     1033// Border Radius
     1034.border-radius(@radius) {
     1035  -webkit-border-radius: @radius;
     1036     -moz-border-radius: @radius;
     1037          border-radius: @radius;
     1038}
     1039
     1040// Single Corner Border Radius
     1041.border-top-left-radius(@radius) {
     1042  -webkit-border-top-left-radius: @radius;
     1043      -moz-border-radius-topleft: @radius;
     1044          border-top-left-radius: @radius;
     1045}
     1046.border-top-right-radius(@radius) {
     1047  -webkit-border-top-right-radius: @radius;
     1048      -moz-border-radius-topright: @radius;
     1049          border-top-right-radius: @radius;
     1050}
     1051.border-bottom-right-radius(@radius) {
     1052  -webkit-border-bottom-right-radius: @radius;
     1053      -moz-border-radius-bottomright: @radius;
     1054          border-bottom-right-radius: @radius;
     1055}
     1056.border-bottom-left-radius(@radius) {
     1057  -webkit-border-bottom-left-radius: @radius;
     1058      -moz-border-radius-bottomleft: @radius;
     1059          border-bottom-left-radius: @radius;
     1060}
     1061
     1062// Single Side Border Radius
     1063.border-top-radius(@radius) {
     1064  .border-top-right-radius(@radius);
     1065  .border-top-left-radius(@radius);
     1066}
     1067.border-right-radius(@radius) {
     1068  .border-top-right-radius(@radius);
     1069  .border-bottom-right-radius(@radius);
     1070}
     1071.border-bottom-radius(@radius) {
     1072  .border-bottom-right-radius(@radius);
     1073  .border-bottom-left-radius(@radius);
     1074}
     1075.border-left-radius(@radius) {
     1076  .border-top-left-radius(@radius);
     1077  .border-bottom-left-radius(@radius);
     1078}
     1079
     1080// Drop shadows
     1081.box-shadow(@shadow) {
     1082  -webkit-box-shadow: @shadow;
     1083     -moz-box-shadow: @shadow;
     1084          box-shadow: @shadow;
     1085}
     1086
     1087// Transitions
     1088.transition(@transition) {
     1089  -webkit-transition: @transition;
     1090     -moz-transition: @transition;
     1091       -o-transition: @transition;
     1092          transition: @transition;
     1093}
     1094.transition-delay(@transition-delay) {
     1095  -webkit-transition-delay: @transition-delay;
     1096     -moz-transition-delay: @transition-delay;
     1097       -o-transition-delay: @transition-delay;
     1098          transition-delay: @transition-delay;
     1099}
     1100.transition-duration(@transition-duration) {
     1101  -webkit-transition-duration: @transition-duration;
     1102     -moz-transition-duration: @transition-duration;
     1103       -o-transition-duration: @transition-duration;
     1104          transition-duration: @transition-duration;
     1105}
     1106
     1107// Transformations
     1108.rotate(@degrees) {
     1109  -webkit-transform: rotate(@degrees);
     1110     -moz-transform: rotate(@degrees);
     1111      -ms-transform: rotate(@degrees);
     1112       -o-transform: rotate(@degrees);
     1113          transform: rotate(@degrees);
     1114}
     1115.scale(@ratio) {
     1116  -webkit-transform: scale(@ratio);
     1117     -moz-transform: scale(@ratio);
     1118      -ms-transform: scale(@ratio);
     1119       -o-transform: scale(@ratio);
     1120          transform: scale(@ratio);
     1121}
     1122.translate(@x, @y) {
     1123  -webkit-transform: translate(@x, @y);
     1124     -moz-transform: translate(@x, @y);
     1125      -ms-transform: translate(@x, @y);
     1126       -o-transform: translate(@x, @y);
     1127          transform: translate(@x, @y);
     1128}
     1129.skew(@x, @y) {
     1130  -webkit-transform: skew(@x, @y);
     1131     -moz-transform: skew(@x, @y);
     1132      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twitter/bootstrap/issues/4885
     1133       -o-transform: skew(@x, @y);
     1134          transform: skew(@x, @y);
     1135  -webkit-backface-visibility: hidden; // See https://github.com/twitter/bootstrap/issues/5319
     1136}
     1137.translate3d(@x, @y, @z) {
     1138  -webkit-transform: translate3d(@x, @y, @z);
     1139     -moz-transform: translate3d(@x, @y, @z);
     1140       -o-transform: translate3d(@x, @y, @z);
     1141          transform: translate3d(@x, @y, @z);
     1142}
     1143
     1144// Backface visibility
     1145// Prevent browsers from flickering when using CSS 3D transforms.
     1146// Default value is `visible`, but can be changed to `hidden
     1147// See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
     1148.backface-visibility(@visibility){
     1149        -webkit-backface-visibility: @visibility;
     1150           -moz-backface-visibility: @visibility;
     1151                backface-visibility: @visibility;
     1152}
     1153
     1154// Background clipping
     1155// Heads up: FF 3.6 and under need "padding" instead of "padding-box"
     1156.background-clip(@clip) {
     1157  -webkit-background-clip: @clip;
     1158     -moz-background-clip: @clip;
     1159          background-clip: @clip;
     1160}
     1161
     1162// Background sizing
     1163.background-size(@size) {
     1164  -webkit-background-size: @size;
     1165     -moz-background-size: @size;
     1166       -o-background-size: @size;
     1167          background-size: @size;
     1168}
     1169
     1170
     1171// Box sizing
     1172.box-sizing(@boxmodel) {
     1173  -webkit-box-sizing: @boxmodel;
     1174     -moz-box-sizing: @boxmodel;
     1175          box-sizing: @boxmodel;
     1176}
     1177
     1178// User select
     1179// For selecting text on the page
     1180.user-select(@select) {
     1181  -webkit-user-select: @select;
     1182     -moz-user-select: @select;
     1183      -ms-user-select: @select;
     1184       -o-user-select: @select;
     1185          user-select: @select;
     1186}
     1187
     1188// Resize anything
     1189.resizable(@direction) {
     1190  resize: @direction; // Options: horizontal, vertical, both
     1191  overflow: auto; // Safari fix
     1192}
     1193
     1194// CSS3 Content Columns
     1195.content-columns(@columnCount, @columnGap: @gridGutterWidth) {
     1196  -webkit-column-count: @columnCount;
     1197     -moz-column-count: @columnCount;
     1198          column-count: @columnCount;
     1199  -webkit-column-gap: @columnGap;
     1200     -moz-column-gap: @columnGap;
     1201          column-gap: @columnGap;
     1202}
     1203
     1204// Optional hyphenation
     1205.hyphens(@mode: auto) {
     1206  word-wrap: break-word;
     1207  -webkit-hyphens: @mode;
     1208     -moz-hyphens: @mode;
     1209      -ms-hyphens: @mode;
     1210       -o-hyphens: @mode;
     1211          hyphens: @mode;
     1212}
     1213
     1214// Opacity
     1215.opacity(@opacity) {
     1216  opacity: @opacity / 100;
     1217  filter: ~"alpha(opacity=@{opacity})";
     1218}
     1219
     1220
     1221
     1222// BACKGROUNDS
     1223// --------------------------------------------------
     1224
     1225// Add an alphatransparency value to any background or border color (via Elyse Holladay)
     1226#translucent {
     1227  .background(@color: @white, @alpha: 1) {
     1228    background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
     1229  }
     1230  .border(@color: @white, @alpha: 1) {
     1231    border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
     1232    .background-clip(padding-box);
     1233  }
     1234}
     1235
     1236// Gradient Bar Colors for buttons and alerts
     1237.gradientBar(@primaryColor, @secondaryColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
     1238  color: @textColor;
     1239  text-shadow: @textShadow;
     1240  #gradient > .vertical(@primaryColor, @secondaryColor);
     1241  border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
     1242  border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
     1243}
     1244
     1245// Reset filters for IE
     1246.reset-filter() {
     1247  filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
     1248}
     1249
     1250
     1251
     1252// COMPONENT MIXINS
     1253// --------------------------------------------------
     1254
     1255// Horizontal dividers
     1256// -------------------------
     1257// Dividers (basically an hr) within dropdowns and nav lists
     1258.nav-divider(@top: #e5e5e5, @bottom: @white) {
     1259  // IE7 needs a set width since we gave a height. Restricting just
     1260  // to IE7 to keep the 1px left/right space in other browsers.
     1261  // It is unclear where IE is getting the extra space that we need
     1262  // to negative-margin away, but so it goes.
     1263  *width: 100%;
     1264  height: 1px;
     1265  margin: ((@baseLineHeight / 2) - 1) 1px; // 8px 1px
     1266  *margin: -5px 0 5px;
     1267  overflow: hidden;
     1268  background-color: @top;
     1269  border-bottom: 1px solid @bottom;
     1270}
     1271
     1272// Button backgrounds
     1273// ------------------
     1274.buttonBackground(@startColor, @endColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
     1275  // gradientBar will set the background to a pleasing blend of these, to support IE<=9
     1276  .gradientBar(@startColor, @endColor, @textColor, @textShadow);
     1277  *background-color: @endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
     1278  .reset-filter();
     1279
     1280  // in these cases the gradient won't cover the background, so we override
     1281  &:hover, &:focus, &:active, &.active, &.disabled, &[disabled] {
     1282    color: @textColor;
     1283    background-color: @endColor;
     1284    *background-color: darken(@endColor, 5%);
     1285  }
     1286
     1287  // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
     1288  &:active,
     1289  &.active {
     1290    background-color: darken(@endColor, 10%) e("\9");
     1291  }
     1292}
     1293
     1294// Navbar vertical align
     1295// -------------------------
     1296// Vertically center elements in the navbar.
     1297// Example: an element has a height of 30px, so write out `.navbarVerticalAlign(30px);` to calculate the appropriate top margin.
     1298.navbarVerticalAlign(@elementHeight) {
     1299  margin-top: (@navbarHeight - @elementHeight) / 2;
     1300}
     1301
     1302
    8731303
    8741304// The old Grid : N/A
  • _plugins_/bootstrap/trunk/paquet.xml

    r93696 r93704  
    22        prefix="bootstrap3"
    33        categorie="outil"
    4         version="3.0.3"
     4        version="3.0.4"
    55        etat="test"
    66        compatibilite="[3.0.2;3.1.*]"
Note: See TracChangeset for help on using the changeset viewer.