egroupware_official/pixelegg/less/def_buttons.less

394 lines
9.0 KiB
Plaintext
Raw Permalink Normal View History

2013-11-14 20:11:29 +01:00
/**
* EGroupware: CSS with less preprocessor
*
* Definitions for buttons
*
* Please do NOT change css-files directly, instead change less-files and compile them!
*
* @link http://www.egroupware.org
* @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
* @author Stefan Reinhardt <stefan.reinhardt@pixelegg.de>
* @package pixelegg
2013-11-14 20:11:29 +01:00
* @version $Id$
*/
@import "definitions.less";
2013-11-14 20:11:29 +01:00
2013-11-22 06:27:29 +01:00
2013-11-14 20:11:29 +01:00
//#####################
//# Complete Button #
//#####################
.Complete_Button_normal{
2014-04-01 11:14:34 +02:00
/*.border_normal;*/
2014-01-23 09:44:38 +01:00
/*.box_shadow_standard_light;*/
2014-04-01 11:14:34 +02:00
/*.rounded (3px);*/
2013-12-30 18:32:42 +01:00
color: @gray_100;
2014-04-01 11:14:34 +02:00
2014-02-18 09:01:12 +01:00
// switch off for Safari + Chrome
-webkit-appearance: none;
2014-01-14 09:20:19 +01:00
-webkit-transition-property: background-color;
-moz-transition-property: background-color;
-o-transition-property: background-color;
transition-property: background-color;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
background-color: @gray_10;
2013-11-14 20:11:29 +01:00
}
.Complete_Button_hover{
2013-11-22 06:27:29 +01:00
// .border_hover;
.box_shadow_standard_light_hover;
2014-02-18 09:01:12 +01:00
background-color: inherit;
2013-11-14 20:11:29 +01:00
}
.Complete_Button_active{
2013-11-22 06:27:29 +01:00
// .border_hover;
.box_shadow_standard_light_inset;
2013-11-14 20:11:29 +01:00
}
.Complete_Button_focus{
2013-11-22 06:27:29 +01:00
// .border_hover;
.box_shadow_standard_light_inset;
2013-11-14 20:11:29 +01:00
}
2014-01-06 09:47:46 +01:00
/*ADD / Hinzufügen*/
2013-11-14 20:11:29 +01:00
.Complete_Button_add {
2013-11-22 06:27:29 +01:00
color: #FFF;
text-shadow: none;
2014-02-12 09:10:04 +01:00
.dimension_height_m;
2013-11-25 04:16:41 +01:00
/* height: auto;*/
background-image: none;
.border_radius_button_lefttop;
2013-11-22 06:27:29 +01:00
2013-12-08 22:36:30 +01:00
&:before {content: "+";font-size: 1.5em;color: @egw_color_1; line-height: 1.1em;}
2013-11-14 20:11:29 +01:00
}
.Complete_Button_add_hover {
background-color: @color_positive_action_active !important;
2013-11-22 06:27:29 +01:00
color: @egw_color_1;
.box_shadow_standard_light_hover;
.border_radius_button_lefttop;
2013-11-14 20:11:29 +01:00
}
2014-01-06 09:47:46 +01:00
2014-01-17 09:10:35 +01:00
/*ADD / Hinzufügen = only PLUS */
.Complete_Button_add_only_plus {
2014-02-19 09:20:52 +01:00
height: 24px;
width: 32px;
/*border: 1px solid #0C5DA5;*/
2014-02-19 09:20:52 +01:00
margin: 6px 2px;
2014-01-17 09:10:35 +01:00
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
2014-02-05 08:43:53 +01:00
padding: -0.5em;
2014-02-19 09:20:52 +01:00
background-color: @gray_10 !important;
background-size: 16px 16px;
.border_radius_button_lefttop;
2014-01-17 09:10:35 +01:00
2014-01-17 09:10:35 +01:00
&:before {
content: "";
font-size: 2em;
2014-02-19 09:20:52 +01:00
color: @egw_color_2_a;
line-height: 0.6em;
2014-01-17 09:10:35 +01:00
padding-left: 0.1em;
2014-04-01 11:14:34 +02:00
padding-right: 100em;
2014-04-24 13:01:34 +02:00
2014-01-17 09:10:35 +01:00
}
2014-02-05 08:43:53 +01:00
2014-01-17 09:10:35 +01:00
&:active {background-color: @color_positive_action_active;}
}
.Complete_Button_add_only_plus_hover {
background-color: @color_positive_action !important;
2014-01-17 09:10:35 +01:00
color: @egw_color_1;
.box_shadow_standard_light_hover;
.border_radius_button_lefttop;
}
2014-01-06 09:47:46 +01:00
2013-11-14 20:11:29 +01:00
.Complete_Button_hinweis{
2013-11-22 06:27:29 +01:00
.Button_size_square_32;
.border_normal;
padding: 0 0.2em;
border-left: 3px solid;
border-left-color: @lightgray;
2013-11-14 20:11:29 +01:00
}
2014-02-14 16:32:25 +01:00
/* ########################################################################################
2014-04-01 11:14:34 +02:00
*
2014-02-14 16:32:25 +01:00
* Button löschen / delete / => color-negative-action // red
*
2014-04-01 11:14:34 +02:00
######################################################################################## */
2014-02-14 16:32:25 +01:00
.Complete_Button_delete{
/*background-color: @color_negative_action_hover !important;*/
background-image:url('../../node_modules/bootstrap-icons/icons/trash3.svg');
2014-02-14 16:32:25 +01:00
margin-left: 3em;
background-color: @gray_10;
2014-02-14 16:32:25 +01:00
.Complete_Button_text_icon_before;
&:hover {
.Complete_Button_text_icon_before;
}
&:active {
.Complete_Button_text_icon_before;
}
2014-02-14 16:32:25 +01:00
}
/* ########################################################################################
2014-04-01 11:14:34 +02:00
*
2014-02-14 16:32:25 +01:00
* Button cancel / => color-cancel-action // yellow
*
######################################################################################## */
.Complete_Button_cancel{
background-image:url('node_modules/bootstrap-icons/icons/x-square.svg') !important;
.Complete_Button_text_icon_before;
content: "ID missing";
&:hover { color: @gray_100; .box_shadow_standard_light_hover;}
&:active { color: @gray_100; .box_shadow_standard_light_inset;}
2014-02-14 16:32:25 +01:00
}
/* ########################################################################################
2014-04-01 11:14:34 +02:00
*
2014-02-14 16:32:25 +01:00
* Button edit + save + apply + copy => color-positive-action // green
*
2014-04-01 11:14:34 +02:00
######################################################################################## */
2014-02-14 16:32:25 +01:00
.Complete_Button_save_apply_copy{
img[url*="svg"]{.gradient_vertical (@gray_30, @gray_30); fill: red;}
&:hover {
color: @gray_100;
.box_shadow_standard_light_hover;
}
&:active {}
2014-02-14 16:32:25 +01:00
}
2013-11-14 20:11:29 +01:00
// select
.Complete_Button_select{
/*.box_shadow_standard_light;*/
2013-11-22 06:27:29 +01:00
width: auto;
margin: 5px 0em 5px 0px;
2013-11-22 06:27:29 +01:00
padding:3px;
2013-11-14 20:11:29 +01:00
outline:none;
display: inline-block;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
cursor:pointer;
2013-11-22 06:27:29 +01:00
}
2013-11-14 20:11:29 +01:00
.Complete_Button_select_hover {
2013-11-22 06:27:29 +01:00
.box_shadow_standard_light_hover;
2013-11-14 20:11:29 +01:00
}
.Complete_Button_select_focus {
2013-11-22 06:27:29 +01:00
outline:0;
border-width:1px;
border-style: solid;
2013-12-30 18:32:42 +01:00
border-color: @gray_30;
2013-11-22 06:27:29 +01:00
-webkit-box-shadow: 0 0 2px 1px rgba(0,0,0, 0.10);
-moz-box-shadow: 0 0 2px 1px rgba(0,0,0, 0.10);
box-shadow: 0 0 2px 1px rgba(0,0,0, 0.10);
}
2013-11-14 20:11:29 +01:00
// Input
.Complete_Button_input{
2013-11-22 06:27:29 +01:00
.border_normal;
2013-12-30 18:32:42 +01:00
border-color: @gray_30;
2013-11-22 06:27:29 +01:00
.box_shadow_standard_light;
width: auto;
2013-12-20 10:36:43 +01:00
/*margin: 0.5em 0em 0.5em 0;*/
2013-11-22 06:27:29 +01:00
.border_radius_button_normal;
2013-11-14 20:11:29 +01:00
}
.Complete_Button_input_hover{
2013-11-22 06:27:29 +01:00
.box_shadow_standard_light_hover;
2013-11-14 20:11:29 +01:00
}
2013-12-20 10:36:43 +01:00
2013-11-14 20:11:29 +01:00
.Complete_Button_input_focus {
2013-11-22 06:27:29 +01:00
outline:0;
border-width:1px;
border-style: solid;
2013-12-30 18:32:42 +01:00
border-color: @gray_30;
2013-11-22 06:27:29 +01:00
-webkit-box-shadow: 0 0 2px 1px rgba(0,0,0, 0.10);
-moz-box-shadow: 0 0 2px 1px rgba(0,0,0, 0.10);
box-shadow: 0 0 2px 1px rgba(0,0,0, 0.10);
2013-11-14 20:11:29 +01:00
}
// Suchen button
.Complete_Button_search_action{
2013-11-22 06:27:29 +01:00
.border_normal;
2013-12-30 18:32:42 +01:00
border-color: @gray_30;
2013-11-22 06:27:29 +01:00
.box_shadow_standard_light;
2013-12-12 21:27:20 +01:00
width: 45px;
2014-01-14 17:05:31 +01:00
/*height: 1.6em;*/
2013-12-12 21:27:20 +01:00
2013-12-08 22:36:30 +01:00
.border_radius_button_righttop;
2013-12-30 18:32:42 +01:00
.background_color_search;
2013-11-14 20:11:29 +01:00
2013-12-08 22:36:30 +01:00
color: lighten(@egw_color_1, 15%);
2013-11-14 20:11:29 +01:00
text-decoration: none;
cursor: pointer;
2013-12-12 21:27:20 +01:00
padding: 0px;
2014-01-18 18:51:29 +01:00
margin: 7px;
2013-12-20 10:36:43 +01:00
margin-left: 0px;
background-image: url("../../node_modules/bootstrap-icons/icons/search.svg");
2013-12-08 22:36:30 +01:00
background-position: center 0;
background-size: contain;
background-repeat: no-repeat;
2013-11-14 20:11:29 +01:00
}
// Buchstaben
.Complete_Button_lettersearch{
border: 1px solid @gray_10;
background: #f8f8f8;
2013-11-22 06:27:29 +01:00
// border: 1px solid #D3DCE3;
text-align: center;
cursor: pointer;
2013-11-14 20:11:29 +01:00
}
// Text
.Complete_Button_text{
2013-11-22 06:27:29 +01:00
.border_radius_button_normal;
2013-12-30 18:32:42 +01:00
.background_color_10_gray;
border-color: @gray_50;
2013-11-22 06:27:29 +01:00
cursor: pointer;
2013-11-14 20:11:29 +01:00
}
.Complete_Button_text_hover {
2013-11-22 06:27:29 +01:00
.border_radius_button_normal;
.border_hover;
text-align: center;
cursor: pointer;
2013-12-30 18:32:42 +01:00
.background_color_30_gray;
2013-11-14 20:11:29 +01:00
}
.Complete_Button_text_active{
2013-11-22 06:27:29 +01:00
color: @gray;
2013-11-14 20:11:29 +01:00
}
.Complete_Button_text_icon_before{
2013-11-22 06:27:29 +01:00
.Complete_Button_normal;
padding-left: 30px;
background-position: 6px center;
background-repeat: no-repeat;
background-size: 20px auto;
2014-02-12 09:10:04 +01:00
/*.Button_size_h32_auto;*/
.dimension_height_m;
2013-11-14 20:11:29 +01:00
}
.Complete_Button_text_icon_before_hover{
2013-11-22 06:27:29 +01:00
.Complete_Button_text_icon_before;
.box_shadow_standard_light_hover;
2013-11-14 20:11:29 +01:00
}
.Complete_Button_text_icon_before_active{
2013-11-22 06:27:29 +01:00
.Complete_Button_text_icon_before;
.box_shadow_standard_light_hover;
2013-11-14 20:11:29 +01:00
}
// Buttons nur Icon
.Complete_Button_Icon_normal {
2014-01-08 08:57:35 +01:00
/*.background_color_10_gray;*/
2013-11-22 06:27:29 +01:00
.box_shadow_standard_light;
.border_normal;
2013-11-22 06:27:29 +01:00
.border_radius_button_normal;
2013-11-14 20:11:29 +01:00
}
.Complete_Button_Icon_hover {
2014-01-08 08:57:35 +01:00
/*.background_color_20_gray;*/
2013-11-22 06:27:29 +01:00
.box_shadow_standard_light_hover;
.border_hover;
.border_radius_button_normal;
2013-11-14 20:11:29 +01:00
}
.Complete_Button_Icon_active {
2014-01-08 08:57:35 +01:00
/*.background_color_30_gray;*/
2013-11-22 06:27:29 +01:00
.border_active;
.border_radius_button_normal;
2013-12-12 21:27:20 +01:00
.box_shadow_standard_light_inset;
2014-01-08 08:57:35 +01:00
background-color: @color_positive_action_active;
2013-11-14 20:11:29 +01:00
}
// #############################
// Button Sub Menupunkte
.Complete_Button_Module_Menu_Links{
2013-12-30 18:32:42 +01:00
.background_color_10_gray;
2013-11-14 20:11:29 +01:00
}
.Complete_Button_Module_Menu_Links_Hover{
2013-12-30 18:32:42 +01:00
.background_color_30_gray;
.color_5_gray;
2013-11-14 20:11:29 +01:00
}
.Complete_Button_Module_Menu_Links_active{
2013-12-30 18:32:42 +01:00
.background_color_10_gray;
2013-11-14 20:11:29 +01:00
}
// Button Sub Sub Menupunkte
.Complete_Button_Module_Menu_Links_Sub_Hover {
2013-11-22 06:27:29 +01:00
margin-left: 2px;
padding-top: 0px;
padding-bottom: 5px;
.border_normal;
2013-12-30 18:32:42 +01:00
.background_color_15_gray;
2013-11-14 20:11:29 +01:00
}
.Complete_Button_Module_Menu_Links_Sub {
2013-11-22 06:27:29 +01:00
margin-left: 3px;
padding-top: 0px;
padding-bottom: 5px;
.border_normal;
border-top-width: 0px;
2013-12-30 18:32:42 +01:00
.background_color_10_gray;
2013-11-22 06:27:29 +01:00
margin-top: -7px;
padding-left: 14px;
width: 93%;
}
2013-12-16 10:37:26 +01:00
2014-01-14 09:20:19 +01:00
/*#####################################################
Images svg
#####################################################*/
/*delete*/
img[url*="delete"]{.gradient_vertical (@gray_30, @gray_30);}
//