wp/wp-includes/css/buttons-rtl.css
changeset 7 cf61fcea0001
parent 5 5e2f62d02dcd
child 9 177826044cd9
equal deleted inserted replaced
6:490d5cc509ed 7:cf61fcea0001
     6 * jquery-ui-dialog.css
     6 * jquery-ui-dialog.css
     7 * editor.css
     7 * editor.css
     8 
     8 
     9 WordPress-style Buttons
     9 WordPress-style Buttons
    10 =======================
    10 =======================
    11 Create a button by adding the `.button` class to an element. For backwards
    11 Create a button by adding the `.button` class to an element. For backward
    12 compatibility, we support several other classes (such as `.button-secondary`),
    12 compatibility, we support several other classes (such as `.button-secondary`),
    13 but these will *not* work with the stackable classes described below.
    13 but these will *not* work with the stackable classes described below.
    14 
    14 
    15 Button Styles
    15 Button Styles
    16 -------------
    16 -------------
    52 	padding: 0 10px 1px;
    52 	padding: 0 10px 1px;
    53 	cursor: pointer;
    53 	cursor: pointer;
    54 	border-width: 1px;
    54 	border-width: 1px;
    55 	border-style: solid;
    55 	border-style: solid;
    56 	-webkit-appearance: none;
    56 	-webkit-appearance: none;
    57 	-webkit-border-radius: 3px;
       
    58 	border-radius: 3px;
    57 	border-radius: 3px;
    59 	white-space: nowrap;
    58 	white-space: nowrap;
    60 	-webkit-box-sizing: border-box;
       
    61 	-moz-box-sizing: border-box;
       
    62 	box-sizing: border-box;
    59 	box-sizing: border-box;
    63 }
    60 }
    64 
    61 
    65 /* Remove the dotted border on :focus and the extra padding in Firefox */
    62 /* Remove the dotted border on :focus and the extra padding in Firefox */
    66 .wp-core-ui button::-moz-focus-inner,
    63 .wp-core-ui button::-moz-focus-inner,
   110 .wp-core-ui input[type="reset"]:hover,
   107 .wp-core-ui input[type="reset"]:hover,
   111 .wp-core-ui input[type="reset"]:active,
   108 .wp-core-ui input[type="reset"]:active,
   112 .wp-core-ui input[type="reset"]:focus {
   109 .wp-core-ui input[type="reset"]:focus {
   113 	background: none;
   110 	background: none;
   114 	border: none;
   111 	border: none;
   115 	-webkit-box-shadow: none;
       
   116 	box-shadow: none;
   112 	box-shadow: none;
   117 	padding: 0 2px 1px;
   113 	padding: 0 2px 1px;
   118 	width: auto;
   114 	width: auto;
   119 }
   115 }
   120 
   116 
   125 .wp-core-ui .button,
   121 .wp-core-ui .button,
   126 .wp-core-ui .button-secondary {
   122 .wp-core-ui .button-secondary {
   127 	color: #555;
   123 	color: #555;
   128 	border-color: #cccccc;
   124 	border-color: #cccccc;
   129 	background: #f7f7f7;
   125 	background: #f7f7f7;
   130 	-webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba( 0, 0, 0, 0.08 );
   126 	box-shadow: 0 1px 0 #cccccc;
   131 	box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba( 0, 0, 0, 0.08 );
       
   132  	vertical-align: top;
   127  	vertical-align: top;
   133 }
   128 }
   134 
   129 
   135 .wp-core-ui p .button {
   130 .wp-core-ui p .button {
   136 	vertical-align: baseline;
   131 	vertical-align: baseline;
   148 }
   143 }
   149 
   144 
   150 .wp-core-ui .button.focus,
   145 .wp-core-ui .button.focus,
   151 .wp-core-ui .button:focus,
   146 .wp-core-ui .button:focus,
   152 .wp-core-ui .button-secondary:focus {
   147 .wp-core-ui .button-secondary:focus {
   153 	-webkit-box-shadow:
   148 	border-color: #5b9dd9;
   154 		0 0 0 1px #5b9dd9,
   149 	box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
   155 		0 0 2px 1px rgba(30, 140, 190, .8);
       
   156 	box-shadow:
       
   157 		0 0 0 1px #5b9dd9,
       
   158 		0 0 2px 1px rgba(30, 140, 190, .8);
       
   159 }
   150 }
   160 
   151 
   161 .wp-core-ui .button.active,
   152 .wp-core-ui .button.active,
   162 .wp-core-ui .button.active:hover,
   153 .wp-core-ui .button.active:hover,
   163 .wp-core-ui .button:active,
   154 .wp-core-ui .button:active,
   164 .wp-core-ui .button-secondary:active {
   155 .wp-core-ui .button-secondary:active {
   165 	background: #eee;
   156 	background: #eee;
   166 	border-color: #999;
   157 	border-color: #999;
   167 	color: #32373c;
   158 	box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
   168  	-webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
   159 	-webkit-transform: translateY(1px);
   169  	box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
   160 	transform: translateY(1px);
   170 }
   161 }
   171 
   162 
   172 .wp-core-ui .button.active:focus {
   163 .wp-core-ui .button.active:focus {
   173 	-webkit-box-shadow:
   164 	border-color: #5b9dd9;
   174 		inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ),
       
   175 		0 0 0 1px #5b9dd9,
       
   176 		0 0 2px 1px rgba(30, 140, 190, .8);
       
   177 	box-shadow:
   165 	box-shadow:
   178 		inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ),
   166 		inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ),
   179 		0 0 0 1px #5b9dd9,
   167 		0 0 3px rgba( 0, 115, 170, .8 );
   180 		0 0 2px 1px rgba(30, 140, 190, .8);
       
   181 }
   168 }
   182 
   169 
   183 .wp-core-ui .button[disabled],
   170 .wp-core-ui .button[disabled],
   184 .wp-core-ui .button:disabled,
   171 .wp-core-ui .button:disabled,
   185 .wp-core-ui .button.disabled,
   172 .wp-core-ui .button.disabled,
   188 .wp-core-ui .button-secondary.disabled,
   175 .wp-core-ui .button-secondary.disabled,
   189 .wp-core-ui .button-disabled {
   176 .wp-core-ui .button-disabled {
   190 	color: #a0a5aa !important;
   177 	color: #a0a5aa !important;
   191 	border-color: #ddd !important;
   178 	border-color: #ddd !important;
   192 	background: #f7f7f7 !important;
   179 	background: #f7f7f7 !important;
   193 	-webkit-box-shadow: none !important;
       
   194 	box-shadow: none !important;
   180 	box-shadow: none !important;
   195 	text-shadow: 0 1px 0 #fff !important;
   181 	text-shadow: 0 1px 0 #fff !important;
   196 	cursor: default;
   182 	cursor: default;
       
   183 	-webkit-transform: none !important;
       
   184 	transform: none !important;
       
   185 }
       
   186 
       
   187 /* Buttons that look like links, for a cross of good semantics with the visual */
       
   188 .wp-core-ui .button-link {
       
   189 	margin: 0;
       
   190 	padding: 0;
       
   191 	box-shadow: none;
       
   192 	border: 0;
       
   193 	border-radius: 0;
       
   194 	background: none;
       
   195 	outline: none;
       
   196 	cursor: pointer;
       
   197 	text-align: right;
       
   198 	/* Mimics the default link style in common.css */
       
   199 	color: #0073aa;
       
   200 	text-decoration: underline;
       
   201 	transition-property: border, background, color;
       
   202 	transition-duration: .05s;
       
   203 	transition-timing-function: ease-in-out;
       
   204 }
       
   205 
       
   206 .wp-core-ui .button-link:hover,
       
   207 .wp-core-ui .button-link:active {
       
   208 	color: #00a0d2;
       
   209 }
       
   210 
       
   211 .wp-core-ui .button-link:focus {
       
   212 	color: #124964;
       
   213 	box-shadow:
       
   214 		0 0 0 1px #5b9dd9,
       
   215 		0 0 2px 1px rgba(30, 140, 190, .8);
       
   216 }
       
   217 
       
   218 .wp-core-ui .button-link-delete {
       
   219 	color: #a00;
       
   220 }
       
   221 
       
   222 .wp-core-ui .button-link-delete:hover,
       
   223 .wp-core-ui .button-link-delete:focus {
       
   224 	color: #dc3232;
       
   225 }
       
   226 
       
   227 .ie8 .wp-core-ui .button-link:focus {
       
   228 	outline: #5b9dd9 solid 1px;
   197 }
   229 }
   198 
   230 
   199 /* ----------------------------------------------------------------------------
   231 /* ----------------------------------------------------------------------------
   200   3.0 - Primary Button Style
   232   3.0 - Primary Button Style
   201 ---------------------------------------------------------------------------- */
   233 ---------------------------------------------------------------------------- */
   202 
   234 
   203 .wp-core-ui .button-primary {
   235 .wp-core-ui .button-primary {
   204 	background: #00a0d2;
   236 	background: #0085ba;
   205 	border-color: #0073aa;
   237 	border-color: #0073aa #006799 #006799;
   206  	-webkit-box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.5), 0 1px 0 rgba( 0, 0, 0, 0.15 );
   238 	box-shadow: 0 1px 0 #006799;
   207  	box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.5 ), 0 1px 0 rgba( 0, 0, 0, 0.15 );
   239 	color: #fff;
   208  	color: #fff;
       
   209 	text-decoration: none;
   240 	text-decoration: none;
       
   241 	text-shadow: 0 -1px 1px #006799,
       
   242 		-1px 0 1px #006799,
       
   243 		0 1px 1px #006799,
       
   244 		1px 0 1px #006799;
   210 }
   245 }
   211 
   246 
   212 .wp-core-ui .button-primary.hover,
   247 .wp-core-ui .button-primary.hover,
   213 .wp-core-ui .button-primary:hover,
   248 .wp-core-ui .button-primary:hover,
   214 .wp-core-ui .button-primary.focus,
   249 .wp-core-ui .button-primary.focus,
   215 .wp-core-ui .button-primary:focus {
   250 .wp-core-ui .button-primary:focus {
   216 	background: #0091cd;
   251 	background: #008ec2;
   217 	border-color: #0073aa;
   252 	border-color: #006799;
   218  	-webkit-box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.6 );
       
   219  	box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.6 );
       
   220 	color: #fff;
   253 	color: #fff;
   221 }
   254 }
   222 
   255 
   223 .wp-core-ui .button-primary.focus,
   256 .wp-core-ui .button-primary.focus,
   224 .wp-core-ui .button-primary:focus {
   257 .wp-core-ui .button-primary:focus {
   225 	border-color: #0e3950;
   258 	box-shadow: 0 1px 0 #0073aa,
   226 	-webkit-box-shadow:
   259 		0 0 2px 1px #33b3db;
   227 		inset 0 1px 0 rgba( 120, 200, 230, 0.6 ),
       
   228 		0 0 0 1px #5b9dd9,
       
   229 		0 0 2px 1px rgba(30, 140, 190, .8);
       
   230 	box-shadow:
       
   231 		inset 0 1px 0 rgba( 120, 200, 230, 0.6 ),
       
   232 		0 0 0 1px #5b9dd9,
       
   233 		0 0 2px 1px rgba(30, 140, 190, .8);
       
   234 }
   260 }
   235 
   261 
   236 .wp-core-ui .button-primary.active,
   262 .wp-core-ui .button-primary.active,
   237 .wp-core-ui .button-primary.active:hover,
   263 .wp-core-ui .button-primary.active:hover,
   238 .wp-core-ui .button-primary.active:focus,
   264 .wp-core-ui .button-primary.active:focus,
   239 .wp-core-ui .button-primary:active {
   265 .wp-core-ui .button-primary:active {
   240 	background: #0073aa;
   266 	background: #0073aa;
   241 	border-color: #005082;
   267 	border-color: #006799;
   242 	color: rgba( 255, 255, 255, 0.95 );
   268 	box-shadow: inset 0 2px 0 #006799;
   243  	-webkit-box-shadow: inset 0 1px 0 rgba( 0, 0, 0, 0.1 );
   269 	vertical-align: top;
   244  	box-shadow: inset 0 1px 0 rgba( 0, 0, 0, 0.1 );
       
   245  	vertical-align: top;
       
   246 }
   270 }
   247 
   271 
   248 .wp-core-ui .button-primary[disabled],
   272 .wp-core-ui .button-primary[disabled],
   249 .wp-core-ui .button-primary:disabled,
   273 .wp-core-ui .button-primary:disabled,
   250 .wp-core-ui .button-primary-disabled,
   274 .wp-core-ui .button-primary-disabled,
   251 .wp-core-ui .button-primary.disabled {
   275 .wp-core-ui .button-primary.disabled {
   252 	color: #94cde7 !important;
   276 	color: #66c6e4 !important;
   253 	background: #298cba !important;
   277 	background: #008ec2 !important;
   254 	border-color: #1b607f !important;
   278 	border-color: #007cb2 !important;
   255 	-webkit-box-shadow: none !important;
       
   256 	box-shadow: none !important;
   279 	box-shadow: none !important;
   257 	text-shadow: 0 -1px 0 rgba( 0, 0, 0, 0.1 ) !important;
   280 	text-shadow: 0 -1px 0 rgba( 0, 0, 0, 0.1 ) !important;
   258 	cursor: default;
   281 	cursor: default;
       
   282 }
       
   283 
       
   284 .wp-core-ui .button.button-primary.button-hero {
       
   285  box-shadow: 0 2px 0 #006799;
       
   286 }
       
   287 
       
   288 .wp-core-ui .button.button-primary.button-hero.active,
       
   289 .wp-core-ui .button.button-primary.button-hero.active:hover,
       
   290 .wp-core-ui .button.button-primary.button-hero.active:focus,
       
   291 .wp-core-ui .button.button-primary.button-hero:active {
       
   292  box-shadow: inset 0 3px 0 #006799;
   259 }
   293 }
   260 
   294 
   261 /* ----------------------------------------------------------------------------
   295 /* ----------------------------------------------------------------------------
   262   4.0 - Button Groups
   296   4.0 - Button Groups
   263 ---------------------------------------------------------------------------- */
   297 ---------------------------------------------------------------------------- */
   270 	vertical-align: middle;
   304 	vertical-align: middle;
   271 }
   305 }
   272 
   306 
   273 .wp-core-ui .button-group > .button {
   307 .wp-core-ui .button-group > .button {
   274 	display: inline-block;
   308 	display: inline-block;
   275 	-webkit-border-radius: 0;
       
   276 	border-radius: 0;
   309 	border-radius: 0;
   277 	margin-left: -1px;
   310 	margin-left: -1px;
   278 	z-index: 10;
   311 	z-index: 10;
   279 }
   312 }
   280 
   313 
   285 .wp-core-ui .button-group > .button:hover {
   318 .wp-core-ui .button-group > .button:hover {
   286 	z-index: 20;
   319 	z-index: 20;
   287 }
   320 }
   288 
   321 
   289 .wp-core-ui .button-group > .button:first-child {
   322 .wp-core-ui .button-group > .button:first-child {
   290 	-webkit-border-radius: 0 3px 3px 0;
       
   291 	border-radius: 0 3px 3px 0;
   323 	border-radius: 0 3px 3px 0;
   292 }
   324 }
   293 
   325 
   294 .wp-core-ui .button-group > .button:last-child {
   326 .wp-core-ui .button-group > .button:last-child {
   295 	-webkit-border-radius: 3px 0 0 3px;
       
   296 	border-radius: 3px 0 0 3px;
   327 	border-radius: 3px 0 0 3px;
   297 }
   328 }
   298 
   329 
   299 .wp-core-ui .button-group > .button:focus {
   330 .wp-core-ui .button-group > .button:focus {
   300 	position: relative;
   331 	position: relative;
   347 		height: 28px;
   378 		height: 28px;
   348 		margin: 0;
   379 		margin: 0;
   349 		vertical-align: inherit;
   380 		vertical-align: inherit;
   350 	}
   381 	}
   351 
   382 
       
   383 	.media-modal-content .media-toolbar-primary .media-button {
       
   384 		margin-top: 10px;
       
   385 		margin-right: 5px;
       
   386 	}
       
   387 
   352 	/* Reset responsive styles on Log in button on iframed login form */
   388 	/* Reset responsive styles on Log in button on iframed login form */
   353 
   389 
   354 	.interim-login .button.button-large {
   390 	.interim-login .button.button-large {
   355 		height: 30px;
   391 		height: 30px;
   356 		line-height: 28px;
   392 		line-height: 28px;